分享30款好看的VSCode主题,值得收藏!

在编程的世界中,我们常常会使用到各种不同的编辑器,而其中就包括了微软推出的 Visual Studio Code 编辑器,也被称为 VSCode。

作为一个开源代码编辑器,VSCode 具备轻量、高效的特点,同时也有非常强大的扩展功能,因此广受开发者的喜爱。而在 VSCode 中,主题则是让人最为关注的一部分,因为一个好的主题不仅能让人的代码更加清晰易读,同时也能够给人带来愉悦的视觉体验。

本文将会为大家介绍 30 款好看的 VSCode 主题,让你在使用 VSCode 的时候能够有更多更好的选择。

1. One Dark Pro

One Dark Pro 主题原本是 Atom 编辑器中的主题,但也被移植到了 VSCode 中。它所提供的配色方案十分简洁且易于辨识,同时在 UI 设计上也比较出色,为开发者提供了更好的使用体验。

主题预览

![One Dark Pro 主题预览图](https://github.com/zhuangbiaowei/one-dark-pro/raw/master/images/example.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "One Dark Pro";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "One Dark Pro" 即可使用该主题。

2. Material Theme

Material Theme 是一个基于 Google Material 设计风格的主题,具有非常强的色彩和渐变效果,同时 UI 设计也非常出色,可以为开发者带来愉悦的使用体验。

主题预览

![Material Theme 主题预览图](https://raw.githubusercontent.com/material-theme/vsc-material-theme/master/screenshots/vsc-material-theme-main.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Material Theme";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Material Theme" 即可使用该主题。

3. Dracula

Dracula 是一个流行的主题风格,具有深色调的配色方案,并且 UI 设计也非常出色,可以为开发者带来更好的使用体验。

主题预览

![Dracula 主题预览图](https://cdn-images-1.medium.com/max/1600/1*AavzTWjfBvySAE9r4vWRtg.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Dracula Official";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Dracula" 即可使用该主题。

4. Monokai Pro

Monokai Pro 是一个经典的配色方案,相信许多开发者都对它十分熟悉。该主题在 VSCode 中也有非常完整的支持,不仅提供了经典的 Monokai 配色模式,同时还提供了其他多种配色方案。

主题预览

![Monokai Pro 主题预览图](https://www.monokai.pro/assets/img/editor/basic-glance.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Monokai Pro";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Monokai Pro" 即可使用该主题。

5. Cobalt2

Cobalt2 是一款非常经典的主题风格,是由 Wes Bos 所创作并分享的,并且在 VSCode 中也有非常完整的支持。

主题预览

![Cobalt2 主题预览图](https://wes.io/content/images/2015/04/Cobalt2-Theme-Macbook.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Cobalt2";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Cobalt2" 即可使用该主题。

6. Night Owl

Night Owl 是一款非常适合着重阅读代码的主题,它利用了不同的色彩来帮助开发者更好地理解代码。

主题预览

![Night Owl 主题预览图](https://raw.githubusercontent.com/sdras/night-owl-vscode-theme/master/images/night-owl-preview.jpeg)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Night Owl";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Night Owl" 即可使用该主题。

7. Ayu

Ayu 主题是一款非常清新的主题,以及时的色彩搭配为开发者带来了更好的使用体验,同时 UI 设计也非常出色。

主题预览

![Ayu 主题预览图](https://i.imgur.com/tOapvA7.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Ayu";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Ayu" 即可使用该主题。

8. Shades of Purple

Shades of Purple 是一款非常具有吸引力的主题,色调较为复杂,但是配色方案十分出色,适合对不同类型代码进行着色。

主题预览

![Shades of Purple 主题预览图](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/shades-of-purple.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Shades of Purple";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Shades of Purple" 即可使用该主题。

9. Nord

Nord 主题是一款非常流行的配色方案,以蓝色调为主,具有很高的色彩对比度,在代码着色上也表现出色。

主题预览

![Nord 主题预览图](https://raw.githubusercontent.com/arcticicestudio/nord-visual-studio-code/master/assets/nord-visual-studio-code-v1.9.0.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Nord";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Nord" 即可使用该主题。

10. Atom One Dark

Atom One Dark 主题是一个非常流行的主题,它提供了灰暗的配色方案和豪华的 UI 设计,让开发者有更好的使用体验。

主题预览

![Atom One Dark 主题预览图](https://raw.githubusercontent.com/akamud/vscode-theme-onedark/master/images/screenshot.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "One Dark Pro";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Atom One Dark" 即可使用该主题。

11. Gruvbox

Gruvbox 是一款基于经典 Vim 配置的主题,以黄色和棕色为主调,以及独特的配色方案,为开发者带来更好的使用体验。

主题预览

![Gruvbox 主题预览图](https://camo.githubusercontent.com/5fa2e33dacd309ee25e6ad98b661c8797d39440f/68747470733a2f2f7777772e76697375616c7374616e646172642e636f6d2f626c6f672f67727576626f782f707265766965772e706e67)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Gruvbox";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Gruvbox" 即可使用该主题。

12. Solarized Light

Solarized Light 是一款非常出色的主题,以优雅的低饱和度的配色方案为基础,并且 UI 设计也非常出色,给开发者带来更好的使用体验。

主题预览

![Solarized Light 主题预览图](https://img-blog.csdn.net/20180513165231605?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p1b24wMzYy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/50|watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p1b24wMzYy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/50)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "Solarized Light";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "Solarized Light" 即可使用该主题。

13. SynthWave

SynthWave 是一款具有 80 年代复古风格的主题,配色和 UI 设计都非常出色,为开发者带来了很好的视觉体验。

主题预览

![SynthWave 主题预览图](https://raw.githubusercontent.com/robb0wen/synthwave-vscode/master/assets/screenshot.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "SynthWave '84";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "SynthWave '84" 即可使用该主题。

14. HailStorm

HailStorm 是一款诡异的配色方案,具有暗色调和以 blue 色为主,同时也具有非常鲜明的 UI 设计,适合对大型项目进行开发。

主题预览

![HailStorm 主题预览图](https://raw.githubusercontent.com/mallowigi/hailstorm-vscode/master/screenshots/print.png)

下载及使用方式

该主题能够通过 VSCode 内置的扩展市场下载,具体步骤如下:

1. 打开 VSCode 编辑器,并进入扩展市场;

2. 在搜索框中输入 "HailStorm";

3. 点击 "安装" 按钮进行下载;

4. 下载完成后,在 "文件 -> 首选项 -> 颜色主题" 中选择 "HailStorm" 即可使用该主题。

15. Snazzy

Snazzy 是一款相对较为清新的主题,以灰暗的配色系为主,UI 设计也非常出色,适合对大型项目