修改VSCode编辑器的主题和代码颜色

article/2025/11/6 10:15:58

修改Visual Studio Code编辑器的主题和代码颜色

摘要:自定义Visual Studio Code(VSCode)的主题和代码颜色

在VS Code 的左下角,点击设置。
在这里插入图片描述
打开设置后,在搜索栏搜索关键字:主题。

搜索结果显示有许多个在setting.json中编辑,任意点开一个,即可编辑代码的颜色。
在这里插入图片描述
在文件setting.json的代码后面,插入相应的代码,然后保存。

在这里插入图片描述
代码如下:

    // 自定义的颜色"editor.tokenColorCustomizations": {"comments": "#55aa7f", // 注释"keywords": "#ff55ff", // 关键字"variables": "#a792e2", // 变量名 "strings": "#00ff7f", // 字符串"functions": "#ffff00", // 内置函数名"numbers": "#00eeff", // 数字"types": "#55bbff", //类定义颜色},

你会发现编辑器里的代码颜色随之改变了。

在这里插入图片描述
发现引号的颜色,还是不太喜欢,于是又找了许久资料,继续折腾。

//文本匹配规则后面的代码,会覆盖前面的颜色设置代码。

// 自定义的颜色"editor.tokenColorCustomizations": {"comments": "#55aa7f", // 注释"keywords": "#ff55ff", // 关键字"variables": "#5eccf8", // 变量名 函数的参数名 "strings": "#00ff7f", // 字符串"functions": "#ffbb00", // 自定义及内置的函数名称 如:print"numbers": "#00eeff", // 数字"types": "#55bbff", //类定义颜色//文本匹配规则"textMateRules": [//entity.name.function", //直接调用的函数//entity.name.type", //typedef定义的变量//keyword.control", //if switch break return//keyword.operator.assignment", // =等号/赋值号 |= &=//"keyword.operator.logical", //逻辑符号 && || !//"constant.character.escape", //"\r\n"\//constant.other.placeholder", //"%s %c"//punctuation.definition.comment", // // /*注释开头//constant.numeric", //数字:50 10 0x20的20部分//keyword.operator.word //and or not//"scope":"meta", //括号 函数声明的括号 调用的括号...//punctuation.separator", //冒号 逗号//punctuation.terminator", //分号//storage.modifier", //static const//string.quoted.single", //单引号字符串//string.quoted.double", //双引号字符串//string.quoted.triple", //三引号字符串//"storage.type", //void int char //"punctuation.definition.string.begin", //左双引号//"punctuation.definition.string.end", //右双引号//##########################################################################//系统内置的函数名称的颜色 如:print len {"scope": "support.function","settings": {"foreground": "#ffbb00",}},//类的名称颜色 如class abc() 中的abc{"scope": "entity.name.type", //函数和类的名称颜色"settings": {"foreground": "#14fff3",}},//类和函数的定义单词颜色 def class{"scope": "storage.type", //void int char "settings": {"foreground": "#ff00c8",}},//不知道是什么{"scope": "storage.modifier", //static const"settings": {"foreground": "#ffe600de",}},//运算符号,如 +-*/={"scope": "keyword.operator", //=等号/赋值号 |= &="settings": {"foreground": "#ff55ff",}},// 系统的控制关键词:如 if pass return f{"scope": "keyword.control", //if switch break return"settings": {"foreground": "#ff00c8","fontStyle": ""}},//逻辑符号:如 and or {"scope": "keyword.operator.logical", //逻辑符号 && || !"settings": {"foreground": "#ff00c8","fontStyle": ""}},//换行符、转义符等如 :\r \n{"scope": "constant.character.escape", //"\r\n""settings": {"foreground": "#ee5050","fontStyle": ""}},//不知道是什么{"scope": "variable.other", //结构体对象和成员等"settings": {//VSCode使用C的颜色限制,这一点比较坑"foreground": "#4f1eff", //比如Public.Delay(),颜色是一起变得"fontStyle": "" //不能单独设置Public和Delay的显示颜色} //可能因为VS Code主要用于前端,对C的支持不够完善},//函数的参数名称{"scope": "variable.parameter", //函数参数-定义阶段"settings": {"foreground": "#5eccf8","fontStyle": ""}},{"scope": "entity.name.section", //函数参数-调用阶段"settings": {"foreground": "#ff0000","fontStyle": ""}},// 左单双引号{"scope": "punctuation.definition.string.begin","settings": {"foreground": "#00ff7f","fontStyle": "bold"}},//右单双引号{"scope": "punctuation.definition.string.end","settings": {"foreground": "#00ff7f","fontStyle": "bold" //加粗}},{"scope": ["constant.other.symbol",],"settings": {"foreground": "#ff0000"}}]},

