关于
本人是一名在校的计算机的大学生。目前是大三,由于这一年的课程比较少,没课的时间都在宿舍写代码。
常用的IDE和编辑器都是以黑色为主色调的主题,就感觉还挺酷的。像是周末基本上10个小时对着电脑屏幕,眼睛确实有点受不了。花了几天时间把自己用的IDE和编辑器的颜色都换成护眼色
于是乎在vs code的插件市场逛了半天没有类似的护眼主题,基本以黑色为主的“酷炫”风,于是就决定自己做一个。
修改的过程中发现vs code的颜色自定义的程度真的非常的高,几乎你能看到的地方颜色都可以自定义。
先放上最终效果
代码:
"workbench.colorCustomizations": {
"editorGroupHeader.tabsBackground": "#FFFAE8", // 标题栏未使用的地方
"editorLineNumber.foreground": "#9F9371", //代码行号颜色
"editor.lineHighlightBackground": "#E8DFC4", //代码选中高亮颜色
"editor.selectionBackground": "#BCD68D",
"editor.background": "#FFFAE8",
"editorIndentGuide.background": "#cecdc2", //代码对齐线颜色
//标题栏颜色设置
"titleBar.activeBackground": "#fffef9",
"titleBar.inactiveBackground": "#fffef9", //失去焦点时titlebar颜色
//活动栏颜色
"activityBar.background": "#FFFAE8",
"activityBar.activeBorder": "#41A863",
//选项卡颜色设置
"tab.activeModifiedBorder": "#41A863",
"tab.hoverBackground": "#daeace",
"tab.border": "#fffae8",
"tab.activeBackground": "#41A863",
"tab.activeForeground": "#ffffff",
"tab.inactiveBackground": "#fffae8",
"tab.inactiveForeground": "#41A863",
//侧边栏颜色设置
"sideBarSectionHeader.background": "#FFFAE8",
"sideBar.background": "#FFFAE8",
"sideBarSectionHeader.foreground": "#AB7E05",
"sideBar.border": "#d8ca9e",
"sideBar.foreground": "#46433c",
"sideBarTitle.foreground": "#46433c",
//底部状态栏颜色设置
"statusBar.background": "#fffdf4",
//滚动条颜色
"scrollbarSlider.background": "#cfb56a",
"scrollbarSlider.hoverBackground": "#cfb56a",
"scrollbarSlider.activeBackground": "#cfb56a",
//终端窗口面板颜色设置
"panel.background": "#fffcf3",
"panel.border": "#d8ca9e",
//弹出小窗口:选项设置提示窗口,源代码补全窗口
"editorWidget.background": "#BCD68D", // 弹出小窗口的背景
"editorSuggestWidget.selectedBackground": "#e8dfc4", //代码提示选中行高亮
"list.hoverBackground": "#e8dfc4", // 鼠标所在行的颜色
"editorWidget.border": "#BCD68D", // 弹出小窗口的边框
"list.activeSelectionBackground": "#41A863", //侧边栏选中高亮
"list.inactiveSelectionBackground": "#d8ca9e" //侧边栏选中未获得焦点颜色
},
"editor.fontSize": 15,
我是模仿HBuilderX的绿柔主题做的这个vs code主题,为了达到和HBuilderX一样的效果,我用macOS自带的数码测色剂一个一个去取色。
关于字体颜色我是用Slack Theme主题的颜色
使用方法:
windows: control+shift+P
macOS:cmd+shift+P
选择Open Settings(JSON)然后将代码复制进去
DIY
如果想要修改或自己定制自己的主题也可以,提供参数方便各位修改
图 示 | 参数名 | 作用 |
---|---|---|
1 | activityBar.foreground | 活动栏前景色(例如用于图标) |
2 | activityBar.background | 活动栏背景色 |
3 | sideBarSectionHeader.background | 侧边栏节标题的背景颜色 |
4 | sideBar.foreground | 侧边栏前景色 |
5 | sideBar.background | 侧边栏背景色 |
6 | tab.inactiveForeground | 活动组中非活动选项卡的前景色 |
7 | tab.inactiveBackground | 非活动选项卡的背景色 |
8 | tab.activeForeground | 活动组中活动选项卡的前景色 |
9 | tab.activeBackground | 活动选项卡的背景色 |
10 | editorLineNumber.foreground | 编辑器行号颜色 |
11 | editorGutter.background | 编辑器导航线的背景色,导航线包括边缘符号和行号 |
12 | editor.background | 编辑器背景颜色 |
13 | editor.foreground | 编辑器默认前景色 |
14 | editorCursor.foreground | 编辑器光标颜色 |
15 | editor.lineHighlightBackground | 光标所在行高亮文本的背景颜色 |
16 | editorBracketMatch.background | 匹配括号的背景色 |
17 | statusBar.background | 标准状态栏背景色 |
17 | statusBar.noFolderBackground | 没有打开文件夹时状态栏的背景色 |
17 | statusBar.debuggingBackground | 调试程序时状态栏的背景色 |
editor.findMatchBackground | 当前搜索匹配项的颜色 | |
editor.findMatchHighlightBackground | 其他搜索匹配项的颜色 | |
editor.selectionBackground | 编辑器所选内容的颜色 | |
editor.selectionHighlightBackground | 与所选内容具有相同内容的区域颜色 | |
editor.rangeHighlightBackground | 突出显示范围的背景颜色,例如 "Quick Open" 和“查找”功能 |
我知道护眼主题可能需求不是特别大,但是我还是希望大家能够保护好自己的眼睛
黑色确实挺酷,很有“极客”的感觉,但眼睛对程序员来说真的很重要,外观的炫酷远远没有实用来的重要。