Skip to main content
Vibrancy Continued provides a comprehensive set of configuration options to customize the transparency and appearance of VS Code. All settings are prefixed with vscode_vibrancy.

​
Core Settings

​
vscode_vibrancy.type
string
default:"auto"
Native method of Vibrancy Effect. Controls which transparency type is applied to the window.Valid values:
  • auto - Automatically switch with system version
  • acrylic - (Windows 10/11 only) Fluent Design blur
  • under-window - (macOS only) Standard blur effect
  • fullscreen-ui - (macOS only) More transparent effect
  • titlebar - (macOS only)
  • selection - (macOS only)
  • menu - (macOS only)
  • popover - (macOS only)
  • sidebar - (macOS only)
  • content - (macOS only, deprecated)
  • header - (macOS only)
  • hud - (macOS only)
  • sheet - (macOS only, deprecated)
  • tooltip - (macOS only)
  • under-page - (macOS only, deprecated)
  • window - (macOS only, deprecated)
  • appearance-based - (macOS only, deprecated in Electron 26+)
  • dark - (macOS only, deprecated in Electron 26+)
  • ultra-dark - (macOS only, deprecated in Electron 26+)
  • light - (macOS only, deprecated in Electron 26+)
  • medium-light - (macOS only, deprecated in Electron 26+)
See the Vibrancy Types page for visual examples of each type.
Types marked as “deprecated” have been removed in macOS 10.14+ and Electron 26+ and will result in no transparency effect.
​
vscode_vibrancy.opacity
number
default:"-1"
Opacity of the Vibrancy Effect. Controls how transparent the window appears.Range: -1.0 to 1.0
  • -1 - Use theme default opacity
  • 0 - Maximum transparency (fully transparent)
  • 1 - No transparency (fully opaque)
{
  "vscode_vibrancy.opacity": 0.4
}
Values between 0 and 0.5 are recommended for the best balance between aesthetics and readability.
​
vscode_vibrancy.theme
string
default:"Default Dark"
Select which Vibrancy theme to apply. Each theme includes custom CSS styling for different UI elements.Available themes:
  • Default Dark
  • Dark (Only Subbar)
  • Default Light
  • Light (Only Subbar)
  • Tokyo Night Storm
  • Tokyo Night Storm (Outer)
  • Noir et blanc
  • Dark (Exclude Tab Line)
  • Solarized Dark+
  • Catppuccin Mocha
  • GitHub Dark Default
  • Paradise Smoked Glass
  • Paradise Frosted Glass
  • Custom theme (use imports)
{
  "vscode_vibrancy.theme": "Tokyo Night Storm"
}
See the Themes page for screenshots and details about each theme.

​
Automatic Theme Switching

​
vscode_vibrancy.enableAutoTheme
boolean
default:"false"
Enable automatic dark/light mode switching based on OS appearance.When enabled, Vibrancy will automatically switch between your preferred dark and light themes based on your operating system’s appearance settings.
{
  "vscode_vibrancy.enableAutoTheme": true,
  "window.autoDetectColorScheme": true
}
This setting requires window.autoDetectColorScheme to also be enabled in VS Code settings.
​
vscode_vibrancy.preferedDarkTheme
string
default:"Default Dark"
The Vibrancy theme to use when the OS is in dark mode (requires enableAutoTheme to be enabled).Accepts any of the theme values from vscode_vibrancy.theme.
{
  "vscode_vibrancy.preferedDarkTheme": "Tokyo Night Storm",
  "vscode_vibrancy.preferedLightTheme": "Default Light",
  "vscode_vibrancy.enableAutoTheme": true
}
​
vscode_vibrancy.preferedLightTheme
string
default:"Default Light"
The Vibrancy theme to use when the OS is in light mode (requires enableAutoTheme to be enabled).Accepts any of the theme values from vscode_vibrancy.theme.

​
Custom Styling

​
vscode_vibrancy.imports
array
default:"[\"/path/to/file\"]"
Import custom CSS or JavaScript files into VS Code. Files are imported in the order they are listed.
{
  "vscode_vibrancy.imports": [
    "C:/Users/MyUserName/Documents/custom.css",
    "C:/Users/MyUserName/Documents/tweaks.js"
  ]
}
  • On Windows, use forward slashes (/) in paths
  • Files ending in .css are imported as stylesheets
  • Files ending in .js are imported as scripts
  • Set theme to Custom theme (use imports) to use only your custom files
See the Custom CSS page for detailed examples.

​
Performance Settings

​
vscode_vibrancy.preventFlash
boolean
default:"true"
Use an alternative method to prevent window flashing when resizing.When enabled, eliminates the need for a refresh interval but may be less compatible in some cases.
{
  "vscode_vibrancy.preventFlash": true
}
This is the recommended setting for most users. Only disable if you experience compatibility issues.
​
vscode_vibrancy.refreshInterval
number
default:"10"
Refresh interval (in milliseconds) for making the background transparent after window resizing.Range: 1 to 1000Lower values make updates less visible but increase CPU utilization.
{
  "vscode_vibrancy.refreshInterval": 10
}
This setting is ignored when preventFlash is enabled (default).

​
Window Settings

​
vscode_vibrancy.forceFramelessWindow
boolean
default:"false"
Always set VS Code window to use frame: false, which can sometimes solve visual rendering issues on Windows and macOS.
{
  "vscode_vibrancy.forceFramelessWindow": true
}
This setting is useful if you experience visual glitches or rendering artifacts.
​
vscode_vibrancy.disableFramelessWindow
boolean
default:"false"
Disable frameless window mode, which is a mitigation for a GPU-related rendering bug on Windows with VS Code 1.86 and newer.
{
  "vscode_vibrancy.disableFramelessWindow": true
}
Windows 10/11 users: If you enable this setting, you must run VS Code with the --disable-gpu-compositing flag, or you may experience:
  • Distorted and blurry graphics
  • Inability to resize/move/maximize the window
  • Text rendering issues
To safely use this setting on Windows:
  1. Update your VS Code shortcut to include --disable-gpu-compositing
  2. Example: "C:\Users\User\AppData\Local\Programs\Microsoft VS Code\Code.exe" --disable-gpu-compositing
  3. Enable this setting
  4. Reload Vibrancy (F1 → “Reload Vibrancy”)
​
vscode_vibrancy.disableThemeFixes
boolean
default:"false"
Disable automatic theme fixes for non-standard VS Code editors like Cursor.Vibrancy automatically applies fixes to themes when running on editors like Cursor to ensure proper appearance. Enable this setting to disable these automatic fixes.
{
  "vscode_vibrancy.disableThemeFixes": false
}

​
Example Configurations

{
  "vscode_vibrancy.type": "auto",
  "vscode_vibrancy.opacity": 0.4,
  "vscode_vibrancy.theme": "Default Dark"
}

{
  "vscode_vibrancy.enableAutoTheme": true,
  "vscode_vibrancy.preferedDarkTheme": "Tokyo Night Storm",
  "vscode_vibrancy.preferedLightTheme": "Default Light",
  "window.autoDetectColorScheme": true
}

{
  "vscode_vibrancy.type": "fullscreen-ui",
  "vscode_vibrancy.opacity": 0,
  "vscode_vibrancy.theme": "Default Dark"
}

{
  "vscode_vibrancy.type": "acrylic",
  "vscode_vibrancy.opacity": 0.3,
  "vscode_vibrancy.disableFramelessWindow": true,
  "vscode_vibrancy.theme": "Default Dark"
}
Remember to add --disable-gpu-compositing to your VS Code shortcut when using disableFramelessWindow.
{
  "vscode_vibrancy.theme": "Custom theme (use imports)",
  "vscode_vibrancy.imports": [
    "/Users/username/.vscode/custom-theme.css",
    "/Users/username/.vscode/custom-tweaks.js"
  ],
  "vscode_vibrancy.opacity": 0.5
}

​
Applying Settings

After changing any settings:
  1. Open the Command Palette (F1 or Cmd/Ctrl+Shift+P)
  2. Run “Reload Vibrancy”
  3. Restart VS Code when prompted
Some settings like opacity and theme require a full reload to take effect.

Build docs developers (and LLMs) love

Get started for freeTalk to us