Usage Guide

This page covers the day-to-day use of the Custom CSS and JS extension, including its commands and the process for handling VS Code updates.

Extension Commands

All extension commands are accessible through the Command Palette. Open it with F1, Ctrl+Shift+P (Windows/Linux), or Cmd+Shift+P (macOS).

Enable Custom CSS and JS

This is the primary command to activate your customizations. It performs the following actions:

  1. Reads the URLs from the vscode_custom_css.imports array in your settings.
  2. Creates a backup of the original VS Code workbench HTML file.
  3. Fetches the content from each URL.
  4. Injects the fetched CSS and JS content directly into the workbench HTML file.
  5. Prompts you to restart VS Code to apply the changes.

Disable Custom CSS and JS

This command safely deactivates and removes all customizations. It performs the following actions:

  1. Restores the original workbench HTML file from the backup created during installation.
  2. Deletes the backup file.
  3. Prompts you to restart VS Code to return to the default state.

Reload Custom CSS and JS

This command is a convenient shortcut that first disables and then re-enables your customizations. It is the command you should use when you have:

  • Changed the URLs in your vscode_custom_css.imports setting.
  • Updated the content of your local CSS or JS files and want to see the changes.

It effectively runs the Disable command followed by the Enable command in one step.

Handling VS Code Updates

Each time Visual Studio Code is updated, it replaces its core files, including the workbench.html file that this extension modifies. This means your custom CSS and JS will be removed during the update process.

To restore your customizations, simply run the Enable Custom CSS and JS or Reload Custom CSS and JS command again after the update is complete and restart VS Code. The extension will re-apply your patches to the new version of the file.