Make your own custom theme for VS Code

Hi everyone! :)

A few days ago I found some extension which allows you to load custom CSS and JS files into Visual Studio Code. And if have interest to modify your using theme or make own CSS styles for Visual Studio Code this article can helps you :)

Extenstion which is needed for us it is Custom CSS and JS Loader. You need to install it

After installing you need to turn on this extension. Open your command palette with Ctrl + Shift + P or Shift + ⌘ + P or F1 and choose "Enable custom CSS and JS". It will prompt you to restart.

Next step you need to create CSS file on your file system and add path to this file to property vscode_custom_css.imports in settings.json of VS Code.

{
  "vscode_custom_css.imports": [
    "file:///{PATH_TO_THIS_FILE}/{YOUR_FILE_NAME}.css"
  ]
}

If you are using Windows (like me) you need to write path to file like this

{
  "vscode_custom_css.imports": [
    "file:///C:/Users/User/vs_dark.css"
  ]
}

You can put to this CSS file one of following styles:

• Neon CSS styles (synthwave84.css)
• My VS Code dark theme extension

Also if you attached synthwave84.css you should install this theme to VS Code or if you use my VS Code dark theme extension you should select Dark+ (default dark) theme in VS Code

After this you need to reload VS Code to enable this custom css files.
For that you need to open up command palette and choose "Reload custom CSS and JS"

After that you should see the CSS modifications in your VS Code :)

Or if you attach synthwave.css your VS Code editor should looks like

And if you want to debug and modify this file you need to open up command and choose "Developer: Toggle Developer Tools".

It open up developer tools which are the same as in Google Chrome.

And your custom styles are overriding existing

If you have some question don't worry to ask here
Thanks for read this article, enjoy :)

Extra links

• Custom CSS and JS loader for VS Code
• SynthWave custom css extension for VS Code

Comments

[Amir Almusawi]

I came here to figure out how to add a little padding to the tiny horizontal tab scroll bar across the top of my code editor. I'm leaving with a glowing synthwave theme. I still have a hard time dragging the bar, but I'm happier about it now. Thanks!

[GeneralGrifon]

I'm not too strong in coding. just taking some steps in web design.
how can I apply glow effect to divs in my own theme?
I executed all the instructions, specified the path to the css file, but it didn't work

[Gabriel Borges Oliveira]

nice! do you know a way to create vscode theme based in Xresources colors? ie: i have an vim color theme that has Xresources colors file so would like to port that theme to vscode. cheers

[Sergey S. Volkov]

Hi, Gabriel, thanks for your reply!
I don't know any ready solutions, because it probably can be too specific
But you can try to find some tool which able to convert all styles from Xresources config file to the valid css file or try to do it manually