Can your theme be customized?

[bennycode]

Hey @imekachi, I am a big fan of your Darcula theme! 👏

I am using WebStorm since a decade and I am super happy that you bring its theme to VS Code. It makes me feel like home. 🏠

Is it possible to customize your theme? For instance, words like "export function" are pink in my IDE but orange in the VS Code Darcula theme. Is there a way to change this so they look the same as my WebStorm theme?

VS Code Darcula

My WebStorm's Darcula

Best from Berlin, Benny

[bennycode]

I just figured out that I can add the following in the settings.json file of my VS Code.

"workbench.colorCustomizations": {
    "[Webstorm Darcula 2022]": {"editorLineNumber.foreground": "#ff0000"}
}

This allows me to overwrite the colors. Can you give me a hint for the properties that are responsible for coloring keywords (like function, export & const), property & variable names (like youTubeId) and values (like 'playlist')?

[imekachi]

@bennycode Hi! you can use Inspect Editor Tokens command for that.

Then you click the keyword you would like to inspect, then it will show you the scope

After that, add the scope to your custom settings

  "workbench.colorCustomizations": {
    "[Webstorm Darcula 2022]": {
      "textMateRules": [
        {
          "scope": ["keyword"],
          "settings": {
            "foreground": "#ff0000"
          }
        }
      ]
    }
  }

I hope that helps!

BTW, here is my Webstorm's Darcula theme

Could you check if you're actually using Darcula in Webstorm? If you like that theme, it may be easier to download the theme you're using in Webstorm instead of manually customizing a ton of tokens of a different theme.