theme vscode 护眼_vs code 护眼设置
关于
本人是一名在校的计算机的大学生。目前是大三,由于这一年的课程比较少,没课的时间都在宿舍写代码。
常用的IDE和编辑器都是以黑色为主色调的主题,就感觉还挺酷的。像是周末基本上10个小时对着电脑屏幕,眼睛确实有点受不了。花了几天时间把自己用的IDE和编辑器的颜色都换成护眼色
于是乎在vs code的插件市场逛了半天没有类似的护眼主题,基本以黑色为主的“酷炫”风,于是就决定自己做一个。
修改的过程中发现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
vs code 搜索框
选择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" 和“查找”功能
vs code各个参数对应的区域
我知道护眼主题可能需求不是特别大,但是我还是希望大家能够保护好自己的眼睛
黑色确实挺酷,很有“极客”的感觉,但眼睛对程序员来说真的很重要,外观的炫酷远远没有实用来的重要。
theme vscode 护眼_vs code 护眼设置相关推荐
- vscode实用快捷键_VS Code常用快捷键总结
目录: 1.主命令框 2.常用快捷键 (1) 编辑器与窗口管理 (2) 代码编辑 <1> 格式调整 <2> 光标相关 <3> 重构代码 <4> 查找替换 ...
- theme vscode 护眼_VS code 豆沙绿护眼主题
一.下载亮色主题Atom One Light 二.找到settings.JSON,粘贴JSON 快捷键输入 Ctrl+Shift+p ,输入settings,选择open settings (J ...
- vscode 安装包_VS Code的下载与安装(更改插件的安装位置)
vs code下载地址 https://code.visualstudio.com/ 选择适合自己电脑系统的安装包 安装 下载完成后,双击进行安装 选择安装路径(可以选择自己的创建的安装路径,也可以选 ...
- vscode搜索文件_VS Code 新图标来临 —— 侧边栏、文件管理器、搜索、调试等区域的图标迎来全新设计...
今天(北京时间 2019 年 7 月 9 日),微软 Visual Studio Code 团队的高级设计师 Miguel Solorio 在 Twitter 上宣布了全新的图标已经来到了 VS Co ...
- vscode怎么全局搜索_VS Code 新版本发布!支持远程开发、同步设置等新特性
公众号关注 "GitHubDaily"设为 "星标",每天带你逛 GitHub!转自开源中国Visual Studio Code 1.43 版本,即 2020 ...
- vscode 插件慢_VS Code下配置LaTeX编译环境
之前一直用TeXstudio排版LaTeX,偶然发现除了latex专用编译器,像Sublime.VS Code这样的代码秃头神器也支持latex的编写.今天就来聊一聊VS Code下LaTeX的配置. ...
- vscode代码索引_VS Code:自定义代码片断(Snippets)
Snippets,代码片断.就是事先准备好的一块样板代码,通过自定义的简短的字符可以快速得到对应的样板代码.在这块代码里面可能会有几个编辑点,用户使用 tab 键或者 shift + tab 可以在这 ...
- eclipse护眼颜色和字体大小设置
♣eclipse护眼颜色和关键字颜色设置 ♣eclipse字体大小设置(包括jsp , .xml ,.java) 1.Eclipse字体大小调整: 窗口(Window)-首选项(Preference ...
- 白炽灯护眼还是led护眼效果好?专家建议孩子用这种灯光更护眼
现代社会,人们几乎离不开人造照明灯具,生活中的方方面面都需要照明,但是很多人没有注意到的是,这些照明灯具的光线对人眼影响特别大,就比如现在使用较多的台灯或室内照明顶灯,如果光源分别是白炽灯和led灯, ...
最新文章
- 前沿 | DeepMind 最新研究——神经算术逻辑单元,有必要看一下!
- 【转载】CMake 简介和 CMake 模板
- exchange邮件中继服务器搭建,使用 Exchange 2010 传输中继应用程序服务器 SMTP 通信...
- 设计模式是什么鬼(备忘录)
- 原创-WINDOWS SERVER 2008 WEB服务器安装配置
- bootstrapTable表格分页后,处理逻辑后刷新跳回第一页,没留在当前页的解决办法
- 如何通过JMX远程监控Solr?
- Jenkins Pinned Plugins(Jenkins绑定插件)
- 元分析教程 | 手把手教你使用CMA 2.0
- mp3文件太大怎么压缩变小?
- 计算机禁止安装游戏软件,如何禁止电脑安装软件_怎么禁止在电脑上安装程序 禁止电脑安装程序方法...
- Restorator软件使exe文件都不能打开,任务管理器不支持此接口
- Python中常用的四个小技巧总结
- 为什么普遍自学能力不足
- JavaScript中栈内存与堆内存分别是什么?
- SQL:查询结果升序、降序排列
- 部分win11打开应用商店出错的问题 0x80131500
- 便利vector_你好,C++!(57)9.2 vector容器是数组的最佳替代者
- (Web、触屏)微信支付功能调用以及QQ回调地址配置、以及遇到的一些坑
- 【深入浅出强化学习】2 马尔可夫决策过程