Codes 编辑器支持通过 CSS 变量自定义主题配色。你可以基于内置的深色/浅色主题进行修改，或从零创建全新风格。本文介绍主题系统的结构、变量命名与调试方法。
一、主题文件结构
每个主题是一个独立的 CSS 文件，放在 themes/ 目录下。编辑器通过切换 <body> 的 data-theme 属性来加载不同主题。
/* themes/dark.css */ [data-theme="dark"] { --editor-bg: #0a1714; --editor-fg: #e8f5f0; --line-number: #4a6b62; --cursor: #34d399; --selection: rgba(52, 211, 153, 0.25); --keyword: #ff79c6; --function: #8be9fd; --string: #f1fa8c; --comment: #6272a4; --number: #bd93f9; }
二、核心变量说明
--editor-bg— 编辑器背景色--editor-fg— 默认文字颜色--line-number— 行号颜色--cursor— 光标颜色--selection— 选区背景色--keyword— 关键字（if, for, return）--function— 函数名--string— 字符串字面量--comment— 注释--number— 数字常量
三、创建新主题的步骤
按照以下流程即可创建并启用自定义主题：
/* 1. 复制现有主题作为模板 */ cp themes/dark.css themes/midnight.css /* 2. 修改配色值 */ [data-theme="midnight"] { --editor-bg: #0d0d1a; --editor-fg: #d4d4e0; --keyword: #c792ea; --function: #82aaff; --string: #c3e88d; --comment: #676e95; --number: #f78c6c; } /* 3. 在设置面板中注册主题名称 */ /* 主题列表读取 themes/ 目录下的文件名 */
建议先用浏览器的开发者工具实时调试 CSS 变量，确认配色后再写入文件。
四、语法高亮 Token 映射
编辑器将代码解析为 token，每个 token 带有类型标记。主题只需为类型指定颜色：
/* token 到 CSS 类的映射 */
.token.keyword { color: var(--keyword); }
.token.function { color: var(--function); }
.token.string { color: var(--string); }
.token.comment { color: var(--comment); font-style: italic; }
.token.number { color: var(--number); }
.token.operator { color: var(--editor-fg); }
.token.type { color: var(--keyword); }
五、UI 元素主题化
除了编辑器区域，侧边栏、状态栏与弹窗也使用 CSS 变量控制外观：
--sidebar-bg— 文件树背景--sidebar-fg— 文件树文字--statusbar-bg— 底部状态栏背景--panel-bg— 输出面板背景--border— 分割线颜色--accent— 强调色（按钮、高亮指示器）
六、跟随系统偏好
使用 prefers-color-scheme 媒体查询，可在系统切换深浅色时自动匹配：
@media (prefers-color-scheme: light) {
:root {
--editor-bg: #fafafa;
--editor-fg: #2d2d2d;
--keyword: #d73a49;
--function: #6f42c1;
--string: #032f62;
--comment: #6a737d;
}
}
在设置中勾选「跟随系统」后，编辑器会监听系统主题变化并自动切换。