Skip to main content
Vibrancy Continued supports custom themes that define the appearance and transparency behavior of VS Code. You can create your own themes or modify existing ones.

​
Theme Structure

Each theme consists of two files:
  1. JSON Configuration File - Defines theme behavior and settings
  2. CSS Style File - Defines visual appearance and transparency effects
Both files must be placed in the themes/ directory with matching names.

​
Theme Configuration (JSON)

The JSON file configures platform-specific settings and VS Code integration.

​
Configuration Properties

​
type
object
Platform-specific vibrancy effect types
"type": {
  "win10": "acrylic",
  "macos": "under-window"
}
Windows types:
  • acrylic - Fluent Design acrylic blur effect
  • auto - Automatically choose based on system
macOS types:
  • under-window - Standard under-window blur
  • fullscreen-ui - Transparent fullscreen blur
  • titlebar, selection, menu, popover, sidebar, header, sheet, hud, tooltip - Specialized effects
​
background
string
Background color in hex format (without #)
"background": "1e1e1e"
This color is used as the base for transparency calculations.
​
opacity
object
Platform-specific opacity levels
"opacity": {
  "win10": 0.8,
  "macos": 0.3
}
Values range from 0.0 (fully transparent) to 1.0 (fully opaque).
​
colorTheme
string
Recommended VS Code color theme
"colorTheme": "Default Dark+"
The extension will suggest this theme when your Vibrancy theme is activated.
​
systemColorTheme
string
System appearance preference
"systemColorTheme": "dark"
Options:
  • "dark" - Dark system theme
  • "light" - Light system theme
  • "default" - Use system default

​
Example Configuration

{
  "type": {
    "win10": "acrylic",
    "macos": "under-window"
  },
  "background": "1e1e1e",
  "opacity": {
    "win10": 0.8,
    "macos": 0.3
  },
  "colorTheme": "Default Dark+",
  "systemColorTheme": "dark"
}

​
Theme Styles (CSS)

The CSS file defines the visual appearance by making UI elements transparent and applying custom styles.

​
Key CSS Patterns

​
Making Elements Transparent

/* Remove backgrounds from main UI elements */
.monaco-workbench,
.monaco-workbench .part,
.monaco-editor-background,
.monaco-editor .margin,
body {
  background: transparent !important;
}

​
Editor Transparency

/* Make editor areas transparent */
.editor-container {
  background: transparent !important;
}

.monaco-editor, 
.monaco-editor .inputarea.ime-input {
  background: transparent !important;
}

​
Tab and Title Bar

/* Transparent tabs with semi-transparent active tab */
.editor-group-container > .tabs {
  background-color: transparent !important;
}

.editor-group-container > .tabs .tab {
  background-color: transparent !important;
}

.editor-group-container > .tabs .tab.active {
  background-color: rgba(37, 37, 37, 0.3) !important;
}

/* Semi-transparent sidebar */
.monaco-workbench .part.sidebar {
  background-color: rgba(37, 37, 38, 0.3) !important;
}

​
Terminal Transparency

/* Transparent terminal background */
.terminal-outer-container,
.xterm-viewport,
.xterm-rows {
  background-color: transparent !important;
}

​
Selection and Highlighting

/* Transparent selection with visible highlight */
.monaco-editor .selected-text {
  background-color: rgba(58, 61, 65, 0.6) !important;
}

.monaco-editor .focused .selected-text {
  background-color: rgba(38, 79, 120, 0.6) !important;
}

​
Complete Theme Example

.scroll-decoration {
  box-shadow: none !important;
}

.minimap, .editor-scrollable > .decorationsOverviewRuler {
  opacity: 0.6;
}

.editor-container {
  background: transparent !important;
}

.monaco-editor-background,
.monaco-editor .margin,
.monaco-workbench .part > .content,
.monaco-workbench,
.monaco-workbench .part,
body {
  background: transparent !important;
}

.editor-group-container > .tabs {
  background-color: transparent !important;
}

.editor-group-container > .tabs .tab {
  background-color: transparent !important;
}

.editor-group-container > .tabs .tab.active {
  background-color: rgba(37, 37, 37, 0.3) !important;
}

.monaco-workbench .part.sidebar {
  background-color: rgba(37, 37, 38, 0.3) !important;
}

.terminal-outer-container,
.xterm-viewport,
.xterm-rows {
  background-color: transparent !important;
}

​
Creating a Custom Theme

Follow these steps to create your own theme:
1

Choose a Base

Start by copying an existing theme that’s similar to what you want:
cp "themes/Default Dark.json" "themes/My Theme.json"
cp "themes/Default Dark.css" "themes/My Theme.css"
2

Configure JSON Settings

Edit the JSON file to set your preferred settings:
{
  "type": {
    "win10": "acrylic",
    "macos": "fullscreen-ui"
  },
  "background": "2e3440",
  "opacity": {
    "win10": 0.7,
    "macos": 0.4
  },
  "colorTheme": "Nord",
  "systemColorTheme": "dark"
}
3

Customize CSS Styles

Modify the CSS file to adjust transparency and colors:
/* Customize active tab color */
.editor-group-container > .tabs .tab.active {
  background-color: rgba(46, 52, 64, 0.4) !important;
}

/* Customize sidebar opacity */
.monaco-workbench .part.sidebar {
  background-color: rgba(46, 52, 64, 0.35) !important;
}
4

Register the Theme

Add your theme to extension/index.js:
var themeStylePaths = {
  // ... existing themes
  'My Theme': '../themes/My Theme.css',
}

const themeConfigPaths = {
  // ... existing themes
  'My Theme': '../themes/My Theme.json',
}
5

Update Package Configuration

Add your theme to package.json:
"vscode_vibrancy.theme": {
  "type": "string",
  "default": "Default Dark",
  "enum": [
    "Default Dark",
    // ... other themes
    "My Theme"
  ]
}
6

Test Your Theme

  1. Reload the extension
  2. Open VS Code settings
  3. Select your theme from vscode_vibrancy.theme
  4. Run Reload Vibrancy command
  5. Restart VS Code

​
Using Custom Theme with Imports

Instead of registering a theme in the extension, you can use the “Custom theme (use imports)” option with external files:
1

Create Theme Files

Create your custom CSS file anywhere on your system:
/* ~/Documents/my-vibrancy-theme.css */
.monaco-workbench .part.sidebar {
  background-color: rgba(30, 30, 46, 0.4) !important;
}

.editor-group-container > .tabs .tab.active {
  background-color: rgba(30, 30, 46, 0.5) !important;
}
2

Configure Settings

Update your VS Code settings:
{
  "vscode_vibrancy.theme": "Custom theme (use imports)",
  "vscode_vibrancy.imports": [
    "/Users/username/Documents/my-vibrancy-theme.css"
  ]
}
On Windows, use forward slashes: "C:/Users/username/Documents/my-vibrancy-theme.css"
3

Reload Extension

Run Reload Vibrancy command and restart VS Code

​
Theme Development Tips

​
Finding CSS Selectors

Use VS Code’s Developer Tools to find CSS selectors:
1

Open Developer Tools

Press Ctrl+Shift+I (Windows/Linux) or Cmd+Alt+I (macOS)
2

Use Element Picker

Click the element picker icon and select UI elements
3

Inspect Styles

View the element’s classes and current styles in the Elements panel

​
Testing Across Platforms

Since opacity and effect types differ between platforms:
  • Windows: Test with both high and low opacity (0.5-0.9)
  • macOS: Lower opacity values work better (0.2-0.5)
  • Test with different type values to find the best effect

​
Color Transparency

When using rgba() colors: 
/* Syntax: rgba(red, green, blue, alpha) */
background-color: rgba(30, 30, 46, 0.4) !important;
/*                  ↑   ↑   ↑    ↑
                    R   G   B    Alpha (0-1) */

​
Fullscreen Mode

Add special handling for fullscreen: 
.monaco-workbench.fullscreen {
  background-color: #202020 !important;
}

​
Theme Reference Files

Use these as templates:
  • Custom Theme.json - Minimal configuration for import-based themes
  • Custom Theme.css - Empty template for custom styles
  • Default Dark.json - Standard dark theme configuration
  • Default Dark.css - Complete CSS example with all UI elements
All theme files can be found in the themes/ directory of the extension.

​
Contributing Themes

If you create a great theme, consider contributing it to the project! See the Contributing guide for details on submitting themes.
Share your custom themes in GitHub Discussions to help other users!

​
Troubleshooting Themes

​
Theme Not Applying

  • Ensure JSON and CSS filenames match exactly
  • Check for syntax errors in JSON (use a JSON validator)
  • Verify CSS selectors are correct
  • Run Reload Vibrancy after making changes

​
Elements Not Transparent

  • Add !important to CSS rules
  • Check if other extensions are overriding styles
  • Inspect elements to find correct selectors
  • Ensure background: transparent !important is used

​
Effect Too Strong/Weak

  • Adjust opacity values in JSON configuration
  • Modify rgba() alpha values in CSS
  • Try different type values for your platform
  • Consider different background colors

​
Advanced Techniques

​
Platform-Specific CSS

You can detect platforms in CSS using body classes (though this requires JavaScript injection via imports).

​
Dynamic Theme Switching

Enable auto-theme switching: 
{
  "vscode_vibrancy.enableAutoTheme": true,
  "vscode_vibrancy.preferedDarkTheme": "Default Dark",
  "vscode_vibrancy.preferedLightTheme": "Default Light"
}

​
Combining with Custom CSS Extensions

Vibrancy Continued works alongside other CSS customization extensions. Use the imports feature to layer multiple customizations.

​
Example Themes

Explore existing themes in the extension:
  • Default Dark / Default Light - Standard transparency
  • Tokyo Night Storm - Popular anime-inspired theme
  • Catppuccin Mocha - Pastel color scheme
  • Solarized Dark+ - Classic Solarized palette
  • Paradise Glass - High transparency effects
  • Noir et blanc - Minimalist black and white
Each theme demonstrates different approaches to transparency and styling.

Build docs developers (and LLMs) love

Get started for freeTalk to us