Skip to content
Enable Acrylic/Glass effect for your VS Code.
JavaScript CSS C++ C
Branch: master
Clone or download
Pull request Compare This branch is 32 commits ahead, 10 commits behind be5invis:master.
spencerwooo and EYHN revert: "fix: typo"
This reverts commit 172ef78.
Latest commit 61a68c4 Aug 11, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
images vscode-vibrancy Jul 12, 2019
src include blur-cli source Aug 20, 2019
themes fix: opacity in win10 Aug 14, 2019
.gitignore include blur-cli source Aug 20, 2019
LICENSE.txt first commit Jul 11, 2016 revert: "fix: typo" Sep 7, 2019 fix: Delete the wrong ',' in the generated html Aug 14, 2019
package.json feat: light theme and i18n Aug 14, 2019
package.nls.json feat: light theme and i18n Aug 14, 2019
package.nls.zh-CN.json feat: light theme and i18n Aug 14, 2019
step-1.png vscode-vibrancy Jul 12, 2019
step-3.png v1.0.3 Jul 20, 2019
theme-default.png add: macOS default and subbar theme screenshots Sep 7, 2019
theme-subbar.jpg add: solution to [Unsupported] in title bar Sep 7, 2019
warns.png vscode-vibrancy Jul 12, 2019

Visual Studio Code Extension - Vibrancy

Enable Acrylic/Glass effect for your VS Code.




Links: Github | Visual Studio Code Marketplace | issues

中文教程 (Chinese README)

Supported Operating Systems

Windows 7 ✔

Windows 10 ✔

MacOS ✔

Getting Started

  1. Make sure the color theme you selected is the 'Dark+ (default)'


  1. Install this extension from the Visual Studio Code Marketplace.

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


  1. Restart.

Every time after Code is updated, please re-enable vibrancy.


This extension works by editting VS Code's css file. So, a prompt will appear when installing vscode-vibrancy for the first time or each time VS Code updates. U can click [never show again] to hide it.


To fix the "[Unsupported]" warning on VS Code's title bar, please refer to this extension: Fix VSCode Checksums.



Native method of Vibrancy Effect.

  • auto : Automatically switch with system version.
  • dwm : (Windows 7 only) Windows Aero blur.
  • acrylic : (Windows 10 only) Fluent Design blur.
  • appearance-based, light, dark, titlebar, selection, menu, popover, sidebar, medium-light, ultra-dark: (MacOS only)


Opacity of Vibrancy Effect.

value: 0.0 ~ 1


Select Vibrancy theme:

  • Default Dark
  • Dark (Only Subbar)
Default Dark Dark (Only Subbar)

You can contribute more themes for us! see here.


Import CSS/JS files, as file paths.

EXAMPLE: C:/Users/MyUserName/Documents/custom.css

value: array[]


How to uninstall?

Press F1 and Activate command "Disable Vibrancy", and Restart Visual Studio Code.

Effect doesn't work for terminal?

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

"terminal.integrated.rendererType": "dom"

Thanks ⭐

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

DIYgod : Fix issues with VSCode 1.36

You can’t perform that action at this time.