Frosted Glass Theme

An enhancement to vscode appearance. Major feature includes acrylic effect, mica background, reveal effect, flip effect, animations and more! Fully customizable. Designed to be compatible with other color themes.

Get it on VSCode Marketplace Get it on Open-VSX

中文版

This is a intrusive theme. Can work with any other color themes.
Plz read this document before installation.
Custom SVG is supported.

Preview

Install

1. Install this extension.
2. Open command panel, type in Frosted Glass Theme: Enable, press enter.
3. Some canvas based elements have their own background color. Thus you must figure out the color for them and add opacity to them, then add them back to workbench.colorCustomizations. The colors are "editorOverviewRuler.background", "minimap.background", "terminalStickyScroll.background". The command frosted-glass-theme.generateThemeMod may work but not for certain.
4. You can customize this theme in vscode settings.
5. Every time vscode updates, you have to re-run Frosted Glass Theme: Enable.

If you want to load this theme with other extension or you prefer to maintain the workbench.html yourself, download the whole inject directory, then import only the inject\vscode-frosted-glass-theme.js (with type="module"). Then remove the <meta http-equiv="Content-Security-Policy" ... /> from workbench.html (which blocks svg from loading). To make fake mica moving, you must also import inject/vscode-frosted-glass-theme-main.mjs at the beginning of Microsoft VS Code\resources\app\out\main.js.

For Linux and perhaps MacOS user

You need to set window.titleBarStyle to custom to see the effect. Otherwise the effect is very limited.

Customization

• The opacity settings will blend into theme colors unless they already have opacity.
• Fake mica is by default turned off. Enable it with frosted-glass-theme.fakeMica.enabled setting. You need to change the theme colors as well since this extension does not apply opacity to your theme automatically. Here is an example:

  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "menu.selectionBackground": "#ffffff",
      // Title bar opacity won't work because: https://github.com/microsoft/vscode/blob/444d7a4b35745ed7733c700a8008f55cd659eb1d/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts#L682
      // "titleBar.activeBackground": "#00000000",  
      "editor.background": "#282c3499",
      "editorGutter.background": "#00000000",
      "editor.lineHighlightBackground": "#2c313c4d",
      "editorPane.background": "#00000000",
      "tab.inactiveBackground": "#00000000",
      "editorGroupHeader.tabsBackground": "#282c34cc",
      "breadcrumb.background": "#00000000",
      "panel.background": "#282c34cc",
      "terminal.background": "#00000000",
      "sideBar.background": "#21252bcc",
      "sideBarTitle.background": "#00000000",
      "statusBar.background": "#21252bcc",
      "statusBar.noFolderBackground": "#21252bcc",
      "input.background": "#1d1f234d",
      "dropdown.background": "#21252bcc",
      "dropdown.border": "#21252b4d",
    },
  }

  There are more examples in theme folder. I welcome everyone to send pull request.
  You can also try the command frosted-glass-theme.generateThemeMod to automatically generate a theme, then add the result into colorCustomizations.
• The frosted-glass-theme.svg simply loads svg from a url. The generated svg element is static and only use the css variable from monaco-workbench. More svgs can be found in resource folder.
• The frosted-glass-theme.tintSvg generate different svgs for each key defined in frosted-glass-theme.filter and the id on <filter> is changed to id-key. Inside svg, you can use some special css variables: --fgt-current-background representing the element's solid background color, --fgt-current-opacity representing opacity.
• The frosted-glass-theme.filter settings is a object that represents the filter to use with each element. The keys are defined in src-inject/backdropFilter.tss' entryList. The value is of the type:

  type Filter = {
    filter: string;
    disableBackgroundColor: boolean;
    opacity: number;
  };
  type FilterPart = Partial<Filter>;
  const value = string | FilterPart | undefined;

  The disableBackgroundColor disables backgrounds (the filter should provide it). However, minimap, decorationsOverviewRuler and terminalOverlay are based on canvas and draw their own background color, thus you must specify a filter that does not provide a background color for them.
  There is a special key default which acts like a fallback. You can use a special keyword {key} to represent the current key. Together with tintSvg you can create different color svg for each element.
  For example, you created a svg that contains a <filter> whose id is fgt-acrylic, and you add it to tintSvg. You can then set a value url(#fgt-acrylic-{key}), so it will automatically use that element's background color.
• The frosted-glass-theme.animation's key is defined in src-inject/animation.ts's selectorMap, or the key can also be css selector. The value can be either css animation defined in src-inject/vscode-frosted-glass-theme.css's Animation or effect defined in src-inject/effect/effect.ts's effectMap. However, effects are not affected by css timing function, they are just triggered by animationstart event.
• You can add your own effect by calling window._fgtTheme.registerEffect(key: string, func: (e: Element) => void).
• The default config is in config/config.json.

Uninstall

1. Open command panel, type in "Frosted Glass Theme: Disable", press enter.
2. Uninstall from the extension panel as usual.
3. Remove "workbench.colorCustomizations" if you want to.

Known Issue

• Since Windows 24H2, Microsoft may have changed the wallpaper location. Follow the steps:
  1. Create a hard link: cd $env:AppData\Microsoft\Windows\Themes; cmd /c mklink /H .\TranscodedWallpaper.jpg .\TranscodedWallpaper.
  2. Change frosted-glass-theme.fakeMica.url to <your user home>/AppData/Roaming/Microsoft/Windows/Themes/TranscodedWallpaper.jpg.
• Editor's font becomes a little bit thinner.
• If some colors are not correct, it may be due to that your theme uses a opposite color + high transparency. For example, Codemos Modern. You can try to use normal blur filter instead of acrylic.svg:

  "frosted-glass-theme.filter": {
    "sideBarSectionHeader": {
      "filter": "blur(30px)",
      "disableBackgroundColor": false
    },
    "slider": {
      "filter": "blur(30px)",
      "disableBackgroundColor": false
    },
  }

  Apply and restart vscode. The keys are defined in src-inject/backdropFilter.tss' entryList.

Thanks

• be5invis/vscode-custom-css

Disclaimer

This extension modifies resources\app\out\vs\code\electron-sandbox\workbench\workbench.html and resources\app\out\main.js to inject files. So use at your own risk.
Also, the extension keeps a backup in resources\app\out\vs\code\workbench.*.bak-frosted-glass and resources\app\out\main.*.bak-frosted-glass in case anything goes wrong.