HBuilderx修改主题色-为css属性名与值添加颜色，改变编辑器背景颜色等

永远不会太晚

已于 2022-04-18 21:54:32 修改

阅读量8.5k

点赞数 8

分类专栏： HBuilderX 文章标签：前端 HBuilderX

于 2022-04-18 21:50:27 首次发布

本文链接：https://blog.csdn.net/qq_42611074/article/details/124260293

版权

HBuilderX 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在HBuilderX中更改编辑器的主题颜色，包括侧边栏背景、编辑区背景以及代码块颜色。通过设置工作台颜色自定义和编辑器标记颜色自定义，你可以根据个人喜好在Default、Monokai和AtomOneDark三种主题基础上调整颜色配置。此外，还提供了设置代码块颜色的具体步骤，帮助你打造个性化的开发环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hbuilderx主题设置

效果

在这里插入图片描述

步骤

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

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

"workbench.colorCustomizations": {
   //    "[Default]": {// 绿柔主题
    //        "sideBar.background":"#faf6e6", // 项目管理器背景颜色
    //        "editor.background":"#faf6e6" // 编辑区域背景颜色
    //    },
    //    "[Monokai]": {// 酷黑主题
    //        "toolBar.background": "#272822", 
    //        "sideBar.background":"#272822" 
    //    },
    "[Atom One Dark]": {
      "sideBar.background": "#212224",
      "editor.background": "#18191A" //
    }
  },
  "editor.tokenColorCustomizations": {
    //    "[Default]": {// 绿柔主题
    //        "rules": [{}]
    //    },
    //    "[Monokai]": {// 酷黑主题
    //         "rules": [{}]
    //    },
    "[Atom One Dark]": {
      "rules": [{
        "scope": [
          "support.type.property-name"
        ],
        "settings": {
          "foreground": "#9CDCFE"
        }
      }, {
        "scope": [
          "support.constant.property-value.css"
        ],
        "settings": {
          "foreground": "#B5CEA8"
        }
      }, {
        "scope": [
          "variable.other.readwrite.js",
          "variable.other.readwrite.tsx",
          "variable.other.readwrite.ts"
        ],
        "settings": {
          "foreground": "#FFD710"
        }
      }, {
        "scope": [
          "text.html.vue"
        ],
        "settings": {
          "foreground": "#61AFEF"
        }
      }, {
        "scope": [
          "string"
        ],
        "settings": {
          "foreground": "#6CD8A6"
        }
      }]
    }
  }

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

复制完的效果