主题
FFFFinance 为应用提供 20+ 内置主题,为文档站提供 8 个主题。所有切换实时生效,零重新渲染。
深色主题
| 主题 | 强调色 | 风格 |
|---|---|---|
| Midnight | #00d4aa | 默认——近黑底色上的青绿色。干净、专业。 |
| Cyberpunk | #ff00ff | 深海军蓝上的品红霓虹。最大对比度。 |
| Tokyo Night | #7aa2f7 | 柔和蓝紫色。宁静专注。 |
| Dracula | #bd93f9 | 炭灰底色上的柔紫色。开发者最爱。 |
| Nord | #88c0d0 | 北极蓝灰。清冷极简。 |
| Catppuccin | #cba6f7 | 柔和薰衣草色。温馨舒适。 |
浅色主题
| 主题 | 强调色 | 风格 |
|---|---|---|
| Light | #00a889 | 干净、明亮、极简。 |
| Sepia | #704214 | 温暖的羊皮纸色。如同阅读书籍。 |
字体
| 字体 | 风格 |
|---|---|
| JetBrains Mono | 默认——等宽,清晰的数字 |
| Fira Code | 带连字的等宽字体 |
| Cascadia Code | 微软的带连字等宽字体 |
| Geist Mono | Vercel 的等宽字体 |
| IBM Plex Mono | 经典技术风等宽字体 |
| Space Mono | 几何等宽字体 |
| Inter | 比例字体——更宽敞 |
主题工作原理
CSS 自定义属性应用于 document.documentElement:
typescript
// store/useThemeStore.ts
for (const [key, value] of Object.entries(theme.tokens)) {
document.documentElement.style.setProperty(key, value);
}每个组件使用 var(--accent)、var(--bg)、var(--text) —— 切换即时生效,无重新渲染。
设计令牌
css
--accent /* 主强调色 */
--accent-dim /* 约 15% 透明度的强调色 */
--bg /* 页面背景 */
--bg-panel /* 面板背景 */
--bg-hover /* 悬停状态 */
--border /* 默认边框 */
--text /* 主文本 */
--text-muted /* 次要文本 */
--danger /* #ef4444 */
--warning /* #f59e0b */切换主题
在应用中: 设置 > 外观标签页。即时生效。
在文档中: 顶部导航栏的主题选择器下拉菜单。保存在浏览器中。