Skip to main content
Vibrancy Continued includes 14 built-in themes, each designed to work with specific VS Code color themes and provide different levels of transparency and styling.

​
Available Themes

​
Default Dark

The default dark theme with transparency applied to all major UI elements.
  • Best used with: Dark+ (default dark) color theme
  • Opacity default: 0.4
  • Style: Full UI transparency including sidebar, activity bar, editor, and panels
{
  "vscode_vibrancy.theme": "Default Dark",
  "workbench.colorTheme": "Dark+"
}
Default Dark Theme

​
Dark (Only Subbar)

A minimal dark theme that applies transparency only to the sidebar and activity bar.
  • Best used with: Dark+ (default dark) color theme
  • Opacity default: 0.4
  • Style: Selective transparency (sidebar and activity bar only)
{
  "vscode_vibrancy.theme": "Dark (Only Subbar)",
  "workbench.colorTheme": "Dark+"
}
Dark Only Subbar Theme

​
Dark (Exclude Tab Line)

Dark theme with full transparency except for the tab bar.
  • Best used with: Dark+ (default dark) color theme
  • Opacity default: 0.4
  • Style: Full transparency with opaque tab bar
{
  "vscode_vibrancy.theme": "Dark (Exclude Tab Line)"
}

​
Default Light

Light theme with transparency optimized for bright environments.
  • Best used with: Light+ (default light) color theme
  • Opacity default: 0.4
  • Style: Full UI transparency with light colors
{
  "vscode_vibrancy.theme": "Default Light",
  "workbench.colorTheme": "Light+"
}

​
Light (Only Subbar)

Minimal light theme with transparency only in sidebar and activity bar.
  • Best used with: Light+ (default light) color theme
  • Opacity default: 0.4
  • Style: Selective transparency in light mode
{
  "vscode_vibrancy.theme": "Light (Only Subbar)",
  "workbench.colorTheme": "Light+"
}

​
Tokyo Night Storm

A popular dark theme inspired by Tokyo Night color scheme.
  • Best used with: Tokyo Night Storm color theme
  • Opacity default: 0.4
  • Style: Full UI transparency with Tokyo Night colors
{
  "vscode_vibrancy.theme": "Tokyo Night Storm",
  "workbench.colorTheme": "Tokyo Night Storm"
}
Tokyo Night Storm Theme
Install the Tokyo Night extension for the best experience.

​
Tokyo Night Storm (Outer)

Alternative Tokyo Night theme with outer-focused transparency.
  • Best used with: Tokyo Night Storm color theme
  • Opacity default: 0.4
  • Style: Transparency focused on outer UI elements
{
  "vscode_vibrancy.theme": "Tokyo Night Storm (Outer)",
  "workbench.colorTheme": "Tokyo Night Storm"
}
Tokyo Night Storm Outer Theme

​
Noir et blanc

A high-contrast black and white theme with elegant transparency.
  • Best used with: Dark+ or high contrast themes
  • Opacity default: 0.4
  • Style: Monochrome with full transparency
{
  "vscode_vibrancy.theme": "Noir et blanc"
}
Noir et blanc Theme

​
Solarized Dark+

Vibrancy theme for the popular Solarized Dark color scheme.
  • Best used with: Solarized Dark color theme
  • Opacity default: 0.4
  • Style: Solarized colors with full transparency
{
  "vscode_vibrancy.theme": "Solarized Dark+",
  "workbench.colorTheme": "Solarized Dark"
}
Solarized Dark+ Theme
Install the Solarized extension for the recommended color theme.

​
Catppuccin Mocha

A soothing pastel theme based on Catppuccin Mocha.
  • Best used with: Catppuccin Mocha color theme
  • Opacity default: 0.4
  • Style: Pastel colors with full transparency
{
  "vscode_vibrancy.theme": "Catppuccin Mocha",
  "workbench.colorTheme": "Catppuccin Mocha"
}
Catppuccin Mocha Theme
Install the Catppuccin extension for the best experience.

​
GitHub Dark Default

