VS Code主题设置（美化VS Code）（主题+背景+图标+特效+字体）

已于 2024-03-09 18:47:30 修改
阅读量6.5w 收藏 180
点赞数 80
分类专栏： 常看内容 文章标签： 前端 vscode
于 2024-02-13 17:41:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53785610/article/details/136106853
版权
本文详细介绍了如何在VSCode中切换整体和文件图标主题，设置背景图案，应用字体特效，以及下载和配置FiraCode字体。还包括了各种主题和效果的展示，以及字体下载和安装的步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

切换整体主题（整体主题）

切换文件图标主题              

设置VS Code背景图案

字体特效 + 连击特效

字体设置

主题的具体效果放在了文章末尾，这篇文章后续也会进行更新

———————————————————————————————————————————

切换整体主题（整体主题）

        1.VS Code内置主题（快捷键：Ctrl+K ，Ctrl+T）

                1.VS Code左上角点击文件

                

                2.选择首选项-->主题-->颜色主题

                

        2.扩展主题

                1.左侧工具栏，点击扩展

                

                2.搜索栏搜索自己想要的主题后点击安装就行
                3.一些主题

                        Material Theme

                        Dracula Official

                        One Dark Pro

                        Field Lights Theme

                        Panda Syntax

                        Atom One Dark

                        Nord

                        Tokyo Night

                        Tiny Light

———————————————————————————————————————————

切换文件图标主题

        1.VS Code内置主题（快捷键：Ctrl+K ，Ctrl+T）

                1.VS Code左上角点击文件

                

                2.选择首选项-->主题-->文件图标主题

                

        2.扩展主题

                1.左侧工具栏，点击扩展

                

                2.搜索栏搜索自己想要的主题后点击安装就行
                3.一些主题                   

                        Material Icon Theme

———————————————————————————————————————————

设置VS Code背景图案

        1.左侧工具栏，点击扩展

          

        2.搜索background下载

        3.VS Code左上角点击文件-->首选项-->设置                                                                    

        4.搜素background并点击

        

        5.点击添加项，写入路径

                如果是自己电脑的图片，则输入

file:/// + 文件路径
例file:///C:/Users/DELL/Desktop/14.png

        

        6.修改透明度

                opacity只要不是1就行，0.1~0.5直接就好

        

        7.修改图片大小

                修改background-size就行，把auto改成"100% 100%"啥的

                第一个为宽度，第二个为高度

        8.以上为代码块背景，下面是全屏背景设置

"background.fullscreen": {
        "images": ["刚才的路径"], 
        "opacity": 0.91, // 0.85 ~ 0.95 
        "size": "cover", 
        "position": "center", 
        "interval": 0 
    }

                这段代码复制进去就行

        

———————————————————————————————————————————

字体特效 + 连击特效

        1.插件搜索Power Mode

        2.启动插件

                设置搜索powermode

                

        3.调字体特效 

        

        4. 取消抖动

        

        5.调节连击时间

                （和自动保存有冲突）

        

———————————————————————————————————————————

字体设置

        1.下载字体（这里仅附上路径，具体方法在文末）

                https://github.com/tonsky/FiraCode

        2.设置字体

                1.打开设置-->文本编辑器-->字体

                

                2.添加刚才下载的字体

                

                3.设置连体字

                         比如，!=会被自动缩写为≠，=>会被缩写为⇒

                

                        打开settings.json

                        找到editor.fontLigatures，改成true就行

"editor.fontLigatures": true

———————————————————————————————————————————

效果

        默认主题（太多了，仅展示几个）

                现代浅色 Default Light Modern

                Quiet Light

                Solarized Light

                红色 Red

                深色+ Default Dark+

        Material Theme（太多了，仅展示几个）

                Material Theme Darker

                Material Theme Deepforest

                Material Theme Ocean

                Material Theme Palenight

        Dracula Official

        One Dark Pro

        Field Lights Theme

        Panda Syntax

        Atom One Dark

        Nord

        Tokyo Night

        Tiny Light

———————————————————————————————————————————

        默认主题

                Seti

                

        Material Icon Theme

        

        Field Lights        （Field Lights Theme）

        

———————————————————————————————————————————

        背景图效果（半屏）

        背景图效果（全屏）

其他

        字体下载教程

                https://github.com/tonsky/FiraCode        （这个的）（Windows端）

                1.打开后下划找到

                直接下载就行

                2.打开下载的文件夹，找到ttf文件夹解压缩

                

                3.打开后安装里面的所有文件就行（全选，鼠标右键安装）

                

ctrl +        放大

ctrl -        缩小

