Visual Studio Code Extension - Vibrancy Continued

Enable Acrylic/Glass effect in VS Code.

[!TIP] Solutions for common issues can be found in the FAQ and Known Errors

See also: Windows 10/11 notes and Linux notes

       

 

Links: GitHub | Visual Studio Code Marketplace | Open VSX Registry | issues

Maintenance of this project is made possible by all the contributors and sponsors. If you'd like to sponsor this project and have your avatar or company logo appear below, click here. Any support is greatly appreciated 💖

Supported Operating Systems

✔ macOS (Intel & Apple Silicon)

✔ Windows 10/11 (x64 & ARM64)

✔ Linux (transparency only, blur requires a compositor such as KWin, Hyprland, or Picom)

✔ NixOS (via an automatic writable copy — see NixOS notes)

Supported code editors

✔ Visual Studio Code (v1.95 and newer)

✔ VSCodium

✔ Code - OSS

✔ Cursor

✔ Antigravity

✔ Devin

✔ Kiro

Other editors built on VSCode may work too. Vibrancy changes their window only when it can tell exactly where the change goes, and warns that the result is untested. If it can't tell, it refuses with "Your code editor is not supported". If an editor won't start afterwards, see Restoring an editor that won't start.

Vibrancy keeps the editor's integrity check quiet in these editors too, including those that don't let you dismiss its warning.

Getting Started

1. Install the extension from Visual Studio Code Marketplace.

2. Press F1 and activate command "Reload Vibrancy."

3. Restart VSCode when prompted.

Each time VS Code is updated, please re-enable Vibrancy using the same steps. If you're experiencing issues, please check the FAQs.

🪟 Windows 10/11 notes

Vibrancy works out of the box on Windows — no extra setup is required. By default the window is borderless and opaque, so Windows Aero Snap, maximize, and resize all keep working.

Borderless look vs. window snapping (Windows 10)

On Windows there's one unavoidable trade-off, because a transparent window on Windows is a "layered" window that the OS excludes from Aero Snap and maximize:

