vscode浅色主题使用

一款看起来舒适的主题太重要了，加上高亮的效果，开发起来格外顺心顺意。身边很多程序员都热爱暗黑色系，但我却喜欢浅色系，自己也定义了很多主题。希望大家能找到自己喜欢的主题。

如何设置主题

File -> Preferences -> Color Theme

vscode自带主题

light +

Light High Contrast

Quiet Light

安装新插件

我是不喜欢自带的主题，无功无过。

经过不断试用，我找到了这一款: 简单，色彩鲜艳，共有6个选择，我选了【Ayu Mirage Bordered】赏心悦目。

https://marketplace.visualstudio.com/items?itemName=teabyii.ayu

效果如下：

自定义主题

方式一

默认的颜色主题配置文件都位于 Microsoft VS Code\resources\app\extensions\theme-defaults\themes 目录中,

resources/app/extensions/
 \_ theme-my/
     \_ themes/
     |   \_ color-theme.json
     |_ package.json

你完全可以安照这个结构自己复刻一个新的主题

{
	"name": "theme-my-gray",
	"version": "0.1.0",
	"publisher": "my",
	"engines": { "vscode": "*" },
	"contributes": {
		"themes": [
			{
				"label": "my-gray",
				"uiTheme": "my",
				"path": "./themes/my-gray-color-theme.json"
			}
		]
	}
}

方式二

File -> Preferences -> Setting，以源码形式打开后，在再写些代码来配置

"workbench.colorCustomizations": {
  "editor.selectionBackground": "#409EFF", // 编辑器所选内容的颜色
  "editor.findMatchBackground": "#F56C6C", // 当前搜索匹配项的颜色
  "editor.findMatchHighlightBackground": "#e09a30", // 其他搜索匹配项的颜色
  "menu.selectionBackground": "#409EFF",
  "list.hoverBackground": "#409EFF", // 选中行背景色
  "editor.selectionHighlight": true,
  "list.inactiveSelectionBackground": "#ecf5ff", // 左侧打开文件背景色      
},
"editor.tokenColorCustomizations": {
    "comments": "#409EFF", // 修改注释颜色
},

官网配置项文档：https://code.visualstudio.com/api/extension-guides/color-theme

方式三

首先需要安装插件，用来生成主题。

npm install -g yo generator-code

安装完毕之后，使用下面的命令来生成扩展的基本结构：

yo code

运行上面的命令，需要你输入或者选择一些内容：

• 是否发送反馈
• 创建扩展类型，这里选择颜色主题
• 是创建新的还是导入现有的
• 主题是浅色还是深色、名称、创建者、其他用户在市场中看到的主题名等等
• 是否初始化git仓库

根据提示和自己的需要，直到提示创建成功, 再把文件themes放在方式一目录下

结束