Skip to content

Add token background colors to themes#212294

Open
mattmundell wants to merge 5 commits intomicrosoft:mainfrom
mattmundell:theme-token-background-color
Open

Add token background colors to themes#212294
mattmundell wants to merge 5 commits intomicrosoft:mainfrom
mattmundell:theme-token-background-color

Conversation

@mattmundell
Copy link
Copy Markdown

@mattmundell mattmundell commented May 8, 2024

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" })

example

@mattmundell
Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree

@alexdima
Copy link
Copy Markdown
Member

alexdima commented Jun 6, 2024

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
Copy link
Copy Markdown
Author

  • 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.
shot1

Here's with word highlight over the background.
shot2

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

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
Copy link
Copy Markdown

... 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.

Copy link
Copy Markdown

@mattdyerets mattdyerets left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@wchristian
Copy link
Copy Markdown

why is this still blocked?

@sambacha
Copy link
Copy Markdown

sambacha commented Feb 7, 2025

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" })

example

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

sambacha added a commit to sambacha/vscodium that referenced this pull request Feb 7, 2025
@nanoant
Copy link
Copy Markdown

nanoant commented Sep 2, 2025

What are we waiting for? Can someone with proper entitlements review this, so we can close this one 9 year old issue #3429 ?

@arisv
Copy link
Copy Markdown

arisv commented Jan 15, 2026

It's a very useful customization feature, please give it some attention

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[themes] Themes don't support background styling

10 participants