✨ SVSThemes for VS Code

SVSThemes is an ultra-modern, eye-catching VS Code theme suite: 20 handcrafted palettes engineered for visual ergonomics, balanced contrast, and vivid, elegant syntax highlighting.

🎨 The Collection

Signature Dark Themes

🌈 Extended Collection

🎛️ Sidebar Customizer

Click the palette icon in the Activity Bar (or run SVS Themes: Open Customizer) to open the Customize panel:

• Theme: switch between all 20 SVS themes from preview cards.
• Fonts: editor font family (installed fonts are detected), size, line height, letter spacing, weight, ligatures, terminal font size, and overall interface size.
• Code colors & styles: recolor comments, keywords, strings, functions, types and more, and toggle bold / italic / underline for each.
• Interface colors: grouped by area: editor & tabs, title bar & menus, side bar, status bar, panel & terminal, buttons & accents (alpha supported).
• Window color tag: tint one window's title bar, activity bar and/or status bar so you can tell windows apart. It stays on when you switch themes.

Custom themes

Once you like a look, click Save current look… under My themes (or run SVS Themes: Save Current Look as Custom Theme…). A custom theme stores the base theme, your code colors & styles, your interface colors and, if you choose, your fonts.

• Click a custom theme card to apply it; it shows a ✓ while your current look matches it.
• The ⋯ button on a card offers Update with Current Look, Rename, Duplicate, Export… and Delete.
• Export… saves a .svstheme.json file that others can add with Import… (or SVS Themes: Import Custom Theme…).
• Custom themes are stored in the svsThemes.customThemes user setting, so Settings Sync carries them to your other machines.

Custom themes live in the SVS panel and the SVS Themes: Apply Custom Theme… command. They don't appear in VS Code's built-in theme picker, because extensions can't add themes to it at runtime.

All windows vs. This window

The Apply changes to switch at the top decides where changes are saved:

• All windows: your user settings.json.
• This window: the open folder's .vscode/settings.json (or the .code-workspace file), so two windows can use different themes, fonts and colors. Interface size always applies to every window.

If the folder is in Git, committing .vscode/settings.json shares these settings with your team; add it to .gitignore to keep them to yourself.

Color changes are scoped to the active theme ("[svs-nordic-aurora]": { ... }), so each theme keeps its own tweaks. Reset a single item with ↺, a whole section, or everything with SVS Themes: Reset Fonts & Colors. In "This window" mode, that reset removes the window's own settings so it goes back to your all-windows setup.

VS Code doesn't let extensions change the font family of the sidebar, tabs or menus. Interface size (window.zoomLevel) scales the whole window instead.

🏗️ Architecture

SVSThemes uses a token-driven generator instead of hand-maintained JSON files:

VsCodeThemes/
├── package.json          <-- Extension manifest (themes list auto-synced)
├── extension.js          <-- Sidebar customizer (reads/writes user settings)
├── media/                <-- Customizer webview (panel.js, panel.css) + activity bar icon
├── icon.png              <-- Generated SVS monogram icon
├── scripts/
│   ├── generate.js       <-- Palette registry & theme compiler
│   └── create-icon.js    <-- Zero-dependency PNG icon renderer
└── themes/               <-- Compiled VS Code theme JSON (svs-*.json)

Why it works

1. Single source of truth. Workbench styling and syntax tokens (TextMate + semantic) share one rule set.
2. Add a theme in seconds. Add one palette object to scripts/generate.js and run npm run build. The generator writes the theme file and registers it in package.json automatically.
3. Accessible by default. Button and badge text color is chosen automatically for the best contrast against each accent.
4. Deep coverage. TypeScript, JavaScript, React/JSX, Python, Rust, Go, CSS/SCSS, JSON, YAML, TOML, and Markdown, plus bracket-pair colors, diagnostics, git gutters, diff views, and the terminal.

📦 Installation (.vsix)

Build the installer:

npm run package        # produces svs-themes-1.0.0.vsix

Terminal

npm run install:local
# or
code --install-extension svs-themes-1.0.0.vsix

VS Code GUI

1. Open the Extensions view (Cmd+Shift+X / Ctrl+Shift+X).
2. Click the ... menu at the top-right of the panel.
3. Choose Install from VSIX... and select svs-themes-1.0.0.vsix.
4. Press Cmd+K Cmd+T (Ctrl+K Ctrl+T) and pick any SVS theme.

🚀 Publishing to the VS Code Marketplace

1. Create a publisher at marketplace.visualstudio.com/manage.
2. Set your publisher ID in package.json (currently "publisher": "Vamseek") and update the repository URL.
3. Publish using one of these options:
   • Web upload: click New extension → Visual Studio Code and drop in the .vsix.
   • CLI: create a Personal Access Token on dev.azure.com with Marketplace (Manage) scope, then:

     npx vsce login <your-publisher-id>
     npm run publish
     

💎 Recommended Settings

{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.renderLineHighlight": "all",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.semanticHighlighting.enabled": true,
  "workbench.iconTheme": "material-icon-theme",
  "window.titleBarStyle": "custom"
}

🛠️ Customizing

1. Open scripts/generate.js.
2. Edit a palette, or add a new one to the palettes object (type: 'dark' or 'light').
3. Run npm run build.

Stale theme files are removed automatically, and package.json is updated for you.

MIT © SVSThemes