GitHub’s dark theme with transparency.
  • Best used with: GitHub Dark Default color theme
  • Opacity default: 0.4
  • Style: GitHub colors with full transparency
{
  "vscode_vibrancy.theme": "GitHub Dark Default",
  "workbench.colorTheme": "GitHub Dark Default"
}
GitHub Dark Default Theme
Install the GitHub Theme extension for the recommended color theme.

​
Paradise Smoked Glass

A premium theme with smoked glass effect.
  • Best used with: Paradise color theme
  • Opacity default: Variable
  • Style: Smoked glass aesthetic with gradient effects
{
  "vscode_vibrancy.theme": "Paradise Smoked Glass",
  "workbench.colorTheme": "Paradise"
}
Paradise Smoked Glass Theme
Install the Paradise extension for the complete experience.

​
Paradise Frosted Glass

A premium theme with frosted glass effect.
  • Best used with: Paradise color theme
  • Opacity default: Variable
  • Style: Frosted glass aesthetic with softer transparency
{
  "vscode_vibrancy.theme": "Paradise Frosted Glass",
  "workbench.colorTheme": "Paradise"
}
Paradise Frosted Glass Theme

​
Custom theme (use imports)

Use this option to create your own theme using custom CSS files.
  • Best used with: Any color theme
  • Style: Defined by your custom CSS/JS files
{
  "vscode_vibrancy.theme": "Custom theme (use imports)",
  "vscode_vibrancy.imports": [
    "/path/to/your/custom-theme.css"
  ]
}
See the Custom CSS page for details on creating custom themes.

​
Switching Themes

​
Manual Theme Selection

  1. Open VS Code Settings (Cmd/Ctrl + ,)
  2. Search for vscode_vibrancy.theme
  3. Select your desired theme from the dropdown
  4. Press F1 and run “Reload Vibrancy”
  5. Restart VS Code when prompted

​
Using settings.json

Add to your settings.json: 
{
  "vscode_vibrancy.theme": "Tokyo Night Storm",
  "workbench.colorTheme": "Tokyo Night Storm"
}

​
Automatic Theme Switching

Vibrancy supports automatic switching between dark and light themes based on your OS appearance.

​
Setup

  1. Enable automatic theme switching:
{
  "vscode_vibrancy.enableAutoTheme": true,
  "window.autoDetectColorScheme": true
}
  1. Configure your preferred themes:
{
  "vscode_vibrancy.preferedDarkTheme": "Default Dark",
  "vscode_vibrancy.preferedLightTheme": "Default Light"
}
  1. Reload Vibrancy (F1 → “Reload Vibrancy”)

​
How It Works

Vibrancy automatically detects your macOS appearance settings:
  • Light Mode: Uses preferedLightTheme
  • Dark Mode: Uses preferedDarkTheme
  • Auto Mode: Switches based on time of day
Both vscode_vibrancy.enableAutoTheme and window.autoDetectColorScheme must be enabled for automatic theme switching to work.

​
Theme Compatibility

Each Vibrancy theme is designed to work best with specific VS Code color themes. For optimal appearance:
  1. Install the recommended color theme extension (if needed)
  2. Set the color theme in VS Code settings
  3. Select the matching Vibrancy theme
  4. Reload Vibrancy
Using a Vibrancy theme with a non-matching color theme may result in poor contrast or readability issues. Vibrancy will show a notification if it detects a mismatch.

​
Creating Custom Themes

You can create your own Vibrancy theme by:
  1. Copying an existing theme from the themes directory
  2. Modifying the CSS to your preferences
  3. Using the imports setting to load your custom theme
See the Custom CSS page for detailed instructions.

​
Theme Files Structure

Each theme consists of two files:
  • ThemeName.css - The stylesheet with UI customizations
  • ThemeName.json - Configuration file specifying:
    • colorTheme: Recommended VS Code color theme
    • systemColorTheme: macOS system appearance (“dark” or “light”)
    • opacity: Default opacity value
Example theme configuration: 
{
  "colorTheme": "Dark+",
  "systemColorTheme": "dark",
  "opacity": 0.4
}

Build docs developers (and LLMs) love

Get started for freeTalk to us