工作中一直会用到VSCode作为生产力工具,但是目前能看到的主题插件都是比较炫酷极客的,看久了眼睛就会有点累,再加上最近眼睛状态有点不好,所以给自己的VSCode弄出了比较护眼的主题,做个记录吧。
效果如下,护眼的豆沙绿色
1. VSCode 插件市场 安装 Atom One Light Theme 主题插件
护眼主题是在Atom One Light Theme的基础上进行设置的
2. 在settings.json 文件 设置以下内容
"workbench.colorCustomizations": {
"[Atom One Light]": {
"foreground": "#519657",
"editor.background": "#c8e6c9",
"editor.lineHighlightBackground": "#dcedc8",
"editor.selectionBackground":"#f0f4c3",
"editorWidget.background": "#c8e6c9",
"editorHoverWidget.background":"#c8e6c9",
"editorHoverWidget.border":"#a5d6a7",
"editorLineNumber.foreground": "#a5d6a7",
"editorWhitespace.foreground": "#a5d6a7",
"editorIndentGuide.background": "#c8e6c9",
"editorIndentGuide.activeBackground": "#a5d6a7",
"editorSuggestWidget.background": "#c8e6c9",
"editorSuggestWidget.border":"#a5d6a7",
"editorSuggestWidget.foreground": "#338a3e",
"editorSuggestWidget.highlightForeground": "#338a3e",
"editorSuggestWidget.selectedBackground": "#a5d6a7",
"activityBar.background": "#c8e6c9",
// "activityBar.border": "#AFCFB7",
"activityBar.foreground": "#519657",
"activityBarBadge.background": "#519657",
"activityBarBadge.foreground": "#FFFFFF",
"editorLineNumber.activeForeground": "#519657",
"input.background": "#c8e6c9",
"input.border": "#c5e1a5",
"focusBorder": "#c5e1a5",
"sideBar.background": "#c8e6c9",
"sideBarSectionHeader.background": "#c8e6c9",
"tab.activeBackground": "#c8e6c9",
"tab.activeForeground": "#519657",
"tab.inactiveBackground": "#a5d6a7", //选项卡背景色
"tab.inactiveForeground": "#97b498",
"tab.border": "#a5d6a7", //tab border
"badge.background": "#519657",
"statusBar.background": "#c8e6c9",
"statusBar.foreground": "#519657",
"statusBarItem.hoverBackground": "#dcedc8",
"statusBar.noFolderBackground": "#519657",
"statusBar.debuggingBackground": "#519657",
"statusBar.debuggingForeground": "#00701a",
"debugToolBar.background": "#a5d6a7",
"editorGroupHeader.tabsBackground": "#a5d6a7",//tab背景色
"button.background": "#519657",
"button.foreground": "#FFFFFF",
"button.hoverBackground": "#519657",
"extensionButton.prominentBackground": "#3BBA54",
"extensionButton.prominentHoverBackground": "#4CC263",
"scrollbar.shadow":"#a5d6a7",
"scrollbarSlider.background":"#a5d6a7",
"scrollbarSlider.hoverBackground":"#81c784",
"scrollbarSlider.activeBackground":"#81c784",
"list.activeSelectionBackground":"#dcedc8",
"list.activeSelectionForeground":"#519657",
"list.inactiveSelectionBackground":"#dcedc8",
"list.inactiveSelectionForeground":"#519657",
"list.hoverBackground":"#dcedc8",
"list.highlightForeground":"#dcedc8",
"gitDecoration.modifiedResourceForeground": "#00600f",
"dropdown.background":"#c8e6c9",
"dropdown.border":"#c5e1a5",
"titleBar.activeBackground": "#a5d6a7", //标题栏背景色
// "titleBar.border": "#AFCFB7",
"titleBar.activeForeground": "#519657",
"titleBar.inactiveBackground": "#c8e6c9",
"titleBar.inactiveForeground": "#519657"
},
},
"editor.tokenColorCustomizations": {
"[Atom One Light]":{
"comments": "#97b498",
"strings": "#519657",
"functions": "#7e57c2",
"keywords": "#ab47bc",
"variables": "#e57373",
"textMateRules": [
{
"name": "Comment",
"scope": [
"comment"
],
"settings": {
"foreground": "#97b498",
"fontStyle": ""
}
},
{
"name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition",
"scope": "punctuation.definition.variable.php",
"settings": {
"foreground": "#e57373"
}
}
]
}
}
OK!比较护眼的主题就做出来了,大家可以在此基础上增加自己的想法哦