vscode自定义主题配色

  1. setting.json
{
    "workbench.colorTheme": "Solarized Light",
    "window.zoomLevel": 1,
    // 目自定义的颜色
    "editor.tokenColorCustomizations": {
        "comments": "#008000",
        "keywords": "#d33682",
        "variables": "#2aa198",
        "strings": "#dc322f",
        "functions": "#859900",
        // "parameter":"#a6a9a3",
        "numbers": "#6c7ec4",
        "types": "#30ada2",
        "textMateRules": [
            {
                "scope": "variable.other.property.ts",
                "settings": {
                    "foreground": "#9932cc",
                }
            },
            {
                "scope": "entity.name.tag",
                "settings": {
                    "foreground": "#d33682",
                }
            },
            {
                "scope": "entity.other.attribute-name",
                "settings": {
                    "foreground": "#d33682",
                }
            },
            {
                "scope": "support.type",
                "settings": {
                    "foreground": "#9aa5a2",
                }
            },
            {
                "scope": "text.html.derivative",
                "settings": {
                    "foreground": "#9aa5a2",
                }
            },
            {
                "scope": "support.function",
                "settings": {
                    "foreground": "#d33682",
                }
            },
            {
                "scope": "keyword.control.conditional.vue",
                "settings": {
                    "foreground": "#9aa5a2",
                }
            },
        ]
    },
    "workbench.colorCustomizations": {
        "editor.background": "#fef6e0",
        "editor.selectionBackground": "#00FF00",
        "editor.foreground": "#880000"
    }
}
  1. 在需要修改颜色的代码处,使用快捷键 fn + f1, 打开命令面板, 输入 >Inspect Editor Tokens and Scopes点击需要改颜色的代码处,会弹出提示框。
image
posted @ 2023-02-13 17:33  shine_lovely  阅读(260)  评论(0编辑  收藏  举报