WebStorm 主题插件被升级覆盖后，自己打一个固定版

WebStorm 升级以后，每天盯着看的颜色突然不对了，比少一个功能按钮还烦。

我之前一直用一套 One Dark 风格的主题。升级 WebStorm 后，它像是被系统顺手带走了：插件市场里搜 one dark theme，能搜到几个名字很像的，但装完以后按钮、编辑器、选中态、弹窗颜色都不是原来的感觉。

后来翻了一圈本地配置，又把旧版和新版的颜色表拆开比了一遍，才发现问题不只是名字变了。新版还换掉了旧版的 UI 色表，旧的灰蓝背景、硬朗按钮和输入框颜色没有作为一个可选主题保留下来。对我这种已经适应旧色的人来说，升级后的几个 One Dark 主题都不对味，只能把旧主题固定下来继续用。

这篇把过程记下来：怎么从本地记录里找回旧插件，新版到底丢了哪些旧颜色，JetBrains 主题插件是怎么工作的，以及如果想自己改一套主题，应该从哪里下手。

这次整理出来的固定版插件在这里：

https://shengsheng.fun/files/webstorm-onedark-classic-local-plugin/files/sheng-atom-onedark-theme-1.6.0-sheng.1.jar

安装方式：

Settings | Plugins | 齿轮菜单 | Install Plugin from Disk...

选中这个 JAR，重启 WebStorm，然后在 Settings | Appearance & Behavior | Appearance 里选择 Sheng Atom OneDark Theme。

这个包是从旧主题插件整理出来的本地固定版，核心改动是换成私有插件 ID，避免以后再被 Marketplace 上同一条插件线的新版覆盖。

先从本地找旧插件

WebStorm 升级时不会只留下当前界面。用户插件、主题选择、编辑器配色、启动日志、Toolbox 备份，都会留下线索。

macOS 上可以先看这些目录：

~/Library/Application Support/JetBrains/WebStorm2026.1/plugins
~/Library/Application Support/JetBrains/WebStorm2026.1/options
~/Library/Caches/JetBrains/WebStorm2026.1/plugins
~/Library/Logs/JetBrains/WebStorm2026.1/idea.log

如果 WebStorm 是通过 JetBrains Toolbox 升级的，旧版本配置还可能在备份目录里：

~/Library/Application Support/JetBrains/WebStorm2026.1-backup/<timestamp>/plugins

找到可疑 JAR 后，不用急着安装，先拆开看 plugin.xml：

unzip -p atom-onedark-theme.jar META-INF/plugin.xml | sed -n '1,120p'

主题 JSON 也可以直接读：

unzip -p atom-onedark-theme.jar atom_onedark.theme.json \
  | python3 -m json.tool \
  | sed -n '1,80p'

这次在 Toolbox 备份里找到的旧插件，META-INF/plugin.xml 里是这样的：

<id>github.cweijan.test-theme</id>
<name>Atom OneDark Theme</name>
<version>1.6</version>

这三个字段基本就把旧身份钉住了：它叫 Atom OneDark Theme，插件 ID 是 github.cweijan.test-theme，版本是 1.6。

名字为什么对不上

JetBrains 插件市场里的展示名可以改，插件 ID 才是更稳定的身份。

旧插件的 xmlId 是 github.cweijan.test-theme。2026-06-26 查 JetBrains Marketplace 时，同一个 xmlId 对应的是 One Dark Modern Theme，Marketplace 插件 ID 是 12178，版本线已经到了 2.x。

另一个常见搜索结果 One Dark Theme 是 Mark Skelton 维护的另一套主题，xmlId 是：

com.markskelton.one-dark-theme

它名字很像，但和 github.cweijan.test-theme 不是同一条插件线。所以「装了一个 One Dark 还是不像以前」很正常：搜索命中了同类主题，不一定命中原来那一个。

WebStorm 当前选择了哪个主题，可以看：

~/Library/Application Support/JetBrains/WebStorm2026.1/options/laf.xml

当前编辑器配色可以看：

~/Library/Application Support/JetBrains/WebStorm2026.1/options/colors.scheme.xml

有时候 UI 主题已经变成新的，编辑器配色还挂着旧 scheme 名；也有时候 laf.xml 里记录的主题 ID 对应插件已经不在了。界面看起来「半旧半新」，往往就是这些配置没对齐。

新版丢掉了旧 UI 色表

