Add token background colors to themes

[mattmundell]

Add support for background colors to theme rules.

Closes #3429.

I did this before noticing #3429. Maybe helps someone wanting to patch their own version.

Example

id = 'patch'
tokenizer = {
  root: [
    [/^---\s.*/, "bredfill"],
    [/^\+\+\+\s.*/, "bredfill"],
    [/^\@\@\s.*/, "bredfill"],
    [/^-.*/, "minus"],
    [/^\+.*/, "plus"],
  ],
}

Mon.languages.register({ id: id,
                         firstLine: '^diff --git.*',
                         'mime-type': ['text/x-diff', 'text/x-patch', 'application/x-patch'],
                         extensions: ['.patch', '.diff'] })
Mon.languages.setMonarchTokensProvider(id, { tokenizer: tokenizer })

themeSolarized.rules.push({ "foreground": '073642',
                            "background": 'eee8d5',
                            "token": "bredfill" })

[mattmundell]

@microsoft-github-policy-service agree

[alexdima]

Thank you! While this is straight-forward to implement, I have always had 2 major concerns why I didn't implement this:

• what is the effect of blending other background colors with the theme defined background for tokens? How does selection, find matches, word highglights, etc. look like when the theme defines such a background color
• which of the top 20 most used themes define background colors for tokens? if we are to begin respecting now the tokens background tokens, most users will be surprised and they will interpret this as a breaking change; with the previous vscode version their code looked one way, they did nothing, and now the code has certain (unexpected) background colors.

[mattmundell]

• what is the effect of blending other background colors with the theme defined background for tokens? How does selection, find matches, word highglights, etc. look like when the theme defines such a background color

With 1291b04 the token backgrounds go below the decoration layer, so selection etc are always visible.

Here's the plain case. Cursor is at the start of line 17. The light blue is the line highlight. Tokens with backgrounds are on lines 12-14.

Here's with word highlight over the background.

And with the selection over the background. Note that the line highlight is removed whenever there's a selection.

which of the top 20 most used themes define background colors for tokens? if we are to begin respecting now the tokens background tokens, most users will be surprised and they will interpret this as a breaking change; with the previous vscode version their code looked one way, they did nothing, and now the code has certain (unexpected) background colors.

Good point. Perhaps a flag on the theme could control whether backgrounds are used in rules.

[IngmarPaetzold]

... How does selection, find matches, word highglights, etc. look like when the theme defines such a background color

vary the intensity in some other way, e.g. invert the colors, or intensify them, or do a color shift; maybe give a new option mode how people want selection be displayed ("invert", "shift", "intensify", "blur" whatever).

... most users will be surprised and they will interpret this as a breaking change;

When the themes had no token background colors defined before, then nothing changes.

What about an option "NoBackgroundColor" - or, vice versa, "WithBackgroundColor" for those who want to intentionally enable that feature.

[mattdyerets]

This code looks good. I would like to have this feature also.

[wchristian]

why is this still blocked?

[sambacha]

Add support for background colors to theme rules.

Closes #3429.

I did this before noticing #3429. Maybe helps someone wanting to patch their own version.

Example

id = 'patch'
tokenizer = {
  root: [
    [/^---\s.*/, "bredfill"],
    [/^\+\+\+\s.*/, "bredfill"],
    [/^\@\@\s.*/, "bredfill"],
    [/^-.*/, "minus"],
    [/^\+.*/, "plus"],
  ],
}

Mon.languages.register({ id: id,
                         firstLine: '^diff --git.*',
                         'mime-type': ['text/x-diff', 'text/x-patch', 'application/x-patch'],
                         extensions: ['.patch', '.diff'] })
Mon.languages.setMonarchTokensProvider(id, { tokenizer: tokenizer })

themeSolarized.rules.push({ "foreground": '073642',
                            "background": 'eee8d5',
                            "token": "bredfill" })

Have you considered vscodium upstream? thank you for this, bless you