hbuilderX自定义主题仿vscode暗黑主题

目录

hbuilderX自定义主题仿vscode暗黑主题

效果图

设置方式(把主题代码复制进来即可)

是基于雅蓝主题自定义的 设置好后需要切换到雅蓝主题

hbuilderx保存时自动整理代码

1.首先在顶部栏,找到工具,打开设置

 2.点击旁边的编辑器设置

 3.找到保存时自动格式化,勾选即可


hbuilderX自定义主题仿vscode暗黑主题

效果图

设置方式(把主题代码复制进来即可)

是基于雅蓝主题自定义的 设置好后需要切换到雅蓝主题

"workbench.colorCustomizations": {
		"[Default]": {},
		"[Monokai]": {},
		"[Atom One Dark]": {
			"editor.background": "#1E1E1E",
			"sideBar.background": "#252526",
			"sideBarSectionHeader.background": "#263238",
			// 底部状态栏
			"statusBar.background": "#007ACC",
			"statusBar.button.hoverbackground": "#005c99",
			"statusBar.foreground": "#ffffff",
			//终端  
			"terminal.background": "#1E1E1E",
			"terminal.foreground": "#ffffff",
			"panelTitle.activeForeground": "#ffffff",
			"console.background": "#1E1E1E",
			"debug.background": "#1E1E1E",
			// 标签卡
			// "tab.Background":"#707070",  
			"editorGroupHeader.tabsBackground": "#2D2D2D", //背景颜色  
			"tab.border": "#252526", //边框颜色  
			"tab.activeBorder": "#252526", //选中时的边框颜色  
			"tab.activeBackground": "#1E1E1E",
			"tab.activeForeground": "#FFF",
			"tab.inactiveBackground": "#2D2D2D", //未选中时的背景颜色  
			"tab.inactiveForeground": "#969690",
			"tab.hoverBackground": "#3E3E3E",
			// "tab.unfocusedActiveBorder": "#546E7A"
			//标题栏
			// "titleBar.activeBackground": "#DDDDDD",
			// "titleBar.activeForeground": "#FFF",
			// "toolBar.background": "#ececec",
			"toolBar.border": "#474747",
			"toolBar.hoverBackground": "#F3f3f3",
			//列表控件  
			// "list.foreground": "#495C66", //前景颜色  
			"list.activeSelectionBackground": "#3B4040",
			"list.activeSelectionForeground": "#4690F0",
			"list.hoverBackground": "#3B4040"
		}
	}

hbuilderx保存时自动整理代码

1.首先在顶部栏,找到工具,打开设置

 2.点击旁边的编辑器设置

 3.找到保存时自动格式化,勾选即可

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了实现antd pro中的自定义动态设置暗黑模式,首先需要了解antd pro的样式结构和主题配置。 antd pro是基于Ant Design组件库的企业级中后台前端/设计解决方案,通过Ant Design的样式和组件提供了丰富的中后台页面布局和功能组件。其中,样式通过less进行管理。 要实现自定义动态设置暗黑模式,可以通过以下步骤进行操作: 1. 打开antd pro的源码目录,找到样式文件所在的目录。一般情况下,样式文件位于`src`目录下的`style`文件夹中。 2. 在样式文件夹中,通常会有主题相关的文件,如`variables.less`或者`theme.less`。这些文件存储了antd pro的主题配置。 3. 打开主题文件,查找与暗黑模式有关的配置项。根据antd pro的官方文档或者样式文件中的注释,可以找到与背景颜色、文本颜色等有关的配置项。 4. 根据需求,修改暗黑模式的配置项。例如,可以将背景颜色修改为暗色调,将文本颜色修改为亮色调。 5. 根据配置项的修改,重新编译样式文件。通常需要使用less编译工具,如lessc命令行工具或者集成开发环境中的less编译插件。 6. 编译完成后,将生成的样式文件替换antd pro项目中原有的样式文件。 7. 在antd pro的页面代码中,可以根据自定义的配置项来切换暗黑模式。例如,可以为页面增加一个按钮或者菜单项,点击该按钮或者选择该菜单项时,切换为暗黑模式。 综上所述,通过修改antd pro的样式文件中与主题相关的配置项,并在页面中进行相应的切换操作,即可实现自定义动态设置暗黑模式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值