一套以近黑为底、紫色为点的暗色设计风格。 克制、精准、有呼吸感——适合长时间阅读与深度工作。
暗色系统对眼睛友好，适合信息密度高、用户需要长时间停留的产品。
笔记、文档、Wiki。用户需要专注阅读，暗色降低视觉噪音。
IDE、终端、API 控制台。符合程序员的审美习惯与使用场景。
分析平台、监控面板。暗色背景让数据可视化更突出、更易读。
写作、任务管理、番茄钟。减少视觉干扰，帮助用户进入心流。
视频剪辑、音乐制作、设计工具。暗色让创作内容成为视觉焦点。
即时消息、视频会议。长时间使用下暗色对眼睛更为友好。
统一的字重、字距和行高构建清晰的视觉层次。
左侧色条区分语义，背景深于页面，形成轻微的层次感。
暗色系统不是简单地把背景变黑——它需要精心校准每一层背景的明度关系，让界面在低光环境下依然具有良好的层次感和可读性。
在暗色模式下，避免使用纯白文字（#ffffff），改用略带暖色或冷色的近白（如 #f0f0f0），可以减少屏幕光的刺激感。
强调色饱和度不宜过高。在深色背景上，中等饱和度的紫色（#7c6af7）比纯紫（#6600ff）更耐看，对比度也更合规。
使用渐进式的背景层级（bg-0 → bg-1 → bg-2 → bg-3），而非单一黑色背景，可以让界面更有空间感和可操作性。
悬停时边框发光，右上角渐变晕染，紫色 accent 贯穿始终。
bg-0 到 bg-3 四个层级，明度差约 4-8 个色阶，形成清晰的视觉层次而不刺眼。
主文 #f0f0f0、次文 #a0a0a8、弱文 #606068，对应三种信息优先级。
仅用紫色 #7c6af7 作为系统强调色，通过透明度变体创造层次，避免颜色噪音。
导航栏使用 backdrop-filter blur，在滚动时产生自然的景深感，不遮挡内容。
边框颜色 #2a2a30，在深色背景上可见但不突兀，悬停时过渡到紫色发光版本。
JetBrains Mono 优先，配合语义化的语法着色，代码块在暗色环境中清晰易读。
每种语法类型对应固定色彩角色，而非随意分配颜色。
// 黑曜石设计 Token 定义 interface DesignToken { name: string; value: string; category: "background" | "text" | "accent"; } const obsidianTokens: DesignToken[] = [ { name: "bg-0", value: "#0e0e10", category: "background" }, { name: "text-0", value: "#f0f0f0", category: "text" }, { name: "accent", value: "#7c6af7", category: "accent" }, ]; function getToken(name: string): DesignToken | undefined { return obsidianTokens.find( (t) => t.name === name ); } // 根据类别批量提取 Token const bgTokens = obsidianTokens .filter(t => t.category === "background") .map(t => t.value); export { obsidianTokens, getToken, bgTokens };
数字是界面的锚点，用字号和字重赋予它足够的视觉重量。
所有颜色均在 CSS :root 中定义，语义化命名，便于维护与扩展。