讲师中心 微信公众号

工具推荐

视频效率加速
立刻MV
立刻MV

低成本歌曲 MV、视频生成

剧云
剧云

中文短剧剧本制作平台

AniShort
AniShort

AI短剧协同制作平台

updream

一键生成高质量推广成片

vscode自定义主题 _ VSCode自定义主题的颜色方案与theme模板创建教程

星枫姑娘_9188

星枫姑娘_9188

发布时间:2026-04-04 16:41:37

|

620人浏览过

|

来源于php中文网

原创

VSCode自定义主题需同时配置colors(UI控件色)和tokenColors(语法高亮)两个顶层字段,缺一不可;colors用预定义color ID,tokenColors用TextMate scope并支持透明度;通过Developer: Inspect Editor Tokens and Scopes精准获取scope;package.json中uiTheme只能设为vs-dark或vs。

vscode自定义主题 _ vscode自定义主题的颜色方案与theme模板创建教程

VSCode 自定义主题不是改改 workbench.colorCustomizations 就能搞定的——它分两层:一层是 UI 控件色(侧边栏、标题栏、按钮等),另一层是代码语法高亮(textMateRules)。只动其中一层,主题会看起来“怪怪的”,比如背景对了但括号颜色还是默认蓝。

theme 文件必须包含 tokenColors 和 colors 两个顶层字段

很多人新建 .json 主题文件后只填 colors,结果语法高亮完全没变。VSCode 的主题系统强制要求同时提供:colors 控制 UI 元素(如 editor.background、activityBar.foreground),tokenColors 控制代码着色(如 comment、keyword、string)。缺一不可,否则 VSCode 会静默忽略整个主题。

实操建议:

  • colors 字段值是纯对象,键名必须是 VSCode 预定义的 color ID(如 editorLineNumber.foreground),不能自创;查完整列表请打开命令面板 → Developer: Generate Color Theme From Current Settings
  • tokenColors 是数组,每项含 name(仅注释用)、scope(TextMate 作用域,如 support.function.builtin)、settings(含 foreground、background、fontStyle)
  • 别直接写十六进制色值,用 #RRGGBBAA 格式(带 alpha),否则透明度失效;fontStyle 只接受 "italic"、"bold"、"underline" 或空字符串,不支持组合写法如 "bold italic"

如何精准定位某个语法元素的 TextMate scope

想改函数名颜色,但不知道该配哪个 scope?靠猜或搜文档效率极低。正确做法是用 VSCode 内置诊断工具:

把光标停在目标代码上(比如一个 console.log() 中的 log),按 Ctrl+Shift+P(macOS 为 Cmd+Shift+P),输入并运行 Developer: Inspect Editor Tokens and Scopes。面板里会显示当前 token 的完整 scope 链(如 support.function.console.js),优先用最具体的那一项。

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

注意点:

  • 不同语言插件注册的 scope 不同,JavaScript 的 function 和 Python 的 function scope 完全不一样;不要跨语言复用 scope
  • scope 匹配是“从左到右最长前缀匹配”,所以 support.function 会覆盖更宽泛的 support,但不会影响 entity.name.function
  • 如果 Inspect 工具显示多个 scope,选顶部第一个(最精确),避免误配全局规则

package.json 里声明 theme 时 uiTheme 必须设为 vs-dark 或 vs

即使你做的主题是浅色系,package.json 中的 contributes.themes.uiTheme 字段也不能写 vs-light 或留空。VSCode 目前只认两个合法值:vs-dark(深色 UI)、vs(浅色 UI)。填错会导致主题安装后无法启用,控制台报错 Invalid uiTheme value in theme contribution。

这个字段只决定主题启用时 VSCode 是否自动切换 UI 模式(比如标题栏、侧边栏底色),不影响你实际在 colors 里写的值。也就是说:你可以用 uiTheme: "vs-dark",但把 editor.background 设成 "#ffffff",UI 仍是深色模式框架,编辑器区域却白得刺眼——这是允许的,也是常见做法。

其他关键配置项:

  • path 必须指向你的 .json 主题文件,路径相对于 package.json 所在目录,例如 "./themes/my-theme-color-theme.json"
  • label 是用户在「颜色主题」列表里看到的名字,别含空格或特殊字符,否则某些旧版 VSCode 会加载失败
  • 发布前务必删掉 package.json 中的 preview 字段(如有),它已废弃且会阻止主题被识别

真正难的不是写 JSON,而是保持 colors 和 tokenColors 的视觉一致性——比如注释灰度要和侧边栏 inactive 状态的灰度协调,字符串颜色要在多种背景(浅/深/高对比度)下都可读。多数人卡在这一步,反复调色却总觉得“差点意思”,其实是因为没先定好基础色板,而是东一处西一处地修。

热门AI工具

更多
Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2335

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3842

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1276

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4479

2025.09.10

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

7519

2023.08.02

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

15486

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

1805

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

4357

2023.12.21

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

20

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn