material-theme / vsc-material-theme

Material Theme, the most epic theme for Visual Studio Code
https://www.material-theme.dev
Other
11.21k stars 788 forks source link

Can't Override Color #1299

Closed Graywaren closed 6 months ago

Graywaren commented 6 months ago

Hello I'm brand new to VSCode, and was getting it set up with your theme, but I hate yellow and want to override it. I tried to follow your tutorial and the VSCode tutorial and cannot get it to change. I have tried adding

"editor.tokenColorCustomizations": { "[Material Theme]": { "cssClass": "#color" } },

to the settings.json file in every which way that I can think of doing it and nothing happens. It tells me cssClass is not an allowed property. The only allowed properties seem to be comments, functions, etc. However, I thought from the tutorial that everything listed in the Syntax section of the linked code page was able to be used like this? All the ones I can find for the workbench customizations show up if I try to add to that section, but the only ones showing up for tokencolor are the default ones.

I have also tried

"editor.tokenColorCustomizations": { "[Material Theme]": { "textMateRules": [ { "scope": [ "entity.name.tag" ], "settings": { "foreground": "#89DDFF" } } ] }, },

And that didn't work either. I have followed every link on the vscode documentation and read your page on it multiple times, tried every variation I can think of, googled for other tutorials, and I cannot figure it out or even figure out why none of it is working. Apologies if I'm missing something obvious, but could you please tell me exactly what I need to do to override the yellow colors?

Thanks

Graywaren commented 6 months ago

Managed to finally figure this out and leaving my answer here for any other newbies like me who are maybe having the same trouble. The issue was that I misunderstood this line in the tutorial:

[Material Theme] selector applies the styles to every variant. If you want to apply changes only to a specific variant, replace the with the variant name. Eg: [Material Theme Darker].

I thought it meant that [Material Theme] applied to all variants and to replace the asterisk with a variant name if you wanted only a specific theme, so I was removing the asterisk. Finally realized it was actually saying that you have to include the star to apply it to all themes. So if you want to apply to all themes, make sure you include the asterisk! Here's an example for anyone struggling:

"editor.tokenColorCustomizations": { "[Material Theme*]": { "textMateRules": [ { "scope": [ "entity.name.tag.css" ], "settings": { "foreground": "#00BCD4" } } ] }, },