最新 VSCode自定义CSS美化教程：修改编辑器背景、字体、滚动条样式（附完整代码）

最近VSCode部门大概是来了一位“天才”设计师，从1.134版本开始对UI进行了迷之改进。文件标签未激活的样式居然和激活样式做得一模一样，简直倒反天罡！用起来极度不顺手，导致我经常点错标签，工作效率都硬生生下降了一点。

第一张图是旧版本👇，激活的标签颜色和文件内容区域颜色相同，搭配合理，用着特别舒服

第二张图是1.134版本👇，激活的标签是突出显示，但颜色和老版本未激活的颜色接近，但未激活的标签和下面内容区域颜色一致？？ 我尼玛，老用户谁能分得清？

现在用了Custom UI Style插件，进行了自定义css，搞回原来的样式，一并修改了左侧功能菜单的样式。效果如下👇

既然官方不听劝，那咱们自己动手改。我用的是 Custom UI Style 插件来覆盖样式，核心思路就是让激活的标签“显眼”，未激活的“退后”。

配置代码👇：

按 Ctrl+Shift+P，输入 Open User Settings (JSON)，打开用户配置的json模式，把下面这段代码放进去：

 JavaScript

"custom-ui-style.stylesheet": {
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-and-actions-container": {
        "padding-left": "0!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-container": {
        "background": "#2b2d27!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-container > .tab": {
        "border-width": "0!important",
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-container > .active": {
        "background": "#272822!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-container > .active::before": {
        "content": "''",
        "position": "absolute",
        "top": "0",
        "left": "0",
        "width": "calc(100% - 2px)",
        "height": "2px",
        "background": "#007acc",
        "z-index": "10"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-container > .active .tab-fill": {
        "background-color": "#272822!important",
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-container > .active .tab-actions:before": {
        "background-image": "none!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-container > .active .tab-actions": {
        "background-color": "#272822!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .tabs-container > .tab .tab-fill": {
        "border-radius": "0!important",
        "inset": "0 var(--vscode-spacing-size20) 0 0!important",
    },
   
    ".vscode-theme-monokai-themes-monokai-color-theme-json .activitybar": {
        "padding-left": "0!important",
        "padding-right": "0!important",
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .activitybar > .content": {
        "width": "100%!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .activitybar .action-item a": {
        "width": "100%!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .activitybar .action-item.checked a::before": {
        "color": "#fff!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .activitybar .action-item.checked .active-item-indicator": {
        "width": "2px!important",
        "height": "100%!important",
        "border-radius": "0!important",
        "background-color": "#fafcf2!important"
    },
    ".vscode-theme-monokai-themes-monokai-color-theme-json .activitybar .action-item:not(.checked) .active-item-indicator": {
        "display": "none",
    }},