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:

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 :)