Vitesse Theme for VS Code

Screen Shot 2021-03-08 at 12 32 54 AM

截屏2024-05-30 18 22 44 截屏2024-05-30 18 22 52

_{Font | Input Mono

File Icons | File Icons

Product Icons | Carbon}

Match with System

// .vscode/setting.json
{
  "window.autoDetectColorScheme": true,
  "workbench.preferredLightColorTheme": "Vitesse Light",
  "workbench.preferredDarkColorTheme": "Vitesse Dark",
}

Bundled Custom CSS

This extension ships two style files in custom/:

custom/custom-vscode.css — UI overrides (title bar, activity bar, command palette, …)
custom/vscode-script.js — command palette background blur

They are applied through Custom CSS and JS Loader, which is VS Code only. On install from the VS Code Marketplace the loader comes along as an extension pack; the Open VSX build carries the colour themes alone.

On activation the theme checks that a loader is actually installed before doing anything. If none is found it says so and leaves your settings untouched — it never writes vscode_custom_css.imports for an extension that is not there. Both the official build (be5invis.vscode-custom-css) and the Open VSX mirror (s-h-a-d-o-w.vscode-custom-css) are recognised.

The loader patches VS Code's own workbench.html. It needs write access to the VS Code installation directory. On macOS, grant it with:
sudo chown -R $(whoami) "$(which code)"
sudo chown -R $(whoami) /usr/share/code

After every VS Code update the patch is wiped. Just run Vitesse: Apply Custom CSS and JS from the Command Palette and restart.

To opt out, set "my-theme-vitesse.autoApplyCustomCss": false, or run Vitesse: Restore Custom CSS and JS to undo the patch. Existing entries in vscode_custom_css.imports are preserved — only this extension's own files are managed.

If VS Code reports that its installation is corrupted, that is expected for a patched workbench; click "Don't show again", or install Fix VSCode Checksums Next.

Code

# clone
git clone git@github.com:zhanghuid/vscode-theme-vitesse.git

# login to the vscode marketplace
vsce login your-name

# build the package
vsce package

Thanks

This project is based on vscode-theme-vitesse by Anthony Fu, which in turn derives from Vitesse. The colour definitions in scripts/ and the generated files in themes/ come from that project.

The custom styling this theme ships would not be possible without Custom CSS and JS Loader by Belleve Invis, which itself is based on vscode-icons by Roberto Huertas. This theme declares it as an extensionPack dependency and drives it through its public commands — the work of patching VS Code's workbench.html, backing it up and restoring it is entirely theirs.

Thank you to both projects for making this possible.

See NOTICE.md for the full third-party license texts.

License

Third-party components are listed in NOTICE.md.

My Vitesse Theme