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

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规则中即可自定义代码块颜色

复制完的效果

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

html5单击修改背景色,用获取节点的方式实现点击按钮改变标签背景颜色的问题...
跟着视频敲的,视频里的能实现,我的不行,有onclick事件,但是背景色不变html> 点击设置p标签背景色 div { width: 200px; height: 400px; border: ...
uniapp 微信小程序配置全局主题色、实现动态修改主题色
前言: 本文的实现目标是全局配置小程序的整体主题色,包括本地图标的色调.第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色:第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色 ...
elementPlus修改主题色以及皮肤设置思路
修改主题色 <el-color-picker style="margin-top:20px" v-model="systeamColor" @change ...
blr不是已知的css属性名,js判断并告知支持css属性（值）的何种情况
前言当我们想用某个css新特性时,总是会在意它的兼容性情况,或许我们会去搜索它的兼容性,哪些浏览器合适哪些不合适,在这些已知的情况下再选择是不是使用或如何使用,这是一个已知我们即将用于什么浏览器下作 ...
android更换导航背景,修改TabHost导航高度和背景颜色，tabhost背景颜色,主要是android使用...
修改TabHost导航高度和背景颜色,tabhost背景颜色,主要是android使用主要是android使用TabHost布局时.设置tabhost的导航条高度,及背景颜色private TabW ...
react+antd修改主题色
第一步:安装需要的插件 npm install react-app-rewired customize-cra babel-plugin-import less less-loader 第二步:修改p ...
blr不是已知的css属性名,css笔记
背景图片满屏显示: .mainbody{position:absolute; top:0; left:0; height:100%; width:100%; background-image:url( ...
react+antd 修改主题色
项目使用的时 react 框架和 ant design ui组件库 antd 官网中对定制主体是这样说的详见:https://ant.design/docs/react/customize-the ...
MahApps.Metro扁平化UI控件库（可修改主题色等）
一.名词解释使用MahApps.Metro扁平化UI控件库,可以使界面呈现更加美观.本文将总结MahApps.Metro的使用方法,及如何自定义修改其主题颜色等. 详细内容可参考官网:https:/ ...

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

hbuilderx主题设置

效果

步骤

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

最新文章

热门文章