Vipr Theme

The companion color theme and file icon theme for the Vipr VS Code extension and Vipr desktop app.
Nine color variants. One icon theme. Free.

Why Vipr Theme?

Built from the same design system that powers the Vipr desktop app and Vipr VS Code extension, this theme gives your editor the same visual language you see across the entire Vipr toolkit.

• Built for TypeScript and React. Semantic token scopes tuned for .ts, .tsx, JSX tags, interfaces, enums, decorators, and CSS — not just generic syntax groups.
• Nine color variants. Dark, light, high contrast, warm, cool, minimal, and violet-tinted options. Whatever your environment or mood, there's a Vipr variant for it.
• File icons included. 100+ icon definitions covering 100+ file extensions, 110+ config file names, 50 language IDs, and 65 folder names. No second extension needed.
• Semantic highlighting enabled. Goes beyond TextMate scopes. VS Code's language server drives the coloring, so types, parameters, and constants each get their own treatment.
• Generated from a typed token system. Every color traces back to a named design token. No magic hex values, no drift between variants.

Table of Contents

• Variants
• Previews
• Installation
• Language Support
• Features
• Recommended Font Setup
• Customization
• Part of the Vipr Ecosystem
• Contributing
• License

Variants

Previews

Installation

From the Marketplace

1. Open VS Code
2. Press Ctrl+P / Cmd+P to open Quick Open
3. Paste: ext install vipr.vipr-vscode-theme
4. Press Enter

Or search for "Vipr Theme" in the Extensions sidebar.

From VSIX

code --install-extension vipr-vscode-theme-0.1.0.vsix

Or use the command palette: Extensions: Install from VSIX...

Activating

1. Color theme: Ctrl/Cmd+K Ctrl/Cmd+T and select any Vipr variant
2. Icon theme: Open the command palette > Preferences: File Icon Theme > Vipr Icons

Language Support

Vipr Theme provides optimized syntax highlighting for the following languages, with semantic token support where VS Code's language server provides it:

Features

Semantic Highlighting

All nine color themes ship with semanticHighlighting: true. When VS Code's language server is active, you get precise coloring for:

• Types vs. interfaces vs. enums — each gets a distinct shade
• Functions vs. methods — async variants are italicized
• Constants vs. mutable variables — constants use warm yellow
• Readonly properties — styled distinctly from mutable properties
• Decorators — highlighted in yellow for visibility
• Abstract classes — italicized to distinguish from concrete classes
• Deprecated symbols — struck through automatically
• Declaration sites — parameter declarations are italicized

Terminal Colors

All 16 ANSI colors are mapped in every variant. Terminal output stays legible whether you're reading test results, git diffs, or log streams. Each variant's terminal palette harmonizes with its editor colors.

Bracket Pair Colorization

Six distinct bracket colors cycle through violet, sky, yellow, green, red, and light violet — so deeply nested JSX and TypeScript generics stay parseable at a glance. Active bracket pair guides are highlighted, inactive guides stay subtle.

Diff and Merge Views

Insertions, deletions, and merge conflict regions use dedicated background tints calibrated to be visible without overwhelming the content. Gutter indicators and overview ruler colors are included.

Inlay Hints

Type and parameter inlay hints are styled to be noticeably muted relative to real code — they're annotations, not code. Type hints and parameter hints each have their own subtle color treatment.

Chat and AI Panel

Inline chat, slash commands, and AI panel elements are themed to blend naturally with the editor while remaining distinct.

Sticky Scroll

Editor, sidebar, panel, and peek view sticky scroll headers use a frosted-glass appearance that blends with the underlying surface.

Accessibility

Both high contrast variants go beyond the basics:

• Visible contrastBorder on every widget, panel, and input
• Text contrast pushed to AAA (7:1) ratios against the editor background
• Focus indicators are amplified for keyboard navigation
• Built for developers who need it, not as an afterthought

File Icon Theme

100+ icons covering a wide range of file types, frameworks, and tools:

Recommended Font Setup

Vipr Theme works with any monospace font. For the best experience with ligatures, we recommend:

• JetBrains Mono — balanced readability with coding ligatures
• Fira Code — the original coding ligature font
• Cascadia Code — ships with VS Code on Windows

Add to your VS Code settings (Ctrl/Cmd+,):

{
  "editor.fontFamily": "JetBrains Mono, Fira Code, Cascadia Code, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14
}

Customization

Override theme colors

You can fine-tune any color in your VS Code settings.json:

{
  "workbench.colorCustomizations": {
    "[Vipr Dark]": {
      "editor.background": "#0a0c12",
      "statusBar.background": "#1c1357"
    }
  }
}

Override token colors

{
  "editor.tokenColorCustomizations": {
    "[Vipr Dark]": {
      "comments": "#636e7b",
      "textMateRules": [
        {
          "scope": "keyword",
          "settings": {
            "foreground": "#b7acff"
          }
        }
      ]
    }
  }
}

Override semantic token colors

{
  "editor.semanticTokenColorCustomizations": {
    "[Vipr Dark]": {
      "rules": {
        "type": "#7bc8ff",
        "interface": "#a0d7ff"
      }
    }
  }
}

Part of the Vipr Ecosystem

Vipr Theme is free and always will be. It pairs naturally with the rest of the Vipr toolkit:

• Vipr VS Code Extension — Inline code quality diagnostics, complexity CodeLens, and a project health dashboard for TypeScript and React. Free tier included.
• Vipr Desktop App — Deep static analysis, file-level metrics, and historical snapshots for React and TypeScript projects.

You don't need either to use this theme. But if you care about code quality, they're worth a look.

Visit vipr.dev to learn more.

Contributing

Theme files are generated from TypeScript token definitions — not hand-authored. See THEMING.md (in this package) for the full architecture, variant matrix, and how to add new variants.

git clone https://github.com/glorioustephan/vipr.git
cd vipr
pnpm install
pnpm --filter vipr-vscode-theme build

The palette in src/tokens.ts is the single source of truth. To preview changes, press F5 in the clients/vscode-theme/ folder to launch the Extension Development Host, then select any Vipr variant with Cmd+K Cmd+T.

To package and install locally:

pnpm --filter vipr-vscode-theme package
code --install-extension clients/vscode-theme/vipr-vscode-theme-*.vsix

Found a bug? Contact us.

License

MIT © Vipr