主题开发指南
为 Ink 编辑器创建自定义主题
Ink 支持强大的主题系统，允许你完全自定义编辑器的视觉外观。本指南将带你了解如何创建自己的主题。
主题结构
主题是一组 CSS 变量的集合，用于定义颜色、字体、间距和其他视觉属性。主题分为以下几个类别：
- 颜色 - 主色、强调色、背景色和文本颜色
- 排版 - 字体系列、大小和粗细
- 间距 - 外边距、内边距和间隙
- 代码块 - 语法高亮颜色
创建主题
- 为你的主题创建一个新的 CSS 文件
- 在类名或数据属性下定义你的 CSS 变量
- 在编辑器设置中导入并应用你的主题
示例主题
以下是一个简单的自定义暗色主题示例：
/* my-dark-theme.css */
.theme-my-dark {
--ink-bg: #1a1b26;
--ink-bg-secondary: #24283b;
--ink-text: #a9b1d6;
--ink-text-secondary: #565f89;
--ink-accent: #7aa2f7;
--ink-border: #3b4261;
/* 代码语法高亮 */
--ink-code-keyword: #bb9af7;
--ink-code-string: #9ece6a;
--ink-code-comment: #565f89;
--ink-code-function: #7aa2f7;
}提示
- 确保颜色对比度足够，以保证可访问性
- 保持主题中颜色的一致性
- 在亮色和暗色系统模式下测试你的主题