How to control "theme tinting" from syntax themes?


#1

I noticed that some UI themes take on a tint based on something it’s getting from the syntax theme.

I just released a new theme the other day, but when I use it with One Dark, the overall UI gets an overall green/yellow/brown tint I do not like.

For example, OneDark with my Kuroir theme. I love this:

But with the new theme:

I don’t like it… this theme was created from the"create theme" command – so what variables can I add/edit to influence OneDark to look the way I want.


#2

The One UI themes use the @syntax-background-color variable to determine the overall hue of the UI. As far as I know there’s no way around it short of using a different name for @syntax-background-color in your theme, but that is likely to break any packages that depend on it.

cc @simurai - maybe there should be a way for syntax themes to specify a different base color for the UI?


#3

What does this do:

.meta.cast {
   color: rgb(128, 128, 128);
}

#4

There are several background colors that are derived from the @syntax-background-color. It’s not possible to change the variables that go into those calculations. In isotope-ui there is this option of changing the background color, but it doesn’t change the colors of panels like search and command palette.

You could, in theory, use a different color than @syntax-background-color as the background for your syntax theme, but that’s a bit hacky.

In some cases isotope and one-* tend to get a bit murky, sadly my color theory is too 101-level to figure out a solution.


#5

Some UI themes use @syntax-background-color by choice. Trying to work around that would lead to some kind of " :cat: cat and :mouse: mouse" situation. And I think a Syntax theme shouldn’t have to worry about how it affects UI themes. Meaning the “problem” should be fixed by the UI theme.

@smlombardi In the case of One dark + Printen vs Kuroir. Looks like Printen’s background has a lot of saturation and thus One dark as well. Something that might help is adding some kind of saturation limit to One dark. Then One dark would still get the hue from Printen, but wouldn’t overshoot too much. I’ll try that out.


#6

@smlombardi I fiddled a bit around and pushed some changes.

The conclusion: Reducing saturation for brown/green colors, but leaving it for blue/purple seemed to help. The Printen theme:

Before:

After:


#7

That looks great.