一开始我也怀疑过，是不是新版插件还带着旧颜色，只是我没有选对主题。把当前 Marketplace 上的 One Dark Modern Theme 2.0.5 拆开后，能看到它只有一个主题入口：

<themeProvider id="one-dark-modern-theme" path="/theme/one_dark_modern.theme.json" />

包里对应的主题文件也只有：

theme/one_dark_modern.theme.json
theme/one_dark_modern.xml

旧版 Atom OneDark Theme 1.6 的 atom_onedark.theme.json 和 atom_onedark.xml 没有作为另一个可选主题保留下来。

更关键的是颜色本身也对不上。旧版最明显的 UI 色是这一组：

主背景                  #343C4A
按钮背景                #424954
输入框背景              #454C5C
Search Everywhere 背景  #474C59
Tab 选中背景            #3B4252
Tab 下划线              #848AA1
按钮圆角                0

新版 One Dark Modern 已经换成了另一组：

主背景                  #21252b
按钮背景                #2c313c
输入框背景              #252931
Search Everywhere 背景  #252931
Tab 选中背景            #21252b
Tab 下划线              #528bff
按钮圆角                8

另一个插件 One Dark Theme 里的 One Dark / Islands / Vivid 也更接近 #21252b 和 #282c34 这组深底色。它们和旧版的灰蓝 UI 不是同一个方向。

编辑器配色里确实还能看到一些 One Dark 系的相似颜色，比如 selection 和行号颜色有继承关系；但 WebStorm 外壳、按钮、弹窗、侧栏、输入框、Tab 这些每天扫来扫去的 UI 颜色已经换了。新版只保留了 One Dark Modern 这条主题路线，没有继续打包旧的 UI 色表。

这就是这个固定版主题的由来：新版继续往 One Dark Modern 走，旧版用户如果想保留 Atom OneDark Theme 1.6 的视觉，只能把旧颜色整理成一个独立主题。

JetBrains 插件其实是什么

JetBrains IDE 插件不是一个神秘格式。最外层通常是一个 ZIP 或 JAR，里面至少会有：

META-INF/plugin.xml

IDE 启动或刷新插件时，会读取这个文件里的插件 ID、名字、版本、兼容范围、依赖和扩展点。

一个很小的插件也可能只有这些东西：

META-INF/plugin.xml
atom_onedark.theme.json
atom_onedark.xml

plugin.xml 负责告诉 IDE：「我提供了一个主题」。真正的颜色规则放在 theme JSON 里，编辑器里的代码高亮、光标行、diff、selection 等配色，通常放在 editor scheme XML 里。

JetBrains 的 Theme Structure 文档里也把主题插件拆成这几部分：

• 必需的 theme JSON；
• plugin.xml 里的 themeProvider 声明；
• 可选的 editor scheme XML；
• 可选的背景图和图标资源。

主题插件最好保持单一职责。也就是说，一个主题插件就只管主题，不要顺手塞别的动作、设置页或语言功能。这样升级 IDE 时风险小，自己维护起来也清楚。

主题是怎么被 IDE 加载的

主题入口在 plugin.xml 里：

<extensions defaultExtensionNs="com.intellij">
  <themeProvider
    id="fun.shengsheng.jetbrains.sheng-atom-onedark-theme.theme"
    path="atom_onedark.theme.json"/>
</extensions>

这里有两个字段最重要。

id 是这个主题 provider 的唯一 ID。不要复用别人插件里的 ID，也不要多个主题共用一个 ID。JetBrains 文档里也提醒过，themeProvider 的 ID 要保持唯一。

path 指向 theme JSON。IDE 通过它找到真正的主题描述文件。

theme JSON 里最常见的是这些字段：

{
  "name": "Sheng Atom OneDark Theme",
  "dark": true,
  "author": "Local",
  "editorScheme": "/atom_onedark.xml",
  "ui": {
    "Panel.background": "#343C4A",
    "Button.startBackground": "#424954",
    "Button.endBackground": "#424954"
  }
}

name 是在 WebStorm 设置里看到的主题名。

dark 决定它基于浅色主题还是 Darcula 这类暗色基底。

editorScheme 指向编辑器配色 XML。没有它也能做 UI 主题，但编辑器高亮就会跟着用户当前 scheme 走。

ui 是 UI 控件颜色覆盖。按钮、面板、弹窗、标签页、搜索框、工具窗口，大多都从这里改。

还有一个很实用的写法是先定义命名颜色，再在 ui 里引用：

