Enable Acrylic/Glass effect for your VS Code.

Overview

Visual Studio Code Extension - Vibrancy Continued

The original extension has been deprecated, this version will continue to be supported and receive community updates.

Windows 10 users may have a slight mouse lag when moving the window, please read here for details.

For questions about installation and uninstallation, please read FAQs.

Enable Acrylic/Glass effect in VS Code.

screenshot

 

 

Links: GitHub | Visual Studio Code Marketplace | issues

中文教程 (Chinese README)

Warning

This extension works by editing VS Code's checksum-verified CSS file, which means that a warning prompt will appear after installing and enabling vscode-vibrancy-continued. This warning is safe to disregard, and all changes can be reverted. Click on the cogwheel and select Don't Show Again to hide it.

screenshot screenshot

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

Supported Operating Systems

Windows 11

Windows 10

MacOS

Getting Started

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

step-1

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

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

step-3

  1. Restart.

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

Options

vscode_vibrancy.type

Native method of Vibrancy Effect.

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

vscode_vibrancy.opacity

Opacity of Vibrancy Effect.

value: 0.0 ~ 1

vscode_vibrancy.theme

Select Vibrancy theme:

  • Default Dark
  • Dark (Only Subbar)
  • Default Light
  • Light (Only Subbar)
  • Noir et blanc
Theme Screenshot
Default Dark
Dark (Only Subbar)
Noir et blanc

You can contribute more themes! see here.

vscode_vibrancy.imports

Import CSS/JS files, as file paths.

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

value: array[]

FAQs

How to uninstall Vibrancy?

Press F1 or ⌘+Shift+P and activate command "Disable Vibrancy", then 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.gpuAcceleration": "off"

Prompt "Run Visual Studio Code with administrator privileges"?

It usually appears on windows when you are using the VSCode System Installer. You should close VSCode completely, then run VSCode as administrator and retry what you did before (Enable/Reload/Disable Vibrancy).

Thanks

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

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

DIYgod : Fix issues with VSCode 1.36