• Default (windowMode: auto / frameless) — opaque window. Snap, maximize, and resize work, but Windows 10 draws a thin 1px border around the window (Windows 11 doesn't show it at all). This is a cosmetic limitation of opaque resizable windows on Win10 that can't be removed without breaking snapping. (On older VSCode builds, where opaque vibrancy rendered incorrectly, auto instead uses a transparent window — no border, but no snapping; this matches frameless-transparent below.)
• Pixel-perfect (windowMode: frameless-transparent) — fully transparent window. No border at all, the cleanest possible look — but Aero Snap / maximize stop working.

[!TIP] Want the borderless look and snapping? Set "vscode_vibrancy.windowMode": "frameless-transparent" for the pixel-perfect window, and use a third-party window-snapping utility (e.g. FancyZones from PowerToys) to get snapping back. If you'd rather keep native snapping and don't mind the 1px Win10 border, just leave windowMode on auto.

Windows 11 materials: Acrylic vs Mica

On Windows 11 you can choose the backdrop material via vscode_vibrancy.type:

• acrylic (default) — a real-time translucent blur of whatever is behind the window, including your other windows and the desktop. This is the classic see-through "glass" vibrancy effect.
• acrylic-classic — the same see-through blur, without the frosted tint Windows 11 adds to its acrylic material. This is how acrylic looked on Windows 11 before 1.1.80, and in the theme screenshots below: a clear blur coloured only by the theme and opacity. It uses the older blur that Windows 10 uses, and keeps blurring while you drag or resize the window.
• mica — samples only your desktop wallpaper (not the windows behind VSCode) and is mostly static, so it costs almost nothing on GPU/battery. It's Microsoft's recommended material for app backgrounds and gives a subtle, native Windows 11 feel rather than a see-through effect.
• tabbed — "Mica Alt", a more strongly tinted variant of Mica.

[!TIP] On a laptop, or if you want the native Windows 11 look without the continuous-blur power cost of Acrylic, set "vscode_vibrancy.type": "mica" (or "tabbed"). Just note that Mica reflects your wallpaper only — it won't show the windows behind VSCode the way Acrylic does. Mica and Mica Alt are Windows 11 only; on Windows 10 they automatically fall back to Acrylic.

Legacy / troubleshooting: window can't be resized, or text looks distorted

Some VSCode/Electron versions (and certain GPUs) had a hardware-acceleration bug where enabling Vibrancy made windows non-resizable/snappable/maximizable, or produced distorted, blurry text. If you don't experience this, you can ignore this section. If you do, apply the following mitigation:

1. Update your VSCode shortcut to include --disable-gpu-compositing at the end of the "Target" field, for example: "C:\Users\User\AppData\Local\Programs\Microsoft VS Code\Code.exe" --disable-gpu-compositing
2. (optional) Update your shell configuration to add the same argument to code, needed if VSCode isn't running when you use code
3. Install Vibrancy Continued
4. Go to settings and set Window Mode (vscode_vibrancy.windowMode) to framed
5. Press F1 and select Reload Vibrancy

For more information, see issues #140 and #122.

Options

Type (vscode_vibrancy.type)

Native method of Vibrancy effect. See here for screenshots of all available options: Vibrancy Types

• auto : Automatically switch with system version.
• transparent: Make VSCode transparent only, without blur. (Linux default)
• acrylic : Acrylic Fluent Design blur. (Windows)
• acrylic-classic : Clear acrylic blur without the Windows 11 frosted tint, as before 1.1.80. (Windows)
• mica : Mica background material — tints with the desktop wallpaper. (Windows 11 only)
• tabbed : Mica Alt (Tabbed) background material — a stronger Mica variant. (Windows 11 only)
• under-window, fullscreen-ui, appearance-based, light, dark, titlebar, selection, menu, popover, sidebar, medium-light, ultra-dark: (MacOS only)

On Windows 10, mica and tabbed aren't available and fall back to acrylic. The Mica/Tabbed materials use the modern DWM backdrop API, which only exists on Windows 11.

Opacity (vscode_vibrancy.opacity)

Opacity of Vibrancy effect. -1 is theme default, 0 is maximum transparency, and 1 will remove all transparency.

value: -1.0 ~ 1.0

Background Override (vscode_vibrancy.backgroundOverride)

Override the theme's background color for the vibrancy opacity effect. Uses VSCode's built-in color picker. Leave empty to use the theme default.

color string (e.g. #000000), default is empty

Custom imports (vscode_vibrancy.imports)

Import any custom CSS/JS files into the VSCode editor directly without requiring custom CSS extensions. The files will be imported in the order they are listed. On Windows, forward slashes must be used.

Use this feature to add a custom Vibrancy Continued theme or modify an existing one.

EXAMPLES:

• Windows: [ C:/Users/MyUserName/Documents/custom.css ]
• macOS: [ /Users/MyUserName/Documents/custom.css ]
• Linux: [ /home/MyUserName/Documents/custom.css ]

value: array[]

Prevent Flash (vscode_vibrancy.preventFlash)

Use a new method for preventing window flashing during resizing. Eliminates the need for a refresh interval, but may be less compatible in some cases.

boolean, default is true

Window Mode (vscode_vibrancy.windowMode)

Controls how the VSCode window frame and transparency are applied. Leave this on auto unless you're troubleshooting a rendering issue — auto already picks the right combination for your platform.

enum, default is auto

Value	Frame	Window	Notes
auto	platform default	platform default	Recommended. macOS & Linux → borderless + transparent (on macOS this fixes the file-browser hover flash, #207); Windows → borderless + opaque on current VSCode (Aero Snap works; thin border on Win10), borderless + transparent on older VSCode (no snap).
framed	OS title bar/frame	opaque	Most compatible. Use if a borderless window misbehaves for you.
frameless	borderless	opaque	Keeps Windows Aero Snap / maximize / resize, at the cost of a thin window border on Windows 10 (Windows 11 has none). On macOS an opaque window can leave "ghost" artifacts in the file tree on some layouts, so prefer auto / frameless-transparent there.
frameless-transparent	borderless	transparent	The macOS & Linux default. Fully borderless, and on macOS fixes the file-browser hover flash (#207). On Windows, Aero Snap / maximize won't work (see the Windows note below). Also required for the transparent vibrancy type.

The window's transparency is not the same as the vibrancy effect: vibrancy shows fine on an opaque window too (macOS via the native effect view, Windows via the DWM material / accent on the window). On Windows we use an opaque window so Aero Snap keeps working (a transparent window there is a layered window, which the OS excludes from snapping). On macOS we use a transparent window because an opaque one leaves stale "ghost" pixels in the file tree on some layouts — and its power cost is negligible (the GPU difference is a matter of utilization %, not actual battery draw).

macOS: window.nativeFullScreen and the native title bar

VSCode uses its native title bar on macOS when window.titleBarStyle is native, and also when window.nativeFullScreen is false or window.nativeTabs is true, whatever titleBarStyle says. Vibrancy keeps an opaque window with the standard frame under the native title bar, because macOS drops the traffic-light buttons from a borderless window.

The exception is nativeFullScreen: false, which doesn't mean you asked for the native title bar. There Vibrancy keeps the borderless, transparent window and shows the traffic lights itself. VSCode still draws its own title bar in that case, so the window drags as usual. It doesn't apply if you also set window.titleBarStyle to native, window.nativeTabs to true (native tabs live in the native title bar), or window.customTitleBarVisibility to never (no title bar for the buttons to sit in). These settings take effect when VSCode restarts, which it offers to do itself. After that restart, Vibrancy offers to reload if the window needs updating; accept it and restart once more.

When VSCode hides its title bar, which it does when the title bar would be empty, the traffic lights would sit on top of the tabs. Like iTerm2, Vibrancy then hides them and shows them only while the mouse is in the top-left corner of the focused window.

Deprecated settings: vscode_vibrancy.forceFramelessWindow and vscode_vibrancy.disableFramelessWindow are replaced by windowMode. If still set (and windowMode is left at auto) they are migrated automatically: disableFramelessWindow → framed, and forceFramelessWindow → the frameless mode appropriate for your platform — frameless-transparent on macOS and Linux, frameless (opaque) on Windows and with Windows 11 Mica/Acrylic materials. You don't need to do anything, but you can switch to windowMode directly to silence the deprecation warning.

Fix checksums (vscode_vibrancy.fixChecksums)

Update the editor's stored checksum of the workbench HTML when Vibrancy patches it, so the editor doesn't warn that the installation is corrupt or show [Unsupported] in its title bar. Only Vibrancy's own change is covered. Turn it off to keep the warning.

boolean, default is true

Disable Theme Fixes (vscode_vibrancy.disableThemeFixes)

Disable fixes to Default Dark and Default Light themes for non-VSCode editors like Cursor.

Disable Color Customizations (vscode_vibrancy.disableColorCustomizations)

Prevent Vibrancy from modifying workbench.colorCustomizations which is used to make some elements like the terminal vibrant. Enable this if you want to manage color customizations yourself, or if you use a custom CSS theme that handles its own background colors and transparency. When enabled mid-session, any previously written vibrancy colors will be restored to their original values.

boolean, default is false

Disable smooth dragging (vscode_vibrancy.disableSmoothDragging)

Windows 10 with acrylic only. Vibrancy normally moves and resizes the window itself while you drag it, so the blur keeps up with the cursor (see the lag FAQ). Turn this on to leave dragging to Windows if it misbehaves, for example with a window manager. The window then trails the cursor while dragged. The fix for the unblurred maximize animation still applies.

boolean, default is false

Refresh interval (vscode_vibrancy.refreshInterval)

Refresh interval (in milliseconds) for making the background transparent after window resizing. Lower values make the update less visible at the cost of increased CPU utilization. Ignored when using "Prevent Flash" method.

value: 1 ~ 1000, default is 10

Automatic theme switching (vscode_vibrancy.enableAutoTheme)

Enable automatic dark/light mode switching based on OS mode. Requires window.autoDetectColorScheme VSCode setting to also be enabled.

boolean, default is false

Preferred dark/light theme (vscode_vibrancy.preferredDarkTheme / vscode_vibrancy.preferredLightTheme)

Select which themes to use for light and dark modes, they will be used instead of the main Vibrancy Continued theme selected.

The previous misspelled keys vscode_vibrancy.preferedDarkTheme / vscode_vibrancy.preferedLightTheme are deprecated but still honored — if you have them set, your value is used automatically. Move it to the corrected key to silence the deprecation warning.

theme (vscode_vibrancy.theme)

Select Vibrancy theme:

• Default Dark
• Dark (Only Subbar)
• Default Light
• Light (Only Subbar)
• Noir et blanc
• Tokyo Night Storm
• Tokyo Night Storm (Outer)
• Catppuccin Mocha
• Solarized Dark+
• GitHub Dark Default

Theme	Screenshot
Default Dark
Dark (Only Subbar)
Noir et blanc
Tokyo Night Storm
Tokyo Night Storm (Only Subbar)
Solarized Dark+ (with theme: Solarized)
Catppuccin Mocha
GitHub Dark Default
Paradise Smoked Glass
Paradise Frosted Glass

You can contribute more themes! see here.

❄️ NixOS notes

On NixOS the VSCode package lives in the read-only /nix/store, so its files can't be patched in place — not even with root. Instead, when you enable Vibrancy on a Nix-installed VSCode (nixpkgs vscode, vscodium, etc.), the extension automatically:

1. Copies the whole VSCode package into ~/.local/share/vscode-vibrancy/ (~650 MB, one-time per VSCode version). The nixpkgs build is already linked against absolute store paths, so the copy runs from your home directory without any extra setup — your original installation is never modified.
2. Applies the vibrancy patches to that copy.
3. Adds a "Visual Studio Code (Vibrancy)" entry to your application menu that launches the patched copy.

Use the (Vibrancy) menu entry as your daily driver. Vibrancy updates the copy's checksums too, so it shouldn't show the "installation appears to be corrupt" warning.

Terminal / code CLI: typing code in a shell still launches the unpatched store installation. The copy is always reachable at the stable path ~/.local/share/vscode-vibrancy/current/bin/code (.../bin/codium for VSCodium) — the current symlink is updated automatically whenever the copy is rebuilt, so it survives system updates. To make it your default code, add an alias to your shell config (or the equivalent programs.bash/programs.zsh option in your Nix config):

alias code="$HOME/.local/share/vscode-vibrancy/current/bin/code"

After a nixos-rebuild that updates VSCode, the copy becomes outdated. The extension detects this on the next launch and offers to rebuild the copy from the new version with one click. Note that if you also run nix-collect-garbage before rebuilding the copy, the old copy's store dependencies may be removed and the (Vibrancy) entry may fail to start — in that case launch your regular VSCode once and re-enable Vibrancy from there.

To remove everything, run "Disable Vibrancy" (or uninstall the extension): the copy and the menu entry are deleted, leaving only your untouched store installation. Blur itself still depends on your compositor (KWin, Hyprland, Picom, …), same as on any other Linux distro.

Other immutable installs (Flatpak, distros with a read-only /usr) are detected too, but currently unsupported — the extension will tell you instead of failing mid-patch.

FAQs

How to uninstall Vibrancy?

Press F1 or ⌘+Shift+P and activate command "Disable Vibrancy", then restart Visual Studio Code.

You can also just uninstall the extension and restart VSCode, which will automatically remove Vibrancy.

Restoring an editor that won't start

Disable runs inside the editor, so it can't help if the editor won't start after enabling Vibrancy, or starts with an invisible window. Vibrancy checks that its changes will load before applying them, and since 1.3.1 it also keeps the original of every file it changes, including product.json. These scripts put those originals back, so you don't have to reinstall the editor. Close the editor first.

Other extensions that modify the editor's files can break it the same way. So after enabling, reloading or disabling, and again when you click Restart, Vibrancy checks every file the editor loads before it can run an extension. If one of them wouldn't load, it tells you not to restart yet, and whether these scripts can fix it. A file Vibrancy didn't change has no saved original: undo the change of the extension that made it, or reinstall the editor. Vibrancy also won't patch an editor whose files are already broken.

macOS and Linux:

curl -fsSL https://raw.githubusercontent.com/illixion/vscode-vibrancy-continued/main/scripts/restore.sh | bash

Windows, in PowerShell (as administrator if the editor is installed for all users):

irm https://raw.githubusercontent.com/illixion/vscode-vibrancy-continued/main/scripts/restore.ps1 | iex

Both restore every editor that has saved originals. To restore only one, pass part of its path, such as bash restore.sh Cursor or restore.ps1 -Filter Cursor, or pass the full path of its resources/app/out folder. Then start the editor and run Disable Vibrancy to remove its colour settings too, and please open an issue with your editor's name and version.

Effect doesn't work correctly in VSCode terminal?

Check your settings. You should change the renderer type of the terminal to dom.

"terminal.integrated.gpuAcceleration": "off"

EROFS: read-only file system when enabling Vibrancy on macOS?

Your installation of VSCode is affected by App Translocation.

To fix this, either use the Finder and move VSCode to /Applications (or move it out of /Applications and then back in), or run the following terminal command:

sudo xattr -dr com.apple.quarantine "/Applications/Visual Studio Code.app"

I'm on Windows 10 and I'm experiencing lag when dragging the window

With acrylic, Windows 10 redraws the blur every time the window moves, and a mouse that reports faster than the display refreshes outpaces it, so the window trails the cursor (background). Vibrancy moves and resizes the window itself while you drag it, at most once per display frame, which keeps it with the cursor without dropping the blur. Snapping works as usual, including PowerToys FancyZones and moving between monitors with different scaling.

If dragging or resizing misbehaves on your setup, turn on vscode_vibrancy.disableSmoothDragging and open an issue. Windows then handles the drag itself, and the window trails the cursor again.

Windows 10 also draws the maximize, restore and minimize animations without the blur, and so does Windows 11 with acrylic-classic. Vibrancy turns those animations off for VSCode's window in both cases. Snapping to a side or corner still animates.

VSCode window cannot be resized/moved/maximized after enabling Vibrancy

Please see Windows 10/11 notes at the top of the description.

Effect doesn't work, but there are no errors

If the vibrancy effect isn't visible but there are no error messages, first check which patches actually landed. Vibrancy works by modifying files inside VSCode's own installation, and an install can report success while a patch didn't apply. Run the diagnostic script. On Linux and macOS:

curl -fsSL https://raw.githubusercontent.com/illixion/vscode-vibrancy-continued/main/scripts/diagnose.sh | bash

On Windows, in PowerShell:

irm https://raw.githubusercontent.com/illixion/vscode-vibrancy-continued/main/scripts/diagnose.ps1 | iex

It only reads files, never modifies anything. Run it with Vibrancy enabled and after a full quit and reopen of VSCode (an in-process reload doesn't re-read the patched files). If your install isn't auto-detected, pass its path — e.g. bash diagnose.sh /usr/share/code/resources/app/out, or on Windows & ([scriptblock]::Create((irm <url above>))) -Filter 'C:\path\to\resources\app\out'.

Two results are worth acting on immediately:

• frame:false,transparent:true is NO on Linux — the window isn't transparent, and on Linux the effect comes entirely from window transparency (there's no native blur material as on macOS/Windows), so nothing will show. Check windowMode under section 2b: if it's framed, set vscode_vibrancy.windowMode back to auto and run Enable Vibrancy again.
• injection anchor present is NO — your VSCode build isn't one this version knows how to patch. Please open an issue with the full output and your VSCode version.

Please include the script's full output when opening an issue — it answers most of the questions we'd otherwise have to ask.

If everything in the diagnostic looks correct, check the following in order:

1. OS-level transparency settings — Some operating systems allow you to disable all transparency effects globally. Look in Accessibility settings for an option called "Transparency effects," "Reduce transparency," or similar. If this is disabled, enable it and restart VSCode.

2. Laptop power-saver mode — On laptops, power-saver or battery-saver modes may disable transparency effects to save power. Try disabling power-saver mode or plugging in your laptop to see if the effect appears.

3. DWM/system-wide acrylic utilities — Software like DWMBlurGlass or other DWM customization tools can interfere with the vibrancy effect. If you have any programs that globally modify Windows DWM acrylic or transparency, try temporarily disabling them to test. Some of these tools conflict with the extension's rendering.

4. GPU or driver issues — If you have recently updated your graphics drivers, try rolling back or updating to the latest version. In rare cases, try disabling GPU acceleration: set --disable-gpu-compositing in your VSCode launch arguments (see the Windows troubleshooting section for details).

5. Reinstall VSCode — As a last resort, reinstall VSCode. This won't affect your settings or extensions, but ensures your installation is consistent.

macOS: why does the effect disappear in full screen or Zen Mode?

This is a macOS-specific limitation. Native full screen moves the window to its own Space, and macOS renders no desktop behind it — so the vibrancy material has nothing left to sample and the workbench goes flat. The extension can't change that.

What macOS does offer in full screen is wallpaper tinting: with System Settings → Appearance → "Allow wallpaper tinting in windows" enabled (it is by default), the system tints the vibrancy material with your wallpaper's average color instead of leaving it flat grey — the same treatment Safari and Finder get. This applies to VSCode automatically, no extension setting needed; if you just toggled it, restart VSCode for it to take effect. How visible the tint is depends on your vscode_vibrancy.type — the default under-window tints clearly, hud and fullscreen-ui strongly, while window, content, sheet, and under-page barely tint at all; see the per-type table in Vibrancy Types.

On Windows this doesn't apply — full screen there is just a borderless window over the desktop, so the wallpaper is still behind it and the effect keeps working. Linux should behave like Windows, since the effect there comes from plain window transparency, though we haven't verified it.

Zen Mode is caught by this only because it turns full screen on by default, not because of anything Zen Mode does itself. If you're on macOS and want Zen Mode with vibrancy intact, turn that off:

"zenMode.fullScreen": false

Zen Mode then stays in a normal window and keeps the effect, centered layout included. There's no equivalent workaround for actual full screen on macOS — use a maximized window (or wallpaper tinting, above) instead.

Linux: Why is the background transparent but not blurred?

Currently, we do not support native blur effects on Linux. While transparency can work on its own, blur usually depends on additional support from the system compositor. To achieve a blur effect, use transparent mode together with a compositor such as KWin, Hyprland, or Picom.

⚠️ "Your VSCode installation appears to be corrupt"

This extension works by editing VS Code's workbench HTML, a file whose checksum the editor verifies at startup. A changed file makes it warn that the installation is corrupt and add [Unsupported] to the title bar.

Vibrancy updates the stored checksum of that file when it patches it, so neither appears. It only does this for its own change: if something else has also modified the file, the warning stays. Disabling Vibrancy puts the checksum back.

To keep the editor's warning and have Vibrancy leave the checksum alone, set vscode_vibrancy.fixChecksums to false and run Reload Vibrancy. This suits you if you want the editor to flag every change to its files, or if another tool already manages the checksums. The warning then comes back after the next restart. Reload also takes back a checksum Vibrancy wrote earlier, but never one a different tool wrote.

If you still see the warning, another extension or tool has changed one of the editor's files. It's safe to disregard, and in VSCode you can hide it with the cogwheel and Don't Show Again. Some editors, such as Cursor and Kiro, don't offer that option; there, Fix VSCode Checksums Next updates every checksum. Vibrancy works alongside it: once it has accepted the other changes, Vibrancy keeps the checksum up to date through reloads and when it's disabled.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Vibrancy relies on user contributions, and as such, any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

When creating a PR, please target the development branch.

License

Distributed under the MIT License. See LICENSE.txt for more information.

Thanks ⭐

EYHN : for making the original Vibrancy that this is a fork of

be5invis/vscode-custom-css : The basis of this extension program

DIYgod : Fix issues with VSCode 1.36