Editor → Color Scheme 是代码颜色的唯一控制台，Appearance → Theme 仅影响菜单、侧边栏等UI元素；所有语言高亮规则均在此设置，改错位置无效。
Editor → Color Scheme 是唯一生效位置
改 Appearance → Theme 只影响菜单、侧边栏、按钮这些 UI 元素，和代码颜色完全无关。所有语言的高亮规则——包括 const、"string"、// comment、class name、#id——都只在 Editor → Color Scheme 里控制。进错地方，调半天也没用。
常见错误现象：Darcula UI 主题已启用，但编辑器仍是白底黑字；装了 One Dark Pro 插件，UI 变暗了，代码却还是默认配色。原因都是没在 Color Scheme 下拉框里手动选中对应方案（比如 Darcula 或 One Dark）。
如果下拉框里没有你要的方案：
– 点右侧齿轮图标 → Restore Defaults（恢复默认后 Darcula 就会出现）
– 或点齿轮 → Import Scheme → IntelliJ IDEA color scheme 手动导入一次
– 改完必须点 Apply，WebStorm 不自动保存
Language Defaults 和具体语言节点要分清
Language Defaults 定义的是通用语法元素：关键字、字符串、注释、数字、括号等。它作为基底，被各语言节点（如 JavaScript、CSS、HTML）继承并覆盖。别一股脑全调 Language Defaults，否则容易让 CSS 类名和 JS 变量颜色打架。
想统一所有语言的关键字颜色 → 改 Language Defaults → Keywords
只想让 HTML 标签名变蓝、JS 的 function 变紫 → 分别进 HTML → Tag name 和 JavaScript → Keyword 单独设
CSS 中 .class 和 #id 默认都走 Identifier，要区分就得进 CSS → Class selector 和 ID selector 单独调色
调完记得勾选 Enable color preview，右侧面板实时看效果，避免盲调
Vue3 / TypeScript 高亮依赖语义层，不单靠语法着色
Vue3 的 .vue 文件要想真正识别 ref()、computed、defineProps 这些 API 并按语义着色（比如函数调用 vs 类型声明 vs 响应式变量），光靠语法高亮不够，必须启用语义高亮（Semantic Highlighting）并确保语言服务就绪。
必须满足三项：
– 已安装官方 Vue.js 插件（不是 Volar/Vetur），且重启过 IDE
– 项目根目录有正确配置的 tsconfig.json，且 WebStorm 已加载（Settings → Languages & Frameworks → TypeScript 页面不显示 “TypeScript is not configured”）
– Editor → Color Scheme → TypeScript 中勾选了 Enable semantic highlighting
验证方法：在 <script setup> 里写 const count = ref(0)，观察 ref（函数名）、count（变量名）、0（字面量）是否颜色分明。如果全是同一种蓝，说明语义高亮没生效或类型服务未就绪
Matched brace 高亮失效的排查顺序
光标移到 {、[、( 上没反应？先确认基础设置是否被关掉：
– 进 Editor → Color Scheme → General，找到 Matched brace，确保勾选了 Background 或 Effect，且颜色可见（比如浅灰 #E0E0E0）
– 检查 Selection background 是否和 Matched brace 背景色太接近，导致“高亮了但看不见”
– 如果装了 Rainbow Brackets Lite，它会接管原生匹配逻辑，此时 Matched brace 设置完全失效——这是预期行为，不是 bug
– Vue/Svelte 文件里括号不亮？先确认文件类型是否被正确识别（右下角状态栏显示 Vue 或 Svelte，不是 Text 或 HTML）
语义高亮开启后，有时括号高亮会有轻微延迟（尤其在大型文件中），这不是配置问题，是分析引擎在后台做类型推断所致，不用强行关闭语义高亮去“换回即时响应”