Comments
  • [Bug]: EACCES: permission denied

    [Bug]: EACCES: permission denied

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    Command 'Reload Vibrancy' resulted in an error (A system error occurred (EACCES: permission denied, mkdir '/Applications/Visual Studio Code.app/Contents/Resources/app/out/vscode-vibrancy-runtime-v6'))

    Expected Behavior

    No response

    Steps To Reproduce

    No response

    Environment

    - OS:
    - VSCode:
    - Extension:
    

    Anything else?

    I have VSCode in my applications folder.

    bug 
    opened by usamasaleem1 11
  • [Bug]: EEXIST: file already exist

    [Bug]: EEXIST: file already exist

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    Something went wrong: Error: EEXIST: file already exists, mkdir 'c:\Users\mulya\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vscode-vibrancy-runtime-v6'

    Expected Behavior

    No response

    Steps To Reproduce

    No response

    Environment

    - OS:Windows 11
    - VSCode:1.73.1
    - Extension: 1.1.9
    

    Anything else?

    Screenshot 2022-11-11 185140 this happens when i reload vibrancy. Do you know how to solve this?

    bug triage 
    opened by mixxvn 10
  • [Bug]: Vibrancy not applied in fullscreen

    [Bug]: Vibrancy not applied in fullscreen

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    Using Vscode 1.71.2, when I change the window to use fullscreen mode (f11), vibrancy disappears. It appears again once it is no longer fullscreen.

    Expected Behavior

    Vibrancy should still be applied on the window even in fullscreen mode.

    Steps To Reproduce

    1. Hit f11 or enter fullscreen on Vscode.

    Environment

    - OS: Windows 10
    - VSCode: 1.71.2
    - Extension: 1.1.9
    

    Anything else?

    No response

    wontfix 
    opened by Spiderpig86 6
  • [Bug]: 'editor.stickyScroll.enabled' No effect

    [Bug]: 'editor.stickyScroll.enabled' No effect

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    No response

    Expected Behavior

    No response

    Steps To Reproduce

    No response

    Environment

    - OS: Windows11
    - VSCode: 1.73.1
    - Extension:
    

    Anything else?

    No response

    wontfix 
    opened by SuperManito 4
  • [Bug]: vscode_vibrancy.imports not works

    [Bug]: vscode_vibrancy.imports not works

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    I override some style in a custom css file, but not works

    .monaco-list.settings-toc-tree .monaco-list-row.selected,
    .monaco-list.settings-toc-tree .monaco-list-row.focused,
    .monaco-list .monaco-list-row.selected,
    .monaco-list.settings-toc-tree:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
      background: #528bff69 !important;
    }
    
    image

    configuration:

      "vscode_vibrancy.imports": [
        "/Users/reywang/Documents/workHelpers/plugin-config/vscode_vibrancy_custom.css"
      ]
    

    Expected Behavior

    image

    background color should be red

    Steps To Reproduce

    No response

    Environment

    - OS: MacOS Monterey 12.4
    - VSCode: Version: 1.72.2 (Universal)
    - Extension:Vibrancy Continued v1.1.7
    

    Anything else?

    No response

    bug 
    opened by Rey-Wang 4
  • Add Tokyo Night Storm theme by henrychea

    Add Tokyo Night Storm theme by henrychea

    This theme was initially forked from @henrychea initially, see 573407282591c16521763f5aaa936dfa0b68b3fa and ce7c21c785e6140fd95e0eb580ec61ab1e43fbea

    I have made small changes using the Tokyo Night Storm variant and the glow effect

    | Theme | Screenshot | | ---- | ---- | | Tokyo Night Storm | image | | Tokyo Night Storm (Only Subbar) | image |

    Closes #5

    opened by yusoofsh 4
  • [Bug]: No longer works in macOs 13.1

    [Bug]: No longer works in macOs 13.1

    Is there an existing issue for this?

    • [x] I have searched the existing issues

    Current Behavior

    It doesn't work even after enabling, reloading the theme.

    Expected Behavior

    No response

    Steps To Reproduce

    1. Enable extension
    2. Reload
    3. Nothing happens

    Environment

    - OS: macOs 13.1
    - VSCode: 1.74.1
    - Extension: 1.1.12
    

    Anything else?

    No response

    bug 
    opened by morphisjustfun 3
  • [Bug]: Extension fails to launch

    [Bug]: Extension fails to launch

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    The extension fails to launch. The reason is likely found in commit 2857f2720efd6f2a38754ce070c534cff3e160a0 where a package called rifraf seems to have been installed instead of rimraf. Should be an easy fix!

    Expected Behavior

    Extension should launch.

    Steps To Reproduce

    Try to launch the extension.

    Environment

    - OS: MacOS
    - VSCode: 1.73.1
    - Extension: Vibrancy Continued
    

    Anything else?

    No response

    bug 
    opened by MartinRybergLaude 3
  • Add Solarized Dark+ theme by leonasdev

    Add Solarized Dark+ theme by leonasdev

    I have made a theme Solarized Dark+ which is based on Solarized.

    | Theme | Screenshot | | ---- | ---- | | Solarized Dark+ (with theme: Solarized) | theme-solarized-dark+ |

    opened by leonasdev 3
  • Can't reload Vibrancy on Macbook M1

    Can't reload Vibrancy on Macbook M1

    image

    Error message: Command 'Reload Vibrancy' resulted in an error (A system error occurred (EROFS: read-only file system, mkdir '/private/var/folders/qp/t8ngnpw938b098h1m78nvb9w0000gn/T/AppTranslocation/5A94F146-3BD2-414B-8133-FD6AOFFF5A59/d/Visual Studio Code.app/Contents/Resources/app/out/vscode-vibrancy-runtime-v6'))

    Hi Team, this is what happened when I click reload Vibrancy, even though I followed the steps mentioned in the extension. Thanks.

    bug stale 
    opened by t-h-phuc96-work 2
  • [Bug]: Suddenly getting an error

    [Bug]: Suddenly getting an error

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    The extension stopped working and now am getting "Command 'Reload Vibrancy' resulted in an error (command 'extension.updateVibrancy' not found)"

    Expected Behavior

    No response

    Steps To Reproduce

    No response

    Environment

    - OS: Mac Montery 12.3.1
    - VSCode:
    - Extension:
    

    Anything else?

    No response

    bug triage 
    opened by cbarnett358 1
  • [Bug]: Mouse drag lag.  Any other ways to avoid this?

    [Bug]: Mouse drag lag. Any other ways to avoid this?

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    My apologies. I am aware of the mouse drag lag issue. The old Vibrancy Extension had found a GREAT fix for bug; which I'm currently using. However, after if I upgrade from VSCode 1.56.2 to a newer version, it doesn't work anymore.

    Is there any hope for this extension without mouse drag lag? This is the main reason why I stopped using Vibrancy. Hopefully, you can find a new way to do this.

    Expected Behavior

    No mouse drag lag

    Steps To Reproduce

    1. Move VSCode window by dragging it with a mouse cursor.

    Environment

    - OS:
    - VSCode:
    - Extension:
    

    Anything else?

    No response

    bug triage 
    opened by mkanet 2
  • [Feature]: Automatic Theme based on light/dark mode in OS

    [Feature]: Automatic Theme based on light/dark mode in OS

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Is your feature request related to a problem? Please describe.

    No response

    Describe your idea or feature request

    No response

    Describe alternatives you've considered

    No response

    Anything else?

    No response

    enhancement 
    opened by arimal199 0
  • [Feature] ensure that experimental window controls are disabled when enabling Vibrancy

    [Feature] ensure that experimental window controls are disabled when enabling Vibrancy

    A new setting was added that enables native window controls, which isn't supported in Vibrancy and needs to be kept disabled. Warn the user if it's enabled.

    image

    enhancement 
    opened by illixion 0
  • [Feature]: Allow Theme Color In FullScreen

    [Feature]: Allow Theme Color In FullScreen

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Is your feature request related to a problem? Please describe.

    When VSCode becomes fullscreen on macOS, the theme color not using for the background, and this causes a colorless, dead visual.

    Describe your idea or feature request

    When VSCode is fullscreen, use the theme's background color.

    Describe alternatives you've considered

    As an alternative, we can apply the native approach as I mentioned in this issue: https://github.com/illixion/vscode-vibrancy-continued/issues/37#issuecomment-1342749244

    enhancement 
    opened by EmreSURK 1
  • [Bug]: Background is too vibrant

    [Bug]: Background is too vibrant

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Current Behavior

    The backdrop is too vibrant, it looks like I have digital vibrance at 100% for VSCode only.

    Here's a screenshot I took:

    Current

    Expected Behavior

    Backdrop should be less vibrant.

    Here's a screenshot my friend took (same wallpaper):

    Expected

    Steps To Reproduce

    1. Install vibrancy.

    It's happened every time I've used this extension, even on a fresh windows install, but never to my friends. I've also tried disabling all other extensions, changing themes and looking through my NVIDIA control panel settings.

    I have had this problem for a long time, even back when I used the original vibrancy extension. It's probably something on my end, but I'm just hoping that creating an issue will at least give me some new leads.

    Environment

    - OS: Windows 11 22H2
    - VSCode: 1.73.1
    - Extension: 1.1.12
    

    Anything else?

    No response

    bug triage 
    opened by mvahaste 7
  • [Feature]: Add option for blur effect value

    [Feature]: Add option for blur effect value

    Is there an existing issue for this?

    • [X] I have searched the existing issues

    Is your feature request related to a problem? Please describe.

    No

    Describe your idea or feature request

    Just like opacity option but for blurriness.

    Anything else?

    No

    enhancement 
    opened by iHeadway 0
Owner
illiixon
DevOps, full-stack JavaScript developer, also sometimes a pythonista.
illiixon
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Okoye Charles 14 Oct 3, 2022
Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Cuberto Reeller Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

Cuberto 41 Jan 4, 2023
DGPreview - Make UIKit project enable preview feature of SwiftUI

DGPreview Make UIKit project enable preview feature of SwiftUI Requirements iOS

donggyu 5 Feb 14, 2022
Storybook add-on to enable SWC builds.

storybook-addon-swc Storybook addon that improves build time by building with swc. ?? Examples webpack4 webpack5 ?? Installation $ npm install -D stor

Karibash 49 Dec 20, 2022
ZaDark is an open source extension that helps you enable Dark Mode for Zalo on PC and Browser.

ZaDark – Zalo Dark Mode Table of Contents About Install Roadmap Contributing License Contact Awards Acknowledgments About ZaDark is an open source ext

Nguyễn Chánh Đại 64 Dec 22, 2022
A package to enable feature-flag support on Next.js via cookies and environment variables

next-feature-flags Add support for feature flags on Next.js based on cookies + environment variables. How it works It reads from cookies and Next.js's

Alexandre Santos 10 Aug 10, 2022
Enable hover capabilities for Cypress. 🛸

cypress-hover ?? Enable hover capabilities for Cypress ?? with zero dependencies! ?? Installation npm install cypress-hover Usage In your cypress/sup

Marcello 2 Sep 1, 2022
This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.

The HTML5 Shiv The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explo

Alexander Farkas 9.9k Jan 2, 2023
A GitHub Action to enable Pages and extract various metadata about a site

A GitHub Action to enable Pages and extract various metadata about a site. It can also be used to configure various static site generators we support as starter workflows.

GitHub Actions 50 Jan 1, 2023
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4

Jonathan James Cosgrove 216 Sep 10, 2022
A tiny JavaScript library to enable CSS animations when user scrolls.

A tiny JavaScript library to enable CSS animations when user scrolls. This library allows you to toggle one or more classes on an element when it appe

Matthieu Bué 35 Nov 24, 2022
Plugin to enable PDF files as first class citizens within an Obsidian vault.

Obsidian-PDF Plugin to enable PDF files as first class citizens within an Obsidian vault. What does this plugin do for me? All PDF files in your vault

Noah Cabral 16 Nov 26, 2022
A prototype on how web3 technology can enable us to build an open, immutable, reproducible, and permanently accessible scientific record.

Web3 Research A prototype on how web3 technology can enable us to build an open, immutable, reproducible, and permanently accessible scientific record

manveer 0 Nov 27, 2022
An unofficial companion tool created for use alongside PhotoPrism to enable API endpoints and automation.

PhotoPrism Helper PhotoPrism Helper is an unofficial companion tool created for use alongside PhotoPrism. This project isn't associated with the Photo

Ryan Miller 9 Dec 25, 2022
(Experimenting) Transform CSS Modules to enable Atomic CSS benefits 🌱

MatoCSS Transform CSS Modules to enable Atomic CSS benefits Please note that it is still experimenting. I do not recommend using this in production. U

Huy Nguyen 4 Nov 24, 2022
A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Arhun Saday 34 Dec 12, 2022
TypeWriter - Create easily a TypeWriter effect for your website

TypeWriter Create easily a TypeWriter effect for your website Written by Luuk Walstra Discord: Luuk#8524 Github: https://github.com/Luuk-Dev Replit: h

Luuk 2 Aug 16, 2022