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

article/2025/11/6 13:13:40

学习一个新的软件,只会基本的操作怎么能满足一个富有个性的程序猿本猿捏>-<
那必须得鼓捣起来呀,本着能自定义就绝不用默认的态度,我打算开始写今天这篇博客了~偶吼吼

一. 有趣的小插件

开始介绍主题之前,再给大家安利三个小插件,本来可以放在前一篇(👉 插件篇👈)里主讲的,
但是我觉得放在这一篇可能会更合适一点。

1.1 vscode-icons

这个插件会改变编辑器里的文件图标,比如:html,css文件的图标会替换成相应语言的logo,这是我比较稀饭的一点,简单明了。
在这里插入图片描述

1.2 Indent-Rainbow

这个插件会给你的代码缩进区域添加颜色来区分,是不是有那花里胡哨的味儿了!嘿嘿
在这里插入图片描述

1.3 Bracket Pair Colorizer

随着大家代码量的增加,难免会写到特别复杂的函数等,往往就会遇到各种括号扎堆的情况,大家都是默认的白色,傻傻分不清楚。为什么不能去成对改变括号的颜色来方便区分呢?
这就是Bracket Pair Colorizer为大家解决的问题。
在这里插入图片描述

二. 主题推荐

大家装完上边三个小东西,是不是感觉vscode变的多彩了,当然这只是今天的开胃菜,接下来才是硬东西,安装它们会彻底改变你的编辑器外观~

主题的安装,查看,卸载,切换

vscode作为一款现象级的轻量编辑器软件,它拥有非常丰富的插件资源,其中很大一部分都是设计师们贡献的主题插件~ 大家可以尝试着去美化自己的编辑器~

接下来我会说明主题的一些基本操作,方便大家使用:
安装 —— 主题也是插件,直接在软件扩展中搜索安装即可;
查看,卸载 —— 在扩展的搜索输入框内,输入 @installed ,就会列出已经安装的全部插件和主题,点击展开想要卸载的主题插件右下角的小齿轮菜单,选择卸载即可;
在这里插入图片描述
切换 —— 先按Ctrl + K 再按Ctrl + T,就会调出当前已安装的主题列表;编辑器还贴心的帮我们分类了,先是浅色主题,后面是深色主题。
在这里插入图片描述

开始安排~(五个浅色 + 五个深色)

2.1 Marerial Theme ( Lighter High Contrast )

Marerial Theme是一套主题,其中既有浅色主题,也有深色主题。一次性全都安装了,这里比较推荐其中的Lighter High Contrast,给人一种特别纯洁,白净的感觉~ 爱了爱了
在这里插入图片描述

2.2 Quiet Light

这个主色调是偏薰衣草的颜色,个人感觉很梦幻,也比较年轻活力。
在这里插入图片描述

2.3 Solarized Light

我感觉这个颜色搭配会让人觉得你很沉稳,优雅大气。也是我比较喜欢的一款浅色系。
在这里插入图片描述

2.4 Horla Light Them

这是灰色系的一款,长时间工作也比较养眼,不刺激比较温和。
在这里插入图片描述

2.5 Ayu ( Light Bordered )

这也是一套主题,这款风格和第一个Marerial Theme ( Lighter High Contrast )类似。有木有发现浅色系的主题和Indent-Rainbow的颜色缩进很搭,小清新的感觉,蛮好看的哈~
在这里插入图片描述

2.6 One Dark pro

这一款深色系的主题是大部分人都喜欢的,热度前三的存在,在很多推荐帖子中都会有它的身影~
在这里插入图片描述

2.7 Dracula Official

这款就是大名鼎鼎的 “ 吸血鬼主题 ” ,UI配色特别鲜明,个性十足!
在这里插入图片描述

2.8 Winter is Coming Theme

凛冬将至~
权力的游戏同名款,炫酷的深蓝色效果,很带感,尤其是这个阴影!
在这里插入图片描述

2.9 Marerial Theme ( Darker )

纯黑色的一款设计风格,比较纯粹,满满的高级感 >-<
在这里插入图片描述

2.10 SynthWave '84

今天标题里的花里胡哨就是给它准备的好吧。
扑面而来的赛博朋克风格,下图就是刚装上这个主题的默认效果。好像也就那样吧,没啥特殊的。
在这里插入图片描述
但你要知道它还有个隐藏设置——文字霓虹灯效果。
打开这个,你绝对会被惊艳到!
在这里插入图片描述
打开霓虹灯效果的方法也很简单:

① :ctrl + Shift + P调出命令面板:

② :输入SynthWave '84,会出现两个选项:
Disable Neon Dreams(关闭霓虹灯效果)
Enable Neon Dreams(打开霓虹灯效果)

③ :选择 Enable Neon Dreams,软件会右下角会提示你需要重启,直接重启即可;
(软件会提示你安装的文件可能已损坏,请重新安装。点击不再提示即可)
在这里插入图片描述
这些精美的主题还是需要大家自己去安装试试,总有一款适合你~
真的强推最后这个!!!
那灿烂朦胧的光晕,非亲临不可体会 >-< 够骚气,我好喜欢!!

这次的分享就到这里啦~
感谢观看,我们下篇博客见,撒由那拉


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

相关文章

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;

Inno Setup Compiler的安装和使用详解

安装&#xff1a;官网最新下载最新版 最新版不支持中文哈&#xff0c;安装的时候直接选英文就好 安装注意事项&#xff1a;在安装过程中有一个 询问是否要 安装一个加密版本的&#xff08;可根据自己的需求挑选–我就没有&#xff09; 使用&#xff1a; 1.打开应用程序进入到…

inno setup打包软件学习

目录 一 打包结果 二 示例打包脚本 三 错误解决 3.1 另一个程序正在使用此文件&#xff0c;进程无法访问 3.2 桌面图标无法修改 四 参考资料 一 打包结果 测试程序来自&#xff1a; 泽森科工 (zenustech.com) 二 示例打包脚本 使用打包软件下载地址&#xff1a; in…

InnoSetup制作安装包(EXE)

功能描述 1.666666.war为项目war包&#xff0c;666666.bat为启动war包脚本&#xff0c;通过InnoSetup将它们打包到安装包666666.exe 2.666666.exe安装包安装过程中将666666.bat注册为自启动服务&#xff0c;安装结束自动执行脚本启动项目666666.war --------------------------…

Inno Setup入门 (软件打包工具)学习笔记 (26课全)

[] : 里面的就是 段 每个段里面的是属性 AppId : 软件的APPID尽量是唯一的&#xff0c;随机生成&#xff0c;尽量不跟其他软件的ID冲突&#xff0c;这个ID安装之后是要写进系统的注册表的&#xff0c;系统在管理和卸载你的软件的时候就是通过这个ID去操作的。若相同&#xff0…

Inno Setup选择语言并写入配置文件、翻译提示信息

0.前言 制作一个支持多种语言的安装包&#xff0c;应当具备以下几种能力&#xff1a; 读取系统语言设置&#xff0c;并作为启动时的默认语言可选择安装的语言&#xff0c;随后显示对应语言的的安装提示语将选择的语言写入到配置文件&#xff0c;以供程序运行时进行判断 Inno…

inno setup 最简单的自定义界面效果

1、安装的第一个界面 2、安装进度条界面 3、完成界面 终于使用几个周末的时间做出来了一版本&#xff0c;内容有待完善&#xff0c;比如修复、更新等等的操作&#xff0c;但是如果只是单纯的安装来讲&#xff0c;已经可以使用