Sublime Forum

Color scheme vs. The color of tab close button

#1

This is my Sparta color scheme, almost finished:

{
  "name": "Sparta",
  "globals":
  {
    "accent": "red",

    "line_highlight":            "#eee",
    "selection":                 "#eee", "selection_border":          "#000",
    "inactive_selection":        "#eee", "inactive_selection_border": "#000",

    "brackets_options":          "glow", "brackets_foreground":       "#f00",
    "tags_options":              "glow", "tags_foreground":           "#00f",
    "bracket_contents_options":  "none",

    "scroll_highlight":          "#ccc",
    "scroll_selected_highlight": "#000",
  },
  "rules":
  [
    {"name":  "Comments",
     "scope": "comment, punctuation.definition.comment, invalid comment",
     "foreground": "#f0f"},

    {"name":       "Mistakes",
     "scope":      "invalid, invalid string, invalid constant, invalid entity.name, invalid punctuation, invalid source.symbol",
     "foreground": "#f00",
     "background": "yellow"},
  ]
}

But there is a thing that I don’t understand. When I create a new tab, its “close” button (little red x) takes the last color I used in the color scheme. That is, currently the tab close button is red (#f00), and if I delete the “Mistakes” section, it will be fuchsia (#f0f). Why is that?

0 Likes
#2

Sublime Text supports various predefined valiables which can be used by themes to tint UI elements.

Their values are derived from selected color scheme by default. Your color scheme doesn’t provide enough context for that algorithm to calculate sane values.

Color schemes can however explicitly define those colors in their variables section.

{
  "name": "Sparta",
  "variables":
  {
    "--bluish": "blue",
    "--cyanish": "cyan",
    "--greenish": "green",
    "--orangish": "orange",
    "--pinkish": "fucsia",
    "--purplish": "purple",
    "--redish": "red",
    "--yellowish": "yellow",
  },
  ...
1 Like
#3

Thanks, now I understand.

But could you also explain whether I should also define the --foreground, --background, and --accent variables? Or, probably a better question, what are they used for? I tested them and it seems --foreground doesn’t affect foreground text, --background doesn’t affect background, and --accent doesn’t affect the highlight color of modified tabs.

Test 1:

"--foreground": "black",
"--background": "white",
"--accent":     "red",

Test 2:

"--foreground": "white",
"--background": "black",
"--accent":     "red",

The complete scheme:

{
  "name": "Sparta",
  "variables":
  {
    "--bluish":     "blue",
    "--cyanish":    "cyan",
    "--greenish":   "green",
    "--orangish":   "orange",
    "--pinkish":    "pink",
    "--purplish":   "purple",
    "--redish":     "red",
    "--yellowish":  "yellow",

    "--foreground": "black",
    "--background": "white",
    "--accent":     "red",
  },
  "globals":
  {
    "line_highlight":            "#eee",
    "selection":                 "#eee",      "selection_border":          "#000",
    "inactive_selection":        "#eee",      "inactive_selection_border": "#000",

    "brackets_options":          "glow bold", "brackets_foreground":       "#000",
    "tags_options":              "glow",      "tags_foreground":           "#000",
    "bracket_contents_options":  "none",

    "scroll_selected_highlight": "#f00",
    "scroll_highlight":          "#000",
  },
  "rules":
  [
    {"name":  "Comments",
     "scope": "comment, punctuation.definition.comment, invalid comment",
     "foreground": "#f0f"},

    {"name":  "Mistakes",
     "scope": "invalid, invalid string, invalid constant, invalid entity.name, invalid punctuation, invalid source.symbol",
     "foreground": "#f00", "background": "#fee"},
  ]
}
0 Likes
#4

They are used by themes to access foreground, background and accent of a color scheme’s "globals" section.

  "globals":
  {
    "foreground": "black",  // accessible via "--foreground"
    "background": "white",  // accessible via "--background"
    "accent":     "red",    // accessible via "--accent"
1 Like