八个大幅提升开发效率的VS Code主题
leyang0910的博客
02-02 4127
在 Visual Studio Code 中，可通过安装扩展来自定义编辑器主题。主题通常分为三种类型：暗色主题、明亮主题和高对比度主题。其中暗色模式对眼睛更加舒适，本文重点介绍8种优秀的暗色模式主题，并在文章结尾提供随 VSCode 一起的快捷键供大家参考使用。
2024年最受欢迎的 19 个 VS Code 主题排行榜
猫头虎技术团队：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作+：Libin9iOak ，万粉变现+：CSDNWF，猫头虎承诺每年免费为100名C站创作者做账号流量诊断服务！全网搜：猫头虎技术团队，点击文章底部名片或直接私信我一切皆可谈，快找虎哥！
04-02 3万+
2024年，微软的VS Code依然是开发者的宠儿，凭借其丰富的扩展和个性化的主题设置，成为了编程界的明星产品。在众多VS Code主题中，有19个因其独特的设计和舒适的色彩搭配脱颖而出，成为了大家的热门选择。比如说排名第13的Noctis主题，以其低调而不失个性的色彩搭配，赢得了无数开发者的心。这些主题不仅仅让你的编程环境变得更加个性化，更重要的是，它们能够提升你的编程效率，减少长时间编码所带来的视觉疲劳。推荐使用 13： Noctis序号主题名称风格特点0Fleet Dark。
vs背景主题颜色字体设置
11-09
两款比较好的vs背景主题颜色设置，黑色主题背景，字体颜色优美，看上去很舒服，你值得拥有
VS Code怎么换颜色
weixin_48884558的博客
04-15 3544
"activityBar.background": "#FFFFFF" // 活动栏纯白。"editor.background": "#FFFFFF", // 编辑器背景纯白。"statusBar.background": "#FFFFFF", // 状态栏纯白。"sideBar.background": "#FFFFFF", // 侧边栏纯白。在 VS Code 中，你可以通过修改主题或自定义编辑器颜色来将界面改为白色。：安装浅色主题扩展（如 One Light Pro）。切换到你安装的主题。
vscode 更改主题颜色
josiecici的博客
06-19 2609
在vscode安装程序内找到以下的json配置 修改保存过后重新打开即可 D:\VScode\Microsoft VS Code\resources\app\extensions\theme-defaults\themes
好看的vscode，cursor，trae深色主题，适合可爱的女孩子们
shadow_yi_0416的博客
01-17 4189
好看的vscode主题，收藏起来吧
VSCode 主题设置
最新发布
qq_25502783的博客
04-30 665
VSCode 主题设置允许我们根据个人偏好和工作环境自定义 Visual Studio Code 的用户界面配色。一个主题不仅会影响 VS Code 的用户界面元素，还会影响代码编辑器的高亮配色。
VS Code主题设置
微小冷的学习笔记
11-22 4640
VS Code默认提供了浅色、深色、现代浅色、现代深色等主题，其中比较有特色的是浅色高对比度，感觉喜欢的人会很喜欢。
VS Code 主题配置
Gblfy_Blog
10-16 501
ctrl+shirt+p 搜索settings.json替换为下面内容即可 { "workbench.iconTheme": "vscode-icons", "vsicons.dontShowNewVersionMessage": true, "editor.fontSize": 18, "editor.formatOnSave": true, // #每次保存的时候自动格式化 "editor.codeActionsOnSave": { // #每次保存的时候将代码按
开发工具 - 设置vs code主题
不只会拍照的程序猿
07-28 2458
不可否认，良好的界面风格能给程序员带来更好的软件体验。 对于小编这种颜值至上的人来说，一个高颜值的软件会让人心情愉悦，编写代码效率提高。这也是VS code和Source Insight软件的对比优势之一。...
修改Visual Studio Code编辑器的主题和代码颜色
qq_37944726的博客
04-16 6万+
怎么自定义Visual Studio Code编辑器的代码颜色** 摘要：自定义Visual Studio Code（VSCode）的代码颜色 在VS Code 的左下角，点击设置。 打开设置后，在搜索栏搜索关键字：主题。 搜索结果显示有许多个在setting.json中编辑，任意点开一个，即可编辑代码的颜色。 在文件setting.json的代码后面，插入相应的代码，然后保存。 代码如下： // 自定义的颜色 "editor.tokenColorCustomizations":
VS 经典主题设置 （5个黑色、灰色、藏蓝色及vs2010黑色主题）
03-13
vs2008 vs2010 vs2012 黑色主题 藏蓝色主题 设置 直接在vs菜单中选择：工具->导入设置，并点击浏览按钮，选择解压缩的文件即可。 解压缩后，有5个主题文件。选择自己最喜欢的。
vs一些主题背景颜色设置
11-06
提供多种代码颜色设置，其中款式总有一款适合你，各种颜色的都有
vs2010完美主题设置
09-02
vs2010完美主题设置，最适合程序员的主题设置，护眼模式，让你码代码不会那么刺眼疲劳了，背景全黑，关键字清晰可见
vscode自定义theme，护眼java主题
11-13
绿色活动栏，纯黑代码背景更加护眼，绿色高亮关键字，错误提醒黄色波浪线更加醒目和护眼 加压后，将压缩包内的文件夹拷贝到vscode安装目录-->resources-->app-->extensions内，在vscode中设置-->颜色主题-->Eric Dark
jquery圆形气泡导航特效.zip
07-04
最后，`fold-sw.png`、`pageStrip.png`、`code.png`和`fold.png`是图片资源，可能用作气泡的背景图像，或者在某些交互效果中作为图标的来源。例如，`fold-sw.png`和`fold.png`可能分别代表展开和折叠的状态，`...
Hexo搭建个人博客系列【七】- Butterfly主题使用及美化
viman3344的专栏
07-26 1834
是基于的的基础上进行开发的，当前版本是v4.13.0。主题官网：https://github.com/jerryc127/hexo-theme-butterfly。
快速搭建博客：美化主题
flunggg的博客
12-29 3819
文章目录前提1. 添加博客图标2. 鼠标点击特效（二选一）2.1 红心特效2.2 爆炸烟花3. 设置头像4. 侧边栏社交小图标设置5. 文章末尾的标签图标修改6. 访问量统计7. 添加站内搜索8. 启动阅读更多按钮9. 文章顶置（二选一，看看哪种简单）9.1 方法一9.2 方法二10. 在文章底部增加版权信息10.1 方式一10.2 方式二（比较麻烦，但是好看）11. 添加打赏12. 文章加密访...
Butterfly-蝴蝶-主题优化、美化-Lete乐特
热门推荐
乐特的博客
06-11 29万+
前言 本片文章涉及到修改源码，如果你要升级主题的话，你看到这里可以关闭本文章了。 本文所做的优化是我自己hexo init后，去Github上克隆Butterfly主题的稳定版，一步步在原主题基础上修改的 保证了小白根据本片文章一步步操作，能够和我博客一样的效果 如果你不想跟随下文一步步操作的话可以使用我优化好的：https://github.com/lete114/Hexo-themes-Butterfly-Lete 喜欢的话可以留下你的⭐Star 修改头部导航栏 修改前 # Main menu n
VScode 字体
03-22
<think>好的，用户想知道如何在VSCode中修改或自定义字体。首先，我需要回忆一下相关的步骤，并查看提供的引用资料来确保准确。 根据引用[2]，用户需要知道字体的准确名称才能进行设置。这可以通过访问系统的Fonts文件夹或者使用工具查找。引用[3]提到在settings.json中添加字体名称，例如"Fira code"，并启用连字功能。引用[4]则指出可以在设置中调整字体大小和主题颜色，而引用[1]提到了修改文本颜色的方法，虽然用户主要关注字体，但可能相关。 首先，用户可能需要通过图形界面或直接编辑settings.json来设置字体。图形界面比较简单：打开设置，搜索“font”，然后找到字体相关的选项。但直接编辑settings.json更灵活，可以同时调整多个参数，比如字体家族、大小和连字。 然后，确保用户正确安装了所需的字体，否则设置可能无效。引用[2]和[3]都提到需要安装字体文件，并找到准确名称。比如，安装Fira Code后，在设置中使用其名称。 可能需要注意的常见问题包括：字体名称拼写错误、未安装字体、或者设置语法错误。需要提醒用户检查这些点。此外，引用[4]提到字体大小的设置位置，用户可能需要调整大小，所以应该包括这部分步骤。 最后，生成相关问题时要覆盖扩展设置、颜色调整、多字体配置和重置默认值，这些都与主题相关，帮助用户进一步自定义环境。</think>### 如何在 VSCode 中修改或自定义字体 #### 方法 1：通过图形界面设置 1. **打开 VSCode 设置** - Windows/Linux: `Ctrl + ,` - macOS: `Cmd + ,` 2. **搜索“字体”相关选项** - 在搜索栏输入 `font`，找到以下关键设置： - `Editor: Font Family`：输入字体名称（需准确，如 `Fira Code`）[^3] - `Editor: Font Size`：调整字体大小（如 `14`）[^4] 3. **保存生效** - 修改后自动保存，编辑器界面即时更新。 #### 方法 2：直接编辑 `settings.json` 1. **打开配置文件** - 按下 `Ctrl + Shift + P`，输入 `Preferences: Open User Settings (JSON)`。 2. **添加字体配置** ```json { "editor.fontFamily": "Fira Code, Consolas, monospace", // 字体优先级从前往后 "editor.fontSize": 14, // 字体大小 "editor.fontLigatures": true // 启用连字效果（需字体支持） } ``` - **注意**：字体名称需与系统安装的名称完全一致，可通过系统 `Fonts` 文件夹或工具（如 `Everything`）查询[^2]。 3. **重启 VSCode** - 部分配置需重启后生效。 #### 验证字体是否生效 - 若字体未生效，检查以下问题： 1. 字体名称拼写错误（如空格、大小写）。 2. 字体未正确安装（需双击 `.ttf` 文件安装）[^3]。 3. 配置语法错误（如 JSON 格式逗号缺失）。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博丽七七

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值