Tips & Tricks

十大热门 WebStorm 主题

Read this post in other languages:

注:本文于 2023 年 9 月更新,以反映 WebStorm 2023.2 中引入的 UI 变化。

在 IDE 中,感觉舒服很重要。 幸运的是,WebStorm 定制程度高,您可以按照自己喜欢的方式对其进行配置。 配置方式之一是更改您使用的主题,这也会改变 IDE 的外观。 在这篇博文中,我们汇总了我们团队最喜欢使用的一些主题

本文提及的所有这些主题要么开箱即用,要么可以直接从 IDE 免费安装。

  1. 转到 Preferences | Plugins(偏好设置 | 插件),查找并安装要使用的主题插件。 主题会自动应用到您的 IDE。 您可以在 Search(搜索)字段中添加 /tag:Theme,将插件搜索范围缩小为只显示主题。
  2. 在任何时间要更改主题,请转到 Preferences | Appearance & Behavior | Appearance(偏好设置 | 外观与行为 | 外观),并从 Theme(主题)下拉列表中选择要使用的主题。 作为一种更好的替代方式,您也可以使用快捷键 ^` (macOS) 或 Ctrl+`(Windows、Linux)显示 Switch…(切换…)弹出窗口,然后从中选择 Theme(主题)。

内置的 WebStorm 主题

Dark

Dark 主题取代了 Darcula,后者曾经是 WebStorm 中预装的默认主题。 由于是预安装的,许多人并不打算更改它,因为他们就喜欢这样的外观。 它比 Darcula 主题稍暗,以获得更平衡的对比度。

Example of the Dark theme in WebStorm

大家喜欢它的原因:

深色发出的光线较少。 这有助于缓解眼睛压力,即使长时间注视屏幕也不会感觉累。 Dark 主题中的白色和其他颜色不如某些深色主题明亮,人们可能更喜欢这一点。 您可以在此处了解 Darcula – 我们的第一个深色主题背后的历史。

非常适用于:

  • 光线暗的环境
  • 敏感的眼睛

Light

Light 是 WebStorm 预装的另一个主题。 它与深色主题截然相反,提供更明亮的 IDE 界面。 如果您在非常明亮的环境下工作,或者同时使用其他只有浅色格式的应用程序,使用浅色主题就很有用。

Example of the Light theme in WebStorm

大家喜欢它的原因
人们喜欢在熟悉的环境下工作。 它的外观简单、经典,深受人们喜爱。

非常适用于:

  • 明亮的环境
  • 已经安装了很多其他浅色主题应用的桌面设备

Dark Purple 主题

深紫色是另一个适用于 WebStorm 的深色主题。 它为 Dark 提供了一个对比度更大的界面,并以各种红色和紫色替换蓝色和橙色。

Example of the Sark Purple theme in WebStorm

大家喜欢它的原因:

存在视觉缺陷的用户特别喜欢比 Darcula 更强的对比度。 在美学上,紫色和粉红色令人平静。 我们的很多团队成员都喜欢这个主题。

非常适用于:

  • 光线暗的环境
  • 想要高对比度颜色的人

One Dark 主题

One Dark 主题是另一个为编码精心设计的深色主题。 它的亮度低于其他深色主题,对眼睛压力更小。

Example of the One Dark theme in WebStorm

大家喜欢它的原因:

对某些人来说,褪色的深色调和对比度低的亮色更方便长时间查看。

非常适用于:

  • 光线暗的环境
  • 疲劳的眼睛

Visual Studio Code Dark Plus 主题

Visual Studio Code Dark Plus 主题基于 Visual Studio Code 的默认外观。 如果您已经习惯了 Visual Studio Code 的外观并且想在 WebStorm 中使用,此主题可以提供类似的效果。

Example of the Visual Studio Dark Pro Plus theme in WebStorm

大家喜欢它的原因:

此主题接近 VS Code 的深色主题。 它的深色更深,意味着 UI 文本与编辑器窗口之间的对比度更高。 配色方案包含比默认 Darcula 主题中的柔和色更强的颜色。

非常适用于:

  • 光线暗的环境
  • 由 VS Code 转来的用户

Monokai Pro 主题

Monokai Pro 主题是 Sublime Text 编辑器方案的改编。 它以 Monokai Pro 为基础,可以帮助用户集中注意力。 它使用特别选择的颜色浓淡度来提供无干扰的用户界面。 此主题包含六种不同的深色方案变体。

Example of the Monokai Pro theme in WebStorm

