hbuilderx主题色分享-github风格

冷不防 2024-03-22 22:57 82阅读 0赞

#### 效果 ####

![在这里插入图片描述][7e1b95392e964176ab51a4de81026a95.png]

#### 步骤 ####

hbuilderx总共有三种主题，绿柔主题`Default`,酷黑主题`Monokai`,雅黑主题`Atom One Dark`,修改主题色是`基于三种主题之一`的，不能直接创建一个新主题，比如下方配置是基于`Atom One Dark`(对象名为`[Atom One Dark]`)，则当前hbuilderx必须处于雅黑主题，配置才能有作用

`工具`>`设置`>`源码视图`>`Settings.json`中加入以下配置

"workbench.colorCustomizations": {
        
        "[Atom One Dark]": {
        
          "editor.background": "#0D1117",
          "sideBar.background": "#010409",
          "menubar.background": "#0D1117",
          "toolBar.background": "#0D1117",
          "tab.inactiveBackground": "#0D1117",
          "tab.activeBackground": "#0D1117",
          "editor.tab.background": "#0D1117",
          "editor.indicator.matchtag": "#ffffff"
        }
      },
     "editor.tokenColorCustomizations": {
        
        "[Atom One Dark]": {
        
          "rules": [
            {
        
              "scope": ["string"],
              "settings": {
        
                "foreground": "#A5D6FF"
              }
            },
            {
        
              "scope": ["entity.other.attribute-name"],
              "settings": {
        
                "foreground": "#56C0FF"
              }
            },
            {
        
              "scope": ["meta.tag"],
              "settings": {
        
                "foreground": "#E6EDF3"
              }
            },
            {
        
              "scope": [
                "variable.other.readwrite.js",
                "variable.other.readwrite.ts",
                "variable.other.readwrite.tsx"
              ],
              "settings": {
        
                "foreground": "#E6EDF3"
              }
            },
            {
        
              "scope": ["entity.name.tag"],
              "settings": {
        
                "foreground": "#7EE787"
              }
            },
            {
        
              "scope": ["meta.method-call", "meta.method"],
              "settings": {
        
                "foreground": "#E6EDF3"
              }
            },
            {
        
              "scope": ["text.html.vue"],
              "settings": {
        
                "foreground": "#E6EDF3"
              }
            },
            {
        
              "scope": ["keyword.other.unit"],
              "settings": {
        
                "foreground": "#E6EDF3"
              }
            },
            {
        
              "scope": ["support.constant.property-value.css", "constant.numeric"],
              "settings": {
        
                "foreground": "#56C0FF"
              }
            },
            {
        
              "scope": ["support.type.property-name"],
              "settings": {
        
                "foreground": "#E06C75"
              }
            }
          ]
        }
      },

#### 配置讲解 ####

*  `workbench.colorCustomizations`中`sideBar.background`控制项目管理器背景颜色
 *  `workbench.colorCustomizations`中`editor.background`控制编辑区域背景颜色
 *  `editor.tokenColorCustomizations`设置代码块的对应颜色
 *  `如何设置代码块颜色`
 *  1.光标点击代码块
 *  2.`工具`>`主题`>`inspect tokens and colors`
 *  3.控制台将打印代码块规则
 *  4.复制到Settings.json的rules规则中即可自定义代码块颜色  
    ![在这里插入图片描述][acaccd391793462e85dc3b5c783fc379.png]

[7e1b95392e964176ab51a4de81026a95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/61fc1d51300f4fcebf06a2e745e391b3.png
[acaccd391793462e85dc3b5c783fc379.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ac8dc29c416549cdb3e3027920d4acfa.png