{
  "colors": {
    "surface": "#343C4A",
    "surfaceHover": "#485569",
    "text": "#D0D0D9"
  },
  "ui": {
    "Panel.background": "surface",
    "Button.startBackground": "surfaceHover",
    "Button.endBackground": "surfaceHover",
    "Button.foreground": "text"
  }
}

这样后面调色会舒服很多。先把一组核心色命名，再把具体控件挂上去，不用在几十个地方反复改同一个十六进制颜色。

怎么自己调整主题规则

如果只是改一套已有主题，最快的办法是拆旧包。

先解压：

mkdir -p /tmp/atom-onedark-theme
cd /tmp/atom-onedark-theme
jar xf /path/to/atom-onedark-theme.jar

通常先看这几个文件：

META-INF/plugin.xml
*.theme.json
*.xml

改 UI 控件颜色，从 theme JSON 的 ui 下手。比如想改主面板、按钮、选中态：

{
  "ui": {
    "Panel.background": "#343C4A",
    "Button.startBackground": "#424954",
    "Button.endBackground": "#424954",
    "List.selectionBackground": "#4C5870"
  }
}

改编辑器里的颜色，要看 editorScheme 指向的 XML。比如光标行、选区、缩进线、diff 背景，很多都在这个文件里：

<scheme name="Sheng Atom OneDark Theme" version="142" parent_scheme="Darcula">
  <colors>
    <option name="CARET_ROW_COLOR" value="3a414f" />
    <option name="SELECTION_BACKGROUND_COLOR" value="4c5870" />
  </colors>
</scheme>

更稳的调法是先在 WebStorm 里打开：

Settings | Editor | Color Scheme

复制一份当前 scheme，手动调到差不多，再导出 XML。导出来的 XML 可以作为插件里的 editorScheme，比硬猜每个 option 名要省心。

改完以后重新打包：

cd /tmp/atom-onedark-theme
jar --create --file ../sheng-atom-onedark-theme.jar -C . .

然后从磁盘安装这个 JAR。

如果只是自己用，本地安装不要求上传 Marketplace，也不要求签名。要公开给别人下载，先看原主题的 license。这个 One Dark Modern Theme 仓库在 2026-06-26 查到的是 MIT License；换成别的主题时不要默认也能转发。

这次固定版改了什么

我没有改旧主题的颜色，只改了插件身份和展示名。

旧插件：

<id>github.cweijan.test-theme</id>
<name>Atom OneDark Theme</name>
<version>1.6</version>

固定版：

<id>fun.shengsheng.jetbrains.sheng-atom-onedark-theme</id>
<name>Sheng Atom OneDark Theme</name>
<version>1.6.0-sheng.1</version>

<extensions defaultExtensionNs="com.intellij">
  <themeProvider
    id="fun.shengsheng.jetbrains.sheng-atom-onedark-theme.theme"
    path="atom_onedark.theme.json"/>
</extensions>

theme JSON 里的名字也改成了：

{
  "name": "Sheng Atom OneDark Theme",
  "dark": true,
  "author": "Local",
  "editorScheme": "/atom_onedark.xml"
}

这么改的目的很直接：让 WebStorm 把它当成独立的 Sheng 主题插件，而不是 Marketplace 上的 github.cweijan.test-theme。以后官方插件继续升级、改名、换配色，也不会影响这个固定版。

从零做一个主题插件

如果想做一套真正属于自己的主题，建议走标准 Gradle 项目，而不是一直手改 JAR。

一个最小主题项目可以长这样：

my-webstorm-theme/
  settings.gradle.kts
  build.gradle.kts
  src/main/resources/META-INF/plugin.xml
  src/main/resources/my_theme.theme.json
  src/main/resources/my_theme.xml

settings.gradle.kts：

pluginManagement {
  repositories {
    gradlePluginPortal()
    mavenCentral()
  }
}

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  repositories {
    mavenCentral()
  }
}

rootProject.name = "my-webstorm-theme"

build.gradle.kts 可以用 IntelliJ Platform Gradle Plugin 2.x：

plugins {
  id("org.jetbrains.intellij.platform") version "2.16.0"
}

group = "local.example"
version = "1.0.0"

repositories {
  mavenCentral()
  intellijPlatform {
    defaultRepositories()
  }
}

dependencies {
  intellijPlatform {
    webstorm("2026.1.3")
  }
}

intellijPlatform {
  pluginConfiguration {
    ideaVersion {
      sinceBuild = "261"
    }
  }
}

