Skip to main content

Transform Your VS Code Experience

Enable beautiful Acrylic and Glass transparency effects for Visual Studio Code. Make your editor truly yours with 14 built-in themes and extensive customization options.

Get StartedInstallation Guide
794 stars
Cross-platform
VS Code with Vibrancy effect showing transparent glass-like editor window

Quick Start

Get Vibrancy running in your VS Code in minutes

1

Install the Extension

Install Vibrancy Continued from the Visual Studio Code Marketplace.You can also install it directly from VS Code:
  1. Open VS Code
  2. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS)
  3. Search for “Vibrancy Continued”
  4. Click Install
2

Enable Vibrancy

After installation, activate the extension:
  1. Press F1 to open the Command Palette
  2. Type “Reload Vibrancy” and select Reload Vibrancy
  3. Restart VS Code when prompted
You may see a warning that your VS Code installation appears corrupt. This is expected and safe—the extension modifies VS Code’s HTML files to enable transparency. Click the cogwheel and select Don’t Show Again to hide this warning.
3

Choose Your Theme

Select from 14 built-in themes to match your style:
  1. Open Settings (Ctrl+, or Cmd+,)
  2. Search for “vibrancy theme”
  3. Choose from themes like Default Dark, Tokyo Night Storm, Catppuccin Mocha, and more
Changes take effect immediately after running Reload Vibrancy again.
4

Platform-Specific Setup (Windows Only)

Windows 10/11 users must complete additional setup to ensure window resizing works correctly.
  1. Update your VS Code shortcut to include --disable-gpu-compositing: 
    "C:\Users\YourName\AppData\Local\Programs\Microsoft VS Code\Code.exe" --disable-gpu-compositing
  2. Go to VS Code settings and enable Disable frameless window (vscode_vibrancy.disableFramelessWindow)
  3. Press F1 and run Reload Vibrancy
See the Windows platform guide for detailed instructions.

Key Features

Everything you need to customize your VS Code appearance

Multiple Vibrancy Types

Choose from Acrylic (Windows), under-window, fullscreen-ui, and 10+ macOS transparency styles to match your workflow

14 Built-in Themes

From Default Dark to Tokyo Night Storm and Catppuccin Mocha—find the perfect look for your editor

Custom CSS Support

Import your own CSS and JavaScript files to create fully personalized themes and effects

Auto Theme Switching

Automatically switch between dark and light themes based on your system preferences

Cross-Platform

Full support for Windows 10/11 and macOS (Intel & Apple Silicon)

Native Performance

Native module integration ensures smooth performance without sacrificing speed

Explore by Topic

Find exactly what you need

Windows Setup Guide

Complete setup instructions for Windows 10 and 11, including GPU compositing fixes and frameless window configuration

Read guide

macOS Setup Guide

Setup instructions for macOS including Intel and Apple Silicon, with App Translocation and permissions fixes

Read guide

Configuration Reference

Complete reference for all Vibrancy settings including opacity, refresh intervals, and advanced options

View settings

Troubleshooting

Solutions for common issues including permission errors, window resizing problems, and installation failures

Get help

Supported Platforms

Vibrancy Continued works on all major platforms and editors

Windows

  • Windows 10 (x64 & ARM64)
  • Windows 11 (x64 & ARM64)
  • Acrylic blur support

macOS

  • Intel & Apple Silicon
  • 10+ vibrancy types
  • Native glass effects

Supported Editors

Visual Studio CodeVSCodiumCursor

Ready to Transform Your Editor?

Join thousands of developers who have enhanced their VS Code with beautiful transparency effects

Get Started Now

Build docs developers (and LLMs) love

Get started for freeTalk to us