大家喜欢它的原因:

Monokai Pro 主题的设计经过深思熟虑,包含明显的颜色编码文本元素,便于您浏览代码。 通过主题包中的不同变体,您可以轻松找到想要的变体。

非常适用于:

  • 光线暗的环境
  • 审查大量代码

Vuesion 主题

Vuesion 主题的配方方案以 Vuesion 项目为基础。 它在 IDE 中植入了工程和设计的现代最佳做法, 给 IDE 带来有序、整洁的感觉。

Example of the Vuesion theme in WebStorm

大家喜欢它的原因:

Vuesion 主题尝试了一些与其他“深色”主题不同的内容。 熟悉 Vue 的人会发现该主题使用了更多的蓝绿色。 编辑器中的高亮对比鲜明,整个感觉非常 Vue 化:整洁、清新、鲜明。

非常适用于:

  • 光线暗的环境
  • 在编辑器中长时间工作

Gradianto 主题

有时,在 IDE 中加一些颜色可以改善心情。 Gradianto 主题包含一系列可在大自然中找到的渐变色,不仅提供彩色、明亮的感观,而且可以缓解眼睛的疲劳。

Example of the Gradianto theme in WebStorm

大家喜欢它的原因:

Gradianto 简单且赏心悦目。 它不像另一些深色主题那样刺眼,因为它使用彩色调而非黑色调,因此不会太亮,也不会太暗。

非常适用于:

  • 所有亮度环境
  • 敏感的眼睛

Hiberbee 主题

Hiberbee 主题提取了 Monokai 和 macOS 的精华,组合成一个超级清晰、对比鲜明的深色主题。

Example of the Hiberbee theme in WebStorm

大家喜欢它的原因:

通常,深色主题使用非常明亮的霓虹型颜色来确保文本之间对比鲜明。 Hiberbee 主题使用对比鲜明的明亮颜色,但没有像霓虹一样的色相。 配色方案也直观,某些标记、类或编码部分以互补色突出显示。

非常适用于:

  • 光线暗的环境
  • 寻求高对比非霓虹色的人

Cyan Light 主题

对于想要浅色主题但又不喜欢所有相关的明亮白色调的用户,Cyan Light 主题是完美的折衷方案。 它更偏向浅灰色而不是白色,营造出非常舒适的工作环境。

Example of the Cyan theme in WebStorm

大家喜欢它的原因:

与大多数浅色主题不同,Cyan Light 使用非白色阴影和青色调来产生对比。 版式紧凑而简单,关键字、标识符、字段和变量以深色呈现,区分巧妙,但又非常明显。

非常适用于:

  • 明亮环境
  • 敏感的眼睛

如何选择主题

选择最合适的主题不是简单地比较下载次数最多的主题的评分或外观, 而是要了解您的需求,以及您如何在 IDE 中工作。 JetBrains Marketplace 上有 250 多个主题,可能有比本文推荐的主题更适合的主题。 应考虑下面几点。

您的环境

编码环境(这里不是指开发环境)会影响您感觉最舒服的工作环境(即开发环境)。 例如,如果您喜欢在电脑屏幕的光线下工作到深夜,则使用深色主题可以缓解眼睛长时间注视屏幕的压力。

眼睛敏感度

有些人发现某些颜色看起来很费力,也有一些人则不能区分特定颜色的差异。 我们每个人都不一样。 了解您能够舒服地看几个小时的配色方案可能要进行一些试错,但一旦找到您喜欢的方案,就能找到具有这些特点的主题。

如何工作

如果您同时处理多款应用,需要从明亮的 Google 文档切换到深色主题的 IDE 编辑器,可能很快就会感觉到疲劳和头痛。 因此,找到能够完善工作流程的主题是值得的。 选择 Theme(主题)设置中的 Sync with OS(与操作系统同步)选项可以将主题与您的操作系统同步。 如果操作系统配置为根据时间切换主题,IDE 也会同时自动切换主题。

开发自己的主题

如果在 JetBrains Marketplace 中找不到想要的主题,您也可以自创主题。 我们的文档提供了创建自定义主题的详细教程。 如果您认为您的主题能够让别人获益,何不将其添加到 JetBrains Marketplace?

今天的文章就到这里了。 希望这对您有所启发,帮助您找到合适的主题来提升 IDE 体验。 如果有您非常喜欢的主题,请在评论区中告诉我们。

WebStorm 团队

本博文英文原作者:

image description

Discover more