如果只是做通用 IntelliJ 主题，也可以把 webstorm("2026.1.3") 换成 intellijIdeaCommunity(...) 或其他目标 IDE。目标产品和版本要按自己实际测试的 IDE 来选。

WebStorm 插件如果要调用 JavaScript / TypeScript 相关能力，通常还要加 bundledPlugin("JavaScript")。这里只做主题，不调用语言能力，所以不需要额外依赖。

plugin.xml：

<idea-plugin>
  <id>local.example.my-webstorm-theme</id>
  <name>My WebStorm Theme</name>
  <version>1.0.0</version>
  <vendor>Local</vendor>

  <depends>com.intellij.modules.platform</depends>

  <extensions defaultExtensionNs="com.intellij">
    <themeProvider
      id="local.example.my-webstorm-theme.provider"
      path="my_theme.theme.json"/>
  </extensions>
</idea-plugin>

my_theme.theme.json：

{
  "name": "My WebStorm Theme",
  "dark": true,
  "author": "Local",
  "editorScheme": "/my_theme.xml",
  "colors": {
    "surface": "#343C4A",
    "surfaceHover": "#485569",
    "text": "#D0D0D9"
  },
  "ui": {
    "Panel.background": "surface",
    "Button.startBackground": "surfaceHover",
    "Button.endBackground": "surfaceHover",
    "Button.foreground": "text"
  }
}

my_theme.xml 可以先写得很小：

<scheme name="My WebStorm Theme" version="142" parent_scheme="Darcula">
  <colors>
    <option name="CARET_ROW_COLOR" value="3a414f" />
    <option name="SELECTION_BACKGROUND_COLOR" value="4c5870" />
  </colors>
</scheme>

然后打包：

./gradlew buildPlugin

JetBrains 的 Gradle 插件会生成用于测试和分发的 ZIP，默认在 build/distributions/ 下。这个 ZIP 可以直接通过 Install Plugin from Disk... 安装。

如果只是从旧主题 JAR 改一个自用固定版，前面那种 jar --create 就够了；如果打算长期维护、做版本号、换 IDE 版本、以后可能上传 Marketplace，就用 Gradle 项目。

怎么判断改得对不对

主题插件最容易出错的地方有几个：

• plugin.xml 里的插件 ID 和 themeProvider id 跟别人冲突；
• theme JSON 的 name 没改，导致设置里看不出来装的是哪一版；
• editorScheme 路径写错，UI 主题生效了，编辑器配色没生效；
• JAR 里文件路径多套了一层目录，比如 my-theme/META-INF/plugin.xml，IDE 找不到；
• 只改了 UI 颜色，没有改 editor scheme，于是代码区还是另一套颜色；
• 旧插件声明的 since-build / until-build 卡住了新 IDE。

检查 JAR 结构可以用：

jar tf sheng-atom-onedark-theme.jar | sed -n '1,80p'

META-INF/plugin.xml 必须在根路径下能看到。

检查 JSON：

unzip -p sheng-atom-onedark-theme.jar atom_onedark.theme.json \
  | python3 -m json.tool >/dev/null

检查 XML：

unzip -p sheng-atom-onedark-theme.jar META-INF/plugin.xml \
  | xmllint --noout -

装完以后，看三个地方：

Settings | Plugins
Settings | Appearance & Behavior | Appearance
Settings | Editor | Color Scheme

如果插件列表能看到，Appearance 里能选到主题，Editor Color Scheme 里也能看到对应 scheme，基本就跑通了。

这次的对应关系

最后把这次的身份关系放在一起，方便以后再查：

旧显示名：Atom OneDark Theme
旧 xmlId：github.cweijan.test-theme
旧版本：1.6

Marketplace 现名：One Dark Modern Theme
Marketplace 插件 ID：12178
2026-06-26 查到的当前版本线：2.x

容易混淆的另一个插件：One Dark Theme
另一个插件的 xmlId：com.markskelton.one-dark-theme
另一个插件的 Marketplace ID：11938

固定版显示名：Sheng Atom OneDark Theme
固定版插件 ID：fun.shengsheng.jetbrains.sheng-atom-onedark-theme
固定版版本：1.6.0-sheng.1

这类主题问题可以先抓四个东西：旧插件的 xmlId、旧 JAR 里的 plugin.xml、当前 IDE 的 laf.xml 和 colors.scheme.xml。这些对上以后，再决定是装官方新版、回到旧包，还是自己拆出来固定一版。