Custom CSS and JS Loader

This extension allows you to load custom CSS and JavaScript files into Visual Studio Code, giving you powerful customization options beyond what's possible with themes and built-in settings.

Based on the original work by robertohuertasm, this tool injects your specified stylesheets and scripts directly into VS Code's core, enabling deep modifications to the editor's appearance and behavior.

Important Notices

VS Code 'Corrupted' Warning

After enabling custom CSS/JS, VS Code may display a warning that your installation is 'corrupted'. This is expected behavior because the extension modifies a core file. Simply click “Don't show again” to dismiss it. For a more permanent solution, you can install the Fix VSCode Checksums Next extension.

Re-enable After Updates

Every time Visual Studio Code updates itself, your custom modifications will be overwritten. You must re-run the Enable Custom CSS and JS command after each update to re-apply your styles and scripts.

Reload on Configuration Changes

Similarly, you must re-run the Reload Custom CSS and JS command whenever you change the paths in your settings.json file for the changes to take effect.

Key Features

  • Load Custom CSS & JS: Apply any number of custom CSS or JavaScript files to the VS Code workbench.
  • Flexible Imports: Load files from your local machine using file:// URLs or from remote sources via http:// or https://.
  • Dynamic Paths with Variables: Use variables like ${userHome} and environment variables like ${env:MY_VAR} in your file URLs for portable configurations.
  • Status Bar Indicator: A small paint can icon in the status bar indicates that custom styles/scripts are active.
  • Simple Command Interface: Enable, disable, or reload your customizations easily through the VS Code command palette.

Disclaimer

This extension modifies Visual Studio Code's core files. While it includes a robust backup and restore mechanism, you should use it at your own risk. The extension injects code into electron-browser/index.html to achieve its functionality. For a detailed explanation of this process, please see the How It Works page.