loading...
Cover image for Make your own custom theme for VS Code

Make your own custom theme for VS Code

js2me profile image Sergey S. Volkov Updated on ・2 min read

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

Custom CSS and JS Loader

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:

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

Discussion

pic
Editor guide
Collapse
amiralmusawi profile image
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!

Collapse
gabrielbidula profile image
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

Collapse
js2me profile image
Sergey S. Volkov Author

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