italic CSS properties

[JonathanMH]

Hi there!

I love the theme, but when I write CSS it's really annoying to look at all the italic properties in VScode, is there any way in VScode to have language specific overrides that don't mess with the rest?

I couldn't find any note of it in the theming documentation: https://code.visualstudio.com/docs/getstarted/theme-color-reference

[Poorchop]

Hello. Please excuse the late response - I never got an email about this issue strangely enough and I've been kind of MIA for a while.

It has been a long time since since I ported this theme but I used TmTheme Editor to generate the VSCode style. The italic properties are probably defined by the library class/type style. While you can have language-specific styles, I think that removing italics only for CSS could be a bit tricky. You would have to comb through a bunch of languages to figure out what is affected by the library class/type variable and then create new variables for those languages in order to retain the current style. Then you would have to create a separate variable for CSS (something like support.type.property-name.css) without the italics.

The simplest solution would just be to remove italics from the library class/type variable altogether. In this case, you should be safe just deleting line 245 here. You can fine tune the theme for every single language but I kept it simple and stuck with the more universal scopes, hence the italic CSS properties.

Not the clearest explanation but if you need more clarification, let me know. If I have more time, I might be able to fiddle around in the TmTheme Editor to see if the CSS override is possible by mixing up scope rules a bit.

[JonathanMH]

@Poorchop: That makes a lot of sense actually and I love the colours!

I'm a bit of a theme hopper and I don't know how they all do it to be honest, but I think more fine-grained language support is ok to have.

I'll try to play with the CSS based language override a bit. This TmTheme thing seems pretty cool and to be honest I think it makes a lot of sense to have cross editor theme formats. There is no reason to re-invent the wheel countless times except in the dev world ;).

Thanks for your response, have a great day!

[Poorchop]

Thanks for the kind words. In an ideal world, I would have tailored the theme to each individual language but I might get around to doing it some day. One of the main challenges with this however is staying true to the source theme. Also while a lot of newer editors use TextMate formatted theme, many of them don't so cross-editor consistency would be tricky as well.

If you figure out the selectors to achieve what you want, feel free to let me know. I have to double check but I think that getting rid of the italics in CSS might actually be closer to the original Darktooth theme. Thanks.

[Poorchop]

I created a new version of the VS Code theme pretty much from scratch and it does not have any italic CSS properties. However, class and ID selectors are italicized as HTML attributes are now italicized to make HTML files easier to read, and I don't think that there's any way to have one without the other in this particular case. Hopefully that's not too much of a problem for you, otherwise I can show you how to disable italics for this selector.

In any case, the documentation that you specifically want regarding your question is here. You can set different rules for different languages by increasing the specificity of the selectors.

Unfortunately I'm having trouble pushing the new theme to the VS Code marketplace but I'm working on it. If you're still using this theme, then hopefully the new changes will be more to your liking.

[JonathanMH]

@Poorchop Amazing! I'll have to check that out!

I almost forgot about this issue. Wow!