CSS 变量参考
所有可自定义 CSS 变量的完整参考
Ink 提供 50+ CSS 变量用于深度定制。以下是按类别组织的所有可用变量的完整参考。
颜色变量
编辑器中使用的核心调色板。
| 变量名 | 默认值 | 说明 |
|---|---|---|
| --ink-primary | #6366f1 | 主品牌色 |
| --ink-accent | #8b5cf6 | 强调色，用于高亮和交互 |
| --ink-bg | #ffffff | 主背景色 |
| --ink-bg-secondary | #f8fafc | 面板等的次要背景色 |
| --ink-text | #1e293b | 主文本颜色 |
| --ink-text-secondary | #64748b | 次要文本颜色 |
| --ink-border | #e2e8f0 | 边框颜色 |
排版变量
编辑器的字体设置。
| 变量名 | 默认值 | 说明 |
|---|---|---|
| --ink-font-family | Inter, system-ui, sans-serif | 主字体系列 |
| --ink-font-mono | JetBrains Mono, monospace | 代码等宽字体 |
| --ink-font-size | 16px | 基础字体大小 |
| --ink-line-height | 1.75 | 基础行高 |
编辑器变量
编辑器特定的样式选项。
| 变量名 | 默认值 | 说明 |
|---|---|---|
| --ink-editor-padding | 2rem | 编辑器内容内边距 |
| --ink-editor-max-width | 65ch | 最大内容宽度 |
| --ink-selection-bg | rgba(99, 102, 241, 0.2) | 文本选中背景色 |
代码块变量
代码块的语法高亮颜色。
| 变量名 | 默认值 | 说明 |
|---|---|---|
| --ink-code-bg | #1e293b | 代码块背景色 |
| --ink-code-keyword | #c084fc | 关键字（if, for, const 等） |
| --ink-code-string | #4ade80 | 字符串字面量 |
| --ink-code-comment | #64748b | 注释 |
| --ink-code-function | #60a5fa | 函数名 |
| --ink-code-variable | #f472b6 | 变量名 |
使用方法
要在你的主题中使用这些变量，请在 CSS 中覆盖它们：
/* 在你的主题 CSS 中覆盖 */
:root {
--ink-accent: #10b981;
--ink-font-family: 'Fira Sans', sans-serif;
}
/* 或者限定在一个主题类中 */
.theme-custom {
--ink-bg: #0f172a;
--ink-text: #e2e8f0;
}