现在变成了这样子:
在这里插入图片描述
成功修改了引号的颜色。但是True、None等系统保留字还是不知道怎么修改。


http://chatgpt.dhexx.cn/article/VjeRyIcv.shtml

相关文章

VSCode C/C++ Theme主题自定义配色方案

此文针对 C/C Theme 插件内的主题进行自定义选择性优化。 文章目录 前言一、基本快捷键二、修改配色步骤1.主题的json文件2.获取代码作用域 前言 最近喜欢浅色主题,但是找了很多主题,都没有让我完全满意的,比如说很多主题的结构体成员变量、…

VSCode修改主题颜色

参考:https://jingyan.baidu.com/article/ea24bc3983f2b59b63b33144.html 步骤1:使用vscode打开一个工程,点击左下角的设置按钮。 步骤2:在弹出的列表选择“Color Theme”。 步骤3:选择后缀为“Light”的主题&#…

【宇宙最强编辑器VS Code】(二)美化VS Code(更换主题和文件图标主题、设置背景图片)

上百篇原创人工智能系列教程,从理论到实战,手把手带你掌握人工智能,点击☞这里☜进入传送门~ 1.VSCode更换主题 1.1.更换内置主题 选择文件->首选项->颜色主题进入主题设置界面,按上下箭头预览主题,按回车更换…

vscode 自定义代码主题颜色

VS Code自定义主题色 基本结构UserJSON配置格式工作台颜色配置编辑区文本颜色目录配置代码scope检查 基本结构 F1 搜索Open User Settings (JSON)打开用户设置JSON文件(以下称作UserJSON) UserJSON配置格式 //https://www.jetbrains.com/zh-cn/lp/mon…

【编辑器】VSCode界面美化,图标与主题插件大全

1、VSCode图标插件 1、vscode-icons VSCode官方出品的图标库 2、Material Icon Theme 扁平化的主题图标库,采用了 Google Material Design 风格 3、vscode-icons-mac vscode-icons-mac 的文件图标与 vscode-icons 一致,只是文件夹图标改成了 Mac 风格…

Vscode 绿色系清新主题

炎炎夏日,上班上的心浮气躁,敲代码的时候,只觉昏昏沉沉,浑浑噩噩... 给vscode换一个一个清新美好的绿色主题,充满活力和希望吧。 朋友们,收藏起来,每个季节换一个主题,打工快乐&am…

vscode美化:主题切换+背景图片设置

目录 1.主题切换 1.1 使用vscode自带的主题 1.2 使用插件 2.背景图片设置 2.1 内部配置文件设置(自定义) 2.2 安装插件-[background] 2.3 安装插件-[background-cover](推荐) 1.主题切换 1.1 使用vscode自带的主题 步骤:文件——首选…

自定义你的VSCode:主题、文件图标、快捷键、设置、schema、插件

超详细VSCode安装教程(Windows)推荐自己的专栏:分享使用VS Code的基本操作与各种技巧 请记住一点,VSCode中的一切快捷键操作都可以在控制面板中输入对应的命令来完成,并且常用命令还可以在菜单栏中找到,命…

VScode 主题字体颜色 必备插件

主题字体颜色 通过文件>首选项>设置 > 搜索workbench.settings.editor,选中json即可改成json设置 // settings.json (个人配置) {"files.associations": {"*.vue": "vue","*.wpy": "vue","*.wxm…

VScode 自定义主题颜色

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

把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;&…