颜色和字体作为开发人员，您要处理大量的文本资源：编辑器中的源代码、搜索结果、调试信息、控制台输入和输出等。 颜色和字体样式用于格式化此文本，并帮助您一目了然地更好理解它。
WebStorm 允许您在可配置的 配色方案之间进行选择，这些方案定义了 IDE 文本中使用的颜色和字体。
颜色方案 不同于 界面主题 ，后者定义了窗口、对话框和控件的外观。
您可以使用预定义的配色方案或根据您的喜好进行自定义。 也可以共享方案。
选择配色方案按 Ctrl+Alt+S 打开设置，然后选择 编辑器 | 颜色方案。
或者，您可以在 外观与行为 | 外观 页面上选择一个方案。
请使用 方案 列表选择配色方案。
当前 界面主题的默认配色方案已在列表中标出。
点击 更改 IDE 主题 以导航至设置中的 外观与行为 | 外观 页面，您可以在该页面中配置 界面主题。
如果您安装了带有配色方案的插件，该方案将被添加到预定义方案列表中。 有关更多信息，请参阅 分享配色方案。
自定义配色方案您可以自定义预定义的配色方案，但建议您为自定义颜色和字体设置创建一个副本：
复制配色方案按 Ctrl+Alt+S 打开设置，然后选择 编辑器 | 配色方案。
请选择一个配色方案，点击 ，然后点击 复制…。
（可选）要重命名您的自定义方案，请点击 并选择 重命名…。
预定义颜色方案以粗体列出。 如果您自定义了预定义的颜色方案，它将显示为蓝色。 要将预定义的配色方案恢复为默认设置，请点击 并选择 恢复默认设置。 您无法删除预定义的配色方案。
定义自定义颜色和字体设置按 Ctrl+Alt+S 打开设置，然后选择 编辑器｜颜色方案。
此节点下页面上的设置定义了代码和 WebStorm 界面中各种元素的颜色。 例如， 常规 页面定义了基本编辑器颜色，例如边距、行号、错误、警告、弹出窗口、提示等。
语言默认设置 页面包含通用语法高亮设置，这些设置默认应用于所有支持的编程语言。 在大多数情况下，配置 语言默认设置 并在必要时对特定语言进行调整就足够了。 要更改元素的继承颜色设置，请清除 继承值自 复选框。
示例：配置占位符分隔符的高亮显示您可以在 .js 、 .jsx 、 .ts 、 .tsx 、 .fasterxml 、 .svelte 和 .astro 文件中配置 ${ 和 } 占位符分隔符的高亮显示。
按 Ctrl+Alt+S 打开设置，然后选择 编辑器 | 颜色方案。 然后在 配色方案 下选择 JavaScript 或 TypeScript。
在 模板字面量 节点下，选择 占位符分隔符。
在对话框右侧窗格中清除 继承值自 复选框。 之后，窗格中的其他控件将变为可用。
使用控件配置背景和前景的字体和颜色。 在下方区域预览设置。
语义高亮默认情况下，配色方案定义了保留字和源代码中其他符号的语法高亮：运算符、关键字、建议、字符串字面量等。 如果您有一个包含许多参数和局部变量的函数或方法，可能很难一眼就区分它们。 您可以使用 语义高亮为每个参数和局部变量分配不同的随机颜色。
启用语义高亮按 Ctrl+Alt+S 打开设置，然后选择 编辑器|配色方案|语言默认值|语义高亮。
选择 语义高亮显示 并根据需要自定义颜色范围。
分享配色方案如果您习惯了特定的颜色方案，您可以将其从一个安装导出并导入到另一个安装中。 您还可以与其他开发人员共享配色方案。 .
将配色方案导出为 XMLWebStorm 可以将您的配色方案设置保存为带有 .icls 扩展名的 XML 文件。 然后，您可以将文件导入到另一个安装中。
按 Ctrl+Alt+S 打开设置，然后选择 编辑器 | 颜色方案。
从 方案 列表中选择一种配色方案，点击 ，然后点击 导出 并选择 IntelliJ IDEA 配色方案(.icls)。
指定文件的名称和位置并保存。
将配色方案导出为插件该插件可以上传到 plugin repository ，以供他人安装。 与 XML 文件相比，这种格式具有几个优点，包括元数据、反馈、下载统计和版本控制（当您上传插件的新版本时，用户将收到通知）。
按 Ctrl+Alt+S 打开设置，然后选择 编辑器｜颜色方案。
从 方案 列表中选择一种配色方案，点击 ，然后点击 导出 并选择 配色方案插件.jar。
在 创建颜色方案插件 对话框中，指定版本详细信息和供应商信息。 然后点击 确定(O)。
当您安装带有配色方案的插件时，该方案将被添加到预定义方案列表中。
导入配色方案按 Ctrl+Alt+S 打开设置，然后选择 编辑器｜颜色方案。
请从 方案 列表中选择一个配色方案，点击 ，然后点击 导入方案。
字体自定义默认编辑器字体此字体将默认在所有配色方案中使用并继承。
按 Ctrl+Alt+S 打开设置，然后选择 编辑器 | 字体。
从 字体 列表中选择字体。
点击 Apply 以保存设置。
有关更多信息，请参见 字体。
自定义配色方案字体如果需要， 为您的当前方案设置不同的字体。
如果您计划共享您的方案或在可能不支持所选字体的其他平台上使用该方案，则不建议这样做。 在这种情况下，请使用默认的全局字体设置。
按 Ctrl+Alt+S 打开设置，然后选择 编辑器 | 颜色方案 | 颜色方案字体。
请选择 使用配色方案字体，而不是 默认 复选框。
有关更多信息，请参阅 配色方案。
要配置 WebStorm 界面（工具窗口、工具栏、菜单）中使用的字体，请打开 IDE 设置 Ctrl+Alt+S ，然后转到 外观与行为 ｜ 外观。 从 使用自定义字体 列表中，选择一种字体，并在 大小 字段中指定字体大小。
有关更多信息，请参见 外观。
自定义控制台字体默认情况下，控制台中的文本使用与配色方案相同的字体。 在控制台中使用不同的字体：
按 Ctrl+Alt+S 打开设置，然后选择 编辑器 | 配色方案 | 控制台字体。
请选择 使用控制台字体，而不是 默认 复选框。
安装新自定义字体WebStorm 可以使用 您 的操作系统或用于运行 WebStorm 的 Java 运行时 中提供的任何字体。 如果您想添加其他字体，需要在您的操作系统中安装它，并且 WebStorm 在重新启动后会发现它。
下载所需的 TTF 字体包并解压以提取字体文件 ( .ttf )。 为了使字体正常工作，它至少应有 4 个文件：Normal、Bold、Italic 和 Bold Italic。
根据您的操作系统，执行以下操作：
选择所有字体文件，右键点击选中的项目，然后选择 安装。
选择所有字体文件，双击选择以打开字体册预览，然后点击 安装字体 底部。
将字体解压到 ~/.local/share/fonts 为当前用户，或解压到 /usr/share/fonts 以系统范围安装字体，然后运行 fc-cache -f -v。
重新启动 WebStorm，然后在 编辑器 | 字体 设置页面 Ctrl+Alt+S 中选择已安装的字体。
生产力提示查看当前符号的颜色方案设置将文本光标置于所需符号处，按 Ctrl+Shift+A ，找到 跳转到颜色和字体 操作并执行。
这样将打开光标下符号的相关配色方案设置。
查看编辑器当前使用的字体按 Ctrl+Shift+A ，找到 显示编辑器使用的字体 操作并执行。
这将打开 编辑器中使用的字体 对话框，其中包含字体列表。
使用快速切换器按 Ctrl+` 或从主菜单中选择 查看 | 快速切换方案。
在 切换 弹出窗口中，选择 编辑器配色方案 ，然后选择所需的配色方案。
既没有 跳转到颜色和字体 操作，也没有 显示编辑器使用的字体 操作具有默认快捷键。 要为操作分配快捷键，请在 查找操作 弹出窗口中选择它，然后按 Alt+Enter。
最后修改日期： 2025年 4月 22日配置代码样式配置控制台颜色