VSCode Mac版磨砂主题配置

提供一种Mac上无需重新编译vscode的一种配置方式。

• 安装拓展插件 "Custom CSS and JS Loader"

• 创建 CSS 和 JS 文件

• theme.css

html {
  background: transparent !important;
}

.scroll-decoration {
  box-shadow: none !important;
}

.minimap {
  opacity: 0.6;
}

.editor-container {
  background: transparent !important;
}

.monaco-workbench>.part.activitybar.left {
  background-color: rgba(255, 255, 255, .1) !important;
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.monaco-workbench>.part.sidebar.left {
  background-color: rgba(255, 255, 255, .1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.monaco-workbench>.part.statusbar {
  background-color: rgba(255, 255, 255, .1) !important;
}

.vs-dark .monaco-panel-view .panel>.panel-header.expanded {
  background-color: rgba(0, 0, 0, .1) !important;
}

.monaco-panel-view .panel>.panel-header {
  background-color: rgba(255, 255, 255, 0) !important;
  outline-color: rgba(255, 255, 255, 0) !important;
}

.monaco-workbench > .panel-header:focus {
  outline-color: rgba(255, 255, 255, 0) !important;
}

.monaco-editor .view-overlays .current-line {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.monaco-workbench .monaco-list:not(.element-focused):focus:before, .monaco-workbench .monaco-tree.focused.no-focused-item:focus:before {
  outline: 0;
}

/* .monaco-panel-view.panel:focus, .monaco-scrollable-element.mac:focus, .explorer-folders-view.file-icon-themable-tree.show-file-icons:focus, .panel-body:focus { */
  /* outline: -webkit-focus-ring-color auto 0px !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(255, 255, 255,0.1) !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: rgba(0, 0, 0,0.1) !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: rgba(0, 0, 0,0.1) !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;
}
复制代码

• theme.js

nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');
复制代码

• settings.json中添加配置

添加配置项

"vscode_custom_css.imports": [
  "file:///Users/MyUserName/Documents/theme.css",
  "file:///Users/MyUserName/Documents/theme.js"
],
"vscode_custom_css.policy": true
复制代码

• ⌘ + ⇧ + p 激活命令行输入框，运行命令

Reload Custom CSS and JS
复制代码

• 重启

转载于:https://juejin.im/post/5ce36679f265da1b8811b02a