VScode 自定义主题颜色

article/2025/11/6 12:21:46

vscode其实已经有很多完善且好看的主题了,但我总觉得每一个主题对我来说,都有那么一点点不够完美,比如亮色的主题,颜色就没有深色主题那么好看,对比度高。

好不容易看到一个好看的主题吧,又觉得某一部分的颜色没有那么好看。

因此,我基于【Fluffy Theme】自定义了一个自己的vscode代码主题,这里为什么要基于这个主题呢,因我个人非常喜欢粉粉嫩嫩的颜色,这个主题的颜色和我想要的主题颜色非常的接近,但仍然有一些,对我来说不够好看的地方,比如,html标签的颜色太淡了,关键字的颜色不够鲜艳等。

经过我的自定义,最后呈现了如下的效果。

 那下面就记录一下我对这个主题改造的过程。

  1. 首先,打开点击vscode的设置图标>设置

 2.在用户tab下面选择工作台>外观>记住你的主题名称(color theme下面的内容)>点击在setting.json中编辑

 3.在setting.json中搜这个"editor.tokenColorCustomizations":配置,如果没有的话,自己添加一个。

"editor.tokenColorCustomizations": {"[Fluffy Theme]": {"functions": "#f10070f5",//函数"keywords": "#00befd",//关键字"types": "#42b983",//类型定义"variables": "#9814ef",//变量"numbers": "#e77977",//数字"comments": "#beb9b9",//注释"strings": "#e72499", // 字符串的颜色,"textMateRules": []}
}

4.以上是基本配置,但我们有一些,例如html的标签的属性颜色。html标签属性名后面的等号等等,颜色要怎么设置呢。就全部都放在“textMateRules”这个数组里面。

例如,修改控制符的颜色为:#78c78e,样式为:斜体加粗,就可以像下面这样写。

"textMateRules": [
{"scope": "keyword.control",//if ,else, try 等控制符"settings": {"foreground": "#78c78e","fontStyle": "italic bold"}},
]

5.但可能每个人对自己想要设置的颜色的需求各不相同,但有时候并不知道应该改哪个属性,这也非常的简单。

比如我需要修改html标签前面的标签名的颜色,那只需要选中当前要想要设置的颜色的内容,按住ctrl + shift + p,在输入框中搜索并选择Developer Inspect Editor Token and Scopes

6.选中后,可以看到foreground里面倒数第二个,就是我们要修改的scope的名称。

7.在textMateRules数组中,加入一个元素,并将样式修改在setiing属性下面。例如:我们要把标签名称修改成这个颜色:#ee258d,并且加粗。

{"scope": "entity.name.tag",//html标签div,"settings": {"foreground": "#ee258d","fontStyle": "bold",}},

只要知道了以上的方法,那么所有的代码颜色自定义都可以修改了。

 


http://chatgpt.dhexx.cn/article/7qHhihRL.shtml

相关文章

把VScode的主题变得和idea一样

用惯了jetbrains系列软件,不太适应VScode的主题和颜色,可以通过一个插件把VScode的颜色变得和idea一样 打开VScode,搜索插件jetbrains, JetBrains Darcula Theme是暗色,Webstorm JetBrains Theme是亮色 和idea对比效果: 与些许差距…

7 款炫酷的 VSCode 主题扩展

👇👇关注后回复 “进群” ,拉你进程序员交流群👇👇 作者丨小集 来源丨小集(ID:zsxjtip) 在 VSCode 中,安装自定义主题和图标包可以彻底改变 VSCode 的外观。VSCode 有数千…

推荐几款好用的VsCode色彩主题

经常对着同一款主题,有没有想着换一拨呢? 推荐一些个人觉得比较不错的主题,可以自己选择, 所有主题可以直接在扩展商店下载,直接上主题: Gatito Theme Dark Night Owl One Monokai Syntax Pink Cat Boo t…

vscode优美的主题

如何给VS Code更换主题 Mac用户 ⌘ K 然后 ⌘ T,会显示出所有的主题列表,按上下键可修改主题,⌘ ⇧ P , 在输入框中color theme,然后回车,同样也会进入主题列表 Windows用户: Ctrl Shift P 即可进入主题列表…

【3】VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色

相关文章: 【一】tensorflow安装、常用python镜像源、tensorflow 深度学习强化学习教学 【二】tensorflow调试报错、tensorflow 深度学习强化学习教学【三】tensorboard安装、使用教学以及遇到的问题【四】超级快速pytorch安装 【1】VScode中文界面方法-------…

【vscode简单入门(四)】vscode精美UI主题推荐 (~」还你一个花里胡哨的vscode「~)

学习一个新的软件&#xff0c;只会基本的操作怎么能满足一个富有个性的程序猿本猿捏>-< 那必须得鼓捣起来呀&#xff0c;本着能自定义就绝不用默认的态度&#xff0c;我打算开始写今天这篇博客了~偶吼吼 一. 有趣的小插件 开始介绍主题之前&#xff0c;再给大家安利三个…

vscode 主题的颜色定制

颜色定制 workbench.colorCustomizations setting.json {"workbench.colorCustomizations": {"activityBar.background": "#00AA00"} }对比颜色: 对比色通常只用于高对比主题。如果设置了&#xff0c;它们会在UI元素周围添加额外的边框来增加对…

vscode如何更换主题

1.打开Vscode&#xff0c;点击“文件”-“首选项”-“颜色主题”。 (快捷键&#xff1a;先按CtrlK、再按CtrlT) 2.打开主题设置面板&#xff0c;在深色主题中点击“深色”。 3.这样就可以把主题改为“深色”这样Vscode界面就会全部显示为黑色。 参考&#xff1a;https://jingy…

VSCODE 好看的亮色系主题

搬砖那么枯燥&#xff0c;一定要在颜值高的窗口进行呀。这几年用了好多vscode主题&#xff0c;但这几个&#xff0c;真的是每次看到都会心动的主题。 很适合花里胡哨的女孩子们呀&#xff5e; 粉粉嫩嫩的&#xff1a;Cute 这款主题的特点就是&#xff1a;粉&#xff01;&…

VSCode:一个温馨不扎眼的暗色主题推荐

最下方有手把手使用方法和配置过程。 身为一个编程小白&#xff0c;我也想找一个好看的vscode主题&#xff0c;来给我提供源源不断地写代码动力&#xff0c;好让我早日成为卷王&#xff08;bushi 主题名为&#xff1a;Ayu Mirage Bordered 演示效果如下&#xff1a; 个…

2022 年最受欢迎的 19个 VS Code 主题排行榜

2022 年最受欢迎的 19 个 VS Code 主题排行榜 微软的 VS Code 凭其丰富的扩展受到众多开发者的青睐&#xff0c;俺总结了 2021 年最受欢迎的15 个 VS Code 主题&#xff08;按 VS Code 扩展商店的安装次数排名&#xff09;&#xff0c;仅供大家参考。 推荐使用 13&#xff1a…

【VSCode | 主题】推荐几个适合看 C/C++ 代码的 VSCode 主题

目录 一、概述二、主题2.1 Eva Theme2.2 Theme2.3 GitHub Theme2.4 One Monokai Theme2.5 Atom One Dark Theme2.6 Atom One Light Theme2.7 One Dark Pro2.8 Palenight Theme 总结 一、概述 从 source insight 转到 VSCode 的一个好处就是&#xff0c;VSCode有很多主题插件。本…

主题之美,排名靠前的 10 个 VSCode 主题

作者&#xff1a;Muthu Annamalai Venkatachalam 译者&#xff1a;前端小智 来源&#xff1a;dev 有梦想&#xff0c;有干货&#xff0c;微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录&#xff0c;有一线…

8个VSCode主题推荐,超好看

1. Dainty 有很多种颜色可选&#xff0c;喜欢紫色系的推荐 Andromeda (andromeda)Ardent (ardent)&#xff08;这个紫色系的最好看&#xff01;&#xff09;Ayu Mirage (ayu-mirage)City Lights (city-lights)Dark (dark-plus)等等 2. Aurora X 蓝色系&#x…

VScode 主题和打字特效配置,让你的VScode活“”起来

前言 VScode 并不是我用的第一款代码编辑器&#xff0c;在它之前我用过很多代码编辑器&#xff0c;依次的顺序我记得应该是DreamWeaver、HBuilder、Sublime、Webstorm。 为什么在用过这么多当时确实很火&#x1f525;、很主流的代码编辑器以后我会选择VScode呢&#xff1f;并且…

软件测试的方法和步骤

软件测试的两种方法 答&#xff1a;黑盒测试和白盒测试 黑盒&#xff1a;这种方法是把测试对象看做一个黑盒子&#xff0c;测试人员完全不考虑程序内部的逻辑结构和内部特性&#xff0c;只依据程序的需求规格说明书&#xff0c;检查程序的功能是否符合它的功能说明。 黑盒测…

软件测试过程与方法

软件测试过程与方法 第1单元小节测试第1单元测试课前专题测试 第2单元节内小测2.1视频小测2.2视频小测2.3小测 第2单元测试 第3单元小节测试3.1决策表测试3.2组合测试视频小测3.2小测试 单元测试第3周单元测试 第4周单元测验 会持续更新 如无更新请留言 您的留言与点赞是我最大…

软件测试用例常用七大方法

第一&#xff1a;测试用例格式包括十大特点 用例编号测试项测试标题用例属性重要级别&#xff1a;高中低预置条件测试输入操作步骤预期结果实际结果 第二&#xff1a;等价类 1&#xff0c;等价类定义 2&#xff0c;等价类划分 3&#xff0c;等价类划分规则 4&#xff0c;进行…

Inno Setup打包exe

最近在学习electron开发桌面应用,当我们打包后生成exe文件会包含这很多依赖文件和资源文件&#xff0c;如果需要复制安装是不简便的,作为客户端应用程序,使用者更希望能直接得到一个安装包&#xff0c;安装之后通过桌面快捷方式的形式去访问,所以就学习了一下如何使用Inno打包成…

inno setup 最简单打包实例

1、File>New 2、 修改成自己想要的信息 3、默认目的路径以及文件夹 4、设置输出路径以及添加打包的文件或者文件夹 5、设置快捷方式 6、设置授权文件 7、 运行效果图如下所示&#xff1a;