Skip to main content
Vibrancy types control the native transparency method used by the operating system. Different types produce different visual effects, and availability varies by platform.

​
Platform Support

macOS supports all vibrancy types except acrylic. The appearance varies by macOS version and will adapt to the current OS appearance (light/dark mode).Supported macOS versions: 10.14 (Mojave) and later

​
Selecting a Type

Set the vibrancy type in your settings: 
{
  "vscode_vibrancy.type": "under-window"
}
After changing the type:
  1. Press F1 and run “Reload Vibrancy”
  2. Restart VS Code when prompted

​
Available Types

Value: auto
Platform: macOS, Windows
Description: Automatically selects the best vibrancy type based on your system version and platform. 
{
  "vscode_vibrancy.type": "auto"
}
Behavior:
  • macOS: Uses under-window on modern systems
  • Windows: Uses acrylic
Auto Type
This is the recommended setting for most users as it ensures compatibility across OS updates.

​
Acrylic (Windows)

Value: acrylic
Platform: Windows 10/11 only
Description: Microsoft’s Fluent Design blur effect with depth and texture. 
{
  "vscode_vibrancy.type": "acrylic"
}
Acrylic provides a translucent texture that incorporates the desktop wallpaper and other windows behind the app window. Acrylic Type
On Windows 11, Acrylic appearance may vary based on system performance settings and GPU capabilities.

​
macOS Types

All types below are macOS only and will not work on Windows.

​
Under-Window

Value: under-window
Description: Standard blur effect showing content under the window. 
{
  "vscode_vibrancy.type": "under-window"
}
This is the recommended type for macOS users, providing a good balance between transparency and performance. Under-Window Type

​
Fullscreen-UI

Value: fullscreen-ui
Description: More transparent effect suitable for fullscreen applications. 
{
  "vscode_vibrancy.type": "fullscreen-ui"
}
Provides higher transparency than under-window, ideal for users who want maximum see-through effect. Fullscreen-UI Type

​
Titlebar

Value: titlebar
Description: Blur effect typically used for title bars. 
{
  "vscode_vibrancy.type": "titlebar"
}
Titlebar Type

​
Selection

Value: selection
Description: Blur effect used for selection highlights. 
{
  "vscode_vibrancy.type": "selection"
}
Selection Type Value: menu
Description: Blur effect used for menu backgrounds. 
{
  "vscode_vibrancy.type": "menu"
}
Menu Type

​
Popover

Value: popover
Description: Blur effect for popover windows. 
{
  "vscode_vibrancy.type": "popover"
}
Popover Type Value: sidebar
Description: Blur effect optimized for sidebar elements. 
{
  "vscode_vibrancy.type": "sidebar"
}
Sidebar Type Value: header
Description: Blur effect for header areas. 
{
  "vscode_vibrancy.type": "header"
}
Header Type

​
HUD

Value: hud
Description: Heads-up display style blur effect. 
{
  "vscode_vibrancy.type": "hud"
}
HUD Type

​
Tooltip

Value: tooltip
Description: Blur effect for tooltip-style windows. 
{
  "vscode_vibrancy.type": "tooltip"
}
Tooltip Type

​
Deprecated Types

The following vibrancy types have been deprecated in Electron 26+ (VS Code 1.86+) and macOS 10.14+. They will result in no transparency effect.
If you’re using any of these types, Vibrancy will display a warning and prompt you to switch to a supported type.

​
Content

Value: content
Status: Deprecated
Alternative: Use under-window 
// ❌ Deprecated
{
  "vscode_vibrancy.type": "content"
}

// ✅ Use instead
{
  "vscode_vibrancy.type": "under-window"
}

​
Sheet

Value: sheet
Status: Deprecated
Alternative: Use under-window

​
Under-Page

Value: under-page
Status: Deprecated
Alternative: Use under-window

​
Window

Value: window
Status: Deprecated
Alternative: Use under-window

​
Appearance-Based

Value: appearance-based
Status: Deprecated in Electron 26+
Alternative: Use auto or under-window This type was removed in VS Code 1.86 which upgraded to Electron 27.

​
Dark, Ultra-Dark, Light, Medium-Light

Values: dark, ultra-dark, light, medium-light
Status: Deprecated in Electron 26+
Alternative: Use auto, under-window, or fullscreen-ui These legacy appearance types have been removed from modern Electron versions. 
// ❌ Deprecated
{
  "vscode_vibrancy.type": "dark"
}

// ✅ Use instead
{
  "vscode_vibrancy.type": "auto"
}

​
Automatic Migration

If Vibrancy detects you’re using a deprecated type, it will:
  1. Show a warning notification
  2. Offer to update your setting automatically
  3. Suggest either:
    • Default mode (under-window) - Standard blur
    • Transparent mode (fullscreen-ui) - Higher transparency
The migration prompt only appears once when Vibrancy detects an incompatible type.

​
Screenshots Reference

All screenshots in this guide were taken on:
  • macOS: macOS Sequoia 15.5
  • Windows: Windows 11 24H2
  • Opacity: 0 (maximum transparency)
Actual appearance may vary based on:
  • Your OS version
  • System appearance settings (light/dark mode)
  • Desktop wallpaper
  • Opacity setting in Vibrancy

​
Performance Considerations

Different vibrancy types have different performance characteristics:

​
Best Performance

  • auto
  • under-window
  • acrylic (Windows)

​
Higher GPU Usage

  • fullscreen-ui (more transparent = more GPU work)
  • hud
  • Multiple layered effects
If you experience performance issues or visual glitches, try switching to auto or under-window mode.

​
Troubleshooting Types

Only acrylic and auto work on Windows. All other types are macOS-specific.Solution: Use "vscode_vibrancy.type": "auto" or "acrylic"
Possible causes:
  1. Using a deprecated type
  2. Transparency effects disabled in OS
  3. Vibrancy not enabled
Solutions:
  • Switch to a modern type (auto, under-window, or acrylic)
  • Check OS accessibility settings for “Reduce transparency”
  • Run “Reload Vibrancy” command (F1)
Some types may not work well with certain GPU configurations.Solutions:
  • Try forceFramelessWindow or disableFramelessWindow settings
  • Switch to auto type
  • On Windows: Add --disable-gpu-compositing flag to VS Code shortcut
VS Code updates may upgrade Electron, which can deprecate old vibrancy types.Solution: Accept the migration prompt or manually update to a supported type.

​
Further Reading

Build docs developers (and LLMs) love

Get started for freeTalk to us