VSCode真的是一款强大的编程软件:它拥有众多类型的扩展和第三方库以及支持众多编程语言。在搭建并配置博客的过程中,本地静态博客的配置文件比如.yml.json.css.swig等各种格式的文件都可以用它打开并修改。如果它拥有一个更为漂亮简洁的UI界面,那势必会使生产力翻倍了!!! 本文介绍如何实现VS Code界面的毛玻璃效果~ 毛玻璃效果❌以及霓虹主题✅界面效果: 霓虹主题:代码高亮且呈现彩虹色🌈 毛玻璃效果:界面半透明状态 –> 类似于模糊桌面背景 霓虹主题效果: 毛玻璃效果 操作步骤: 安装Visual Studio Code,点👉就是我呀!安装!😁 下载「关键字高亮」主题插件 打开VS Code在extension扩展栏里搜索并下载扩展应用“Synthwave ‘86” VS Code设置 在设置中搜索setting.json并在该文件中添加如下代码: terminal.integrated.rendererType": "dom" 下载Custom CSS and JS Loader插件 用于自定义.css和.js文件 打开VS Code在extension扩展栏里搜索并下载扩展应用“Custom CSS and JS Loader” 毛玻璃样式配置新建custom.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; } .panel.integrated-terminal, .panel.integrated-terminal *{ background: transparent !important; } 新建custom.js文件 nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark'); VS Code设置 在setting.json中添加如下代码: "vscode_custom_css.imports": [ "file:///Users/MyUserName/Documents/custom.css",//注意确定好文件路径 "file:///Users/MyUserName/Documents/custom.js" //注意确定好文件路径 ], "vscode_custom_css.policy": true 执行配置操作 在VS Code中执行命令(Commond+Shift+P): Reload Custom CSS and JS 然后在右下角弹出的对话框里选择Restart Visual Studio Code。 目前经过多次尝试,设置霓虹主题成功但开启毛玻璃效果失败:在以上所有操作结束后应该 出现正确效果,但我的界面弹出Code已损坏请重新下载。注意!!!Mac OS端可以实现以上效果,Windows端不可以。 |
|
来自: 昵称71074068 > 《待分类》