Skip to content

Instantly share code, notes, and snippets.

@ryanleonbutler
Forked from donly/README.md
Created March 21, 2022 12:12
Show Gist options
  • Select an option

  • Save ryanleonbutler/f280ca5bc79d32199c14d41024121954 to your computer and use it in GitHub Desktop.

Select an option

Save ryanleonbutler/f280ca5bc79d32199c14d41024121954 to your computer and use it in GitHub Desktop.
vibrancy theme for macOS VSCode
  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
: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;
}
nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment