Customizing styling based on theme - vscode integration

[jmenzies12]

Hey there,

I am trying to change the colour of my edges based on the vscode theme in use by the user. They automatically change from black to grey when the user switches between light and dark themes. However I'm having trouble adding conditions in the client CSS to customize my edges further ( eg make the fill colour of the edge arrow black on dark mode instead of white because it's hard to read against the grey of the edge itself). Wondering if I maybe this doesn't work because I'm giving the style on the client side and I need to add CSS into the webview instead?

I tried media queries such as @media (prefers-color-scheme: dark) but with no luck.

Cheers
Jonathan

[tortmayr]

Hi @jmenzies12,
it shouldn't matter whether you add you custom css on the client side or directly in the webview part. (The webview consumes the client anyways and should have all of its css imported as well). However, if you want to be on the safe side adding it to the webview is the right call.

I have never tried using @media for theme specific customizations. In general, there are two common approaches for theme specific css customizations

1. Reuse the builtin --vscode-xxx css variables. VSCode uses css variables to provide theme specific colors. So a straight forward and simple solution is to reuse these css-variables in your custom style. The GLSP Vscode integration heavily uses this approach in the default stylesheets.
   Of course this approach has its limitations and only works if you find a color definition that fits your needs.

2. In general VSCode distinguishes 4 different theme types: dark,light, high-contrast and high-contrast-light. The currently active theme type is attached to the dom body as data-property. So you can use this to apply custom styling based on the theme type.
   An example of that can be found in features.css file of the vscode-integration master

[jmenzies12]

Hey,

Ahh right okay, I see what you mean. I tried both of your suggestions whilst still keeping the CSS on the client side and they worked correctly.

Thank you very much for the help.