效果如图,来自Github的@EYHN,先由@Diygod在推特上安利的,嘻嘻就转到墙内安利。

img

  1. 安装"Custom CSS and JS Loader"插件。

    img

  2. 创建CSS和JS文件:

    1. custom.css

      html {
          background: transparent !important;
      }
      
      .scroll-decoration {
          box-shadow: none !important;
      }
      
      .minimap {
          opacity: 0.6;
      }
      
      .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;
      }
      
      .editor-group-container>.tabs .tab {
          background-color: transparent !important;
      }
      
      .editor-group-container>.tabs .tab.active {
          background-color: rgba(37, 37, 37,0.4) !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;
      }
      
      .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;
      }
    2. custom.js

      nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');
    3. 将下面的配置添加到settings.json,即点击图中Edit in settings.json

      img

      "vscode_custom_css.imports": [
        "file:///Users/MyUserName/Documents/custom.css",
        "file:///Users/MyUserName/Documents/custom.js"
      ],
      "vscode_custom_css.policy": true

      如果原来没有settings.json,需要将上述字段用一对大括号封闭起来,就像这样:

      {
        *******
      }
  3. 按下command + shift + P,输入Reload Custom CSS and JS
  4. 重启VS Code完工。
最后修改:2019 年 05 月 25 日 06 : 17 PM