vibrancy theme for macOS VSCode

README.md

1. Install plugin Custom CSS and JS Loader
2. Open setting.json add lines below

    "vscode_custom_css.imports": ["file:///Users/Don/Documents/vscode/customtheme/vscode-vibrancy.css",
   "file:///Users/Don/Documents/vscode/customtheme/vscode-vibrancy.js"],
   "vscode_custom_css.policy": true,
   "terminal.integrated.rendererType": "dom"
   

3. CMD + Shift + p, reload custom css and js
4. Restart VSCode
5. Don't show the error tips again

vscode-vibrancy.css

:root{
  --vibrancy-dark: rgba(0,0,0,.2);
  --vibrancy-light: rgba(255,255,255,.2);
  }
  html {
  background: transparent !important;
  }
  .scroll-decoration {
  box-shadow: none !important;
  }
  .minimap {
  opacity: 0.6;
  background-color: transparent !important;
  }
  .editor-container {
  background: transparent !important;
  }
  .search-view .search-widget .input-box, .search-view .search-widget .input-box .monaco-inputbox,
  .monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab,
  .monaco-editor-background,
  .monaco-editor .margin,
  .monaco-workbench>.part>.content,
  .monaco-workbench>.editor>.content>.one-editor-silo.editor-one,
  .monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title,
  .monaco-workbench>.part>.title,
  .monaco-workbench,
  .monaco-workbench>.part,
  body {
  background: transparent !important;
  }
  .editor-group-container>.tabs {
  /* background-color: rgba(37, 37, 37,0.2) !important; */
  background: transparent !important;
  /* box-shadow: 0 1px 10px -2px gray; */
  }
  .editor-group-container>.tabs .tab {
  background-color: transparent !important;
  }
  .editor-group-container>.tabs .tab.active * {
  color: #fff !important;
  background-color: transparent !important;
  }
  .monaco-list.settings-toc-tree .monaco-list-row.focused {
  outline-color: rgb(37, 37, 37,0.6) !important;
  }
  .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-color: rgb(37, 37, 37,0.6) !important; */
  color: #00aaee;
  }
  .monaco-list.settings-editor-tree .monaco-list-row {
  background-color: transparent !important;
  outline-color: transparent !important;
  }
  .monaco-inputbox {
  background-color: rgba(41, 41, 41,0.2) !important;
  }
  .monaco-editor .selected-text {
  background-color: rgba(58, 61, 65,0.6) !important;
  }
  .monaco-editor .focused .selected-text {
  background-color: rgba(38, 79, 120,0.6) !important;
  }
  .monaco-editor .view-overlays .current-line {
  border-color: rgba(41, 41, 41,0.2) !important;
  }
  .extension-editor,
  .monaco-inputbox>.wrapper>.input,
  .monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active,
  .preferences-editor>.preferences-header,
  .preferences-editor>.preferences-editors-container.side-by-side-preferences-editor .preferences-header-container,
  .monaco-editor, .monaco-editor .inputarea.ime-input {
  background: transparent !important;
  }
  .editor-group-container>.tabs .tab {
  border: none !important;
  }

vscode-vibrancy.js

nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');

Every time you update VS code, you will need to repeat this step to re-enable custom CSS and JS.

Open your command palette with Ctrl + Shift + P or Shift + ⌘ + P and choose "Enable custom CSS and JS". It will prompt you to restart, and when you do the lights should be on :)

I haven't tried it on previous versions, but this doesn't seem to work on my 1.36.1.