深度定制ZenNotes编写自定义CSS主题与覆盖设计令牌实战指南【免费下载链接】zennotesKeyboard-first local Markdown notes with Vim motions, diagrams, and MCP integration.项目地址: https://gitcode.com/gh_mirrors/zenn/zennotesZenNotes 是一款键盘优先的本地 Markdown 笔记应用除了 Vim 手势、图表与 MCP 集成它还内置了一套接近 Obsidian 级别的自定义 CSS 主题系统。通过本指南你可以用纯文本文件重写整个界面的配色、字体与圆角编写一个theme.css覆盖全部--z-*设计令牌叠加overrides文件微调任意组件甚至不写代码就能用 Quick Tweaks 换色。所有改动都在~/.config/zennotes/下实时生效随你的 dotfiles 同步。ZenNotes 主题定制三层架构速览在动手之前先理解 ZenNotes 的样式分层——主题Themes、覆盖Overrides、快速调整Quick Tweaks它们按固定顺序注入页面后写的层赢级联自定义主题themes/slug/文件夹只注入当前激活主题的 CSS换主题互不串扰 覆盖文件overrides/*.css叠加在任何主题之上适合换个主题也想保留的私货样式Quick Tweaks设置面板里的色板与预设注入在最顶层优先级最高下面这张 ZenNotes 暗色界面截图就是主题令牌作用后的效果——侧边栏、标签页、画布底色全部来自--z-*变量第一步如何创建自定义主题文件夹主题就是一个放进配置目录的文件夹文件夹名即主题 ID~/.config/zennotes/ └── themes/ └── my-theme/ ├── manifest.json # 名称、作者、版本、描述、modes ├── theme.css # 主题样式必需 └── my-font.woff2 # 可选字体/图片资产manifest.json最小可用示例{ name: My Theme, author: you, version: 1.0.0, description: A short description., modes: both }modes取light/dark/bothpreview色板仅用于设置页的色块展示缺失 manifest 也能工作主题会以文件夹名显示并假定支持双模式更省事的方式在Settings → Appearance → Custom themes点New theme应用会自动生成中性浅色/暗色起始令牌你只管改色首次运行时应用会自动种入一个完整示例主题Soft Paper移植自 Nick Milo 的同名 Obsidian 主题和一份 README 说明照着改即可。加载逻辑见 apps/desktop/src/main/custom-themes.ts。设计令牌 --z-* 完全速查表theme.css 怎么写ZenNotes 的颜色全部收敛在一组--z-*CSS 变量上定义于 packages/app-core/src/styles/index.css。注意令牌值是空格分隔的 RGB 三元组方便 Tailwind 写透明度令牌组常用变量作用背景--z-bg--z-bg-softer--z-bg-1~4画布、侧边栏、面板层级文字--z-fg-1--z-fg-2--z-grey-0~2正文、次级、弱化文字强调色--z-accent--z-accent-soft--z-accent-muted按钮、链接、选中态语法色--z-red--z-green--z-yellow--z-blue--z-purple--z-aqua代码高亮、任务状态、图表配色阴影--z-shadow全局阴影颜色一个支持明暗双模式的最小主题骨架——暗色覆盖写在[data-theme-modedark]下永远不要硬编码主题名:root { --z-bg: 255 255 255; --z-fg-1: 29 29 31; --z-accent: 0 122 255; } :root[data-theme-modedark] { --z-bg: 28 28 30; --z-fg-1: 255 255 255; --z-accent: 10 132 255; }除了令牌你还可以写任意 CSS自定义字体font-face--z-text-font、背景纹理、组件级调整。下面这张截图里的语法着色与链接配色正是--z-*令牌在编辑器中的真实呈现⚠️ 字体与图片资产必须与theme.css同目录并通过zen-theme://my-theme/my-font.woff2引用远程http(s)地址一律不会被加载这是安全红线。覆盖任意 UI 细节overrides 文件编写步骤只想改一处细节、又不想动整个主题把.css文件丢进~/.config/zennotes/overrides/然后在Settings → Appearance → Overrides里开启即可。启用中的覆盖文件按文件名顺序拼接后注入在主题之后因此用:root[data-theme] {}作选择器可同时压过内置主题与自定义主题远程 URL 同样被禁止加载应用自带的example.css是一本配方手册默认全部注释不影响外观里面给了几个现成配方/* 所有主题上更冲的强调色 */ :root[data-theme] { --z-accent: 255 59 48; } /* 仅暗色模式OLED 纯黑背景 */ :root[data-theme-modedark] { --z-bg: 0 0 0; --z-bg-softer: 12 12 12; }完整令牌清单与配方见 apps/desktop/src/main/overrides.ts。不写代码也能换配色Quick Tweaks 颜色与预设不想碰 CSSSettings → Appearance → Quick Tweaks提供一套经过可读性筛选的免代码控制色板强调色 6 个语法/诊断色点色块直接换Density 密度预设Compact / Default / Comfortable同步缩放编辑器标签条与侧边栏、笔记列表行高紧凑模式下笔记行还会收起为一行摘要Corners 圆角预设Square / Default / Rounded通过全局--z-radius-scale乘子一次性方化或柔化所有圆角面板内置实时预览改色即刻可见。选中的值以themeTweaks存入可携带配置并注入为最顶层样式确保手动选的一定赢。预设的度量来源见 packages/shared-domain/src/overrides.ts。实时生效与开发者工具改完立刻看见主题与覆盖目录都被文件监听器盯着200ms 防抖编辑器里保存一下界面立即刷新无需重启 ⚡设置页的Developer tools按钮可打开检查器点选任意元素、找出它的类名与令牌再回头写 CSS调试闭环很短三层样式的注入顺序active-theme → overrides → tweaks在渲染端由 packages/app-core/src/lib/custom-themes.ts 保证切换明暗模式时无需重新注入延伸阅读源码与文档路径资料路径主题系统设计文档docs/explanation/custom-themes-and-community-gallery.md令牌推导与主题脚手架packages/shared-domain/src/custom-themes.ts桌面端加载器与 zen-theme:// 协议apps/desktop/src/main/custom-themes.ts覆盖文件加载与 example.cssapps/desktop/src/main/overrides.ts默认--z-*令牌定义packages/app-core/src/styles/index.css从一个文件夹、一份theme.css起步ZenNotes 的外观就完全由你定义——改配色是十分钟的事改字体和圆角只需两行 CSS 【免费下载链接】zennotesKeyboard-first local Markdown notes with Vim motions, diagrams, and MCP integration.项目地址: https://gitcode.com/gh_mirrors/zenn/zennotes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深度定制ZenNotes：编写自定义CSS主题与覆盖设计令牌实战指南
深度定制ZenNotes编写自定义CSS主题与覆盖设计令牌实战指南【免费下载链接】zennotesKeyboard-first local Markdown notes with Vim motions, diagrams, and MCP integration.项目地址: https://gitcode.com/gh_mirrors/zenn/zennotesZenNotes 是一款键盘优先的本地 Markdown 笔记应用除了 Vim 手势、图表与 MCP 集成它还内置了一套接近 Obsidian 级别的自定义 CSS 主题系统。通过本指南你可以用纯文本文件重写整个界面的配色、字体与圆角编写一个theme.css覆盖全部--z-*设计令牌叠加overrides文件微调任意组件甚至不写代码就能用 Quick Tweaks 换色。所有改动都在~/.config/zennotes/下实时生效随你的 dotfiles 同步。ZenNotes 主题定制三层架构速览在动手之前先理解 ZenNotes 的样式分层——主题Themes、覆盖Overrides、快速调整Quick Tweaks它们按固定顺序注入页面后写的层赢级联自定义主题themes/slug/文件夹只注入当前激活主题的 CSS换主题互不串扰 覆盖文件overrides/*.css叠加在任何主题之上适合换个主题也想保留的私货样式Quick Tweaks设置面板里的色板与预设注入在最顶层优先级最高下面这张 ZenNotes 暗色界面截图就是主题令牌作用后的效果——侧边栏、标签页、画布底色全部来自--z-*变量第一步如何创建自定义主题文件夹主题就是一个放进配置目录的文件夹文件夹名即主题 ID~/.config/zennotes/ └── themes/ └── my-theme/ ├── manifest.json # 名称、作者、版本、描述、modes ├── theme.css # 主题样式必需 └── my-font.woff2 # 可选字体/图片资产manifest.json最小可用示例{ name: My Theme, author: you, version: 1.0.0, description: A short description., modes: both }modes取light/dark/bothpreview色板仅用于设置页的色块展示缺失 manifest 也能工作主题会以文件夹名显示并假定支持双模式更省事的方式在Settings → Appearance → Custom themes点New theme应用会自动生成中性浅色/暗色起始令牌你只管改色首次运行时应用会自动种入一个完整示例主题Soft Paper移植自 Nick Milo 的同名 Obsidian 主题和一份 README 说明照着改即可。加载逻辑见 apps/desktop/src/main/custom-themes.ts。设计令牌 --z-* 完全速查表theme.css 怎么写ZenNotes 的颜色全部收敛在一组--z-*CSS 变量上定义于 packages/app-core/src/styles/index.css。注意令牌值是空格分隔的 RGB 三元组方便 Tailwind 写透明度令牌组常用变量作用背景--z-bg--z-bg-softer--z-bg-1~4画布、侧边栏、面板层级文字--z-fg-1--z-fg-2--z-grey-0~2正文、次级、弱化文字强调色--z-accent--z-accent-soft--z-accent-muted按钮、链接、选中态语法色--z-red--z-green--z-yellow--z-blue--z-purple--z-aqua代码高亮、任务状态、图表配色阴影--z-shadow全局阴影颜色一个支持明暗双模式的最小主题骨架——暗色覆盖写在[data-theme-modedark]下永远不要硬编码主题名:root { --z-bg: 255 255 255; --z-fg-1: 29 29 31; --z-accent: 0 122 255; } :root[data-theme-modedark] { --z-bg: 28 28 30; --z-fg-1: 255 255 255; --z-accent: 10 132 255; }除了令牌你还可以写任意 CSS自定义字体font-face--z-text-font、背景纹理、组件级调整。下面这张截图里的语法着色与链接配色正是--z-*令牌在编辑器中的真实呈现⚠️ 字体与图片资产必须与theme.css同目录并通过zen-theme://my-theme/my-font.woff2引用远程http(s)地址一律不会被加载这是安全红线。覆盖任意 UI 细节overrides 文件编写步骤只想改一处细节、又不想动整个主题把.css文件丢进~/.config/zennotes/overrides/然后在Settings → Appearance → Overrides里开启即可。启用中的覆盖文件按文件名顺序拼接后注入在主题之后因此用:root[data-theme] {}作选择器可同时压过内置主题与自定义主题远程 URL 同样被禁止加载应用自带的example.css是一本配方手册默认全部注释不影响外观里面给了几个现成配方/* 所有主题上更冲的强调色 */ :root[data-theme] { --z-accent: 255 59 48; } /* 仅暗色模式OLED 纯黑背景 */ :root[data-theme-modedark] { --z-bg: 0 0 0; --z-bg-softer: 12 12 12; }完整令牌清单与配方见 apps/desktop/src/main/overrides.ts。不写代码也能换配色Quick Tweaks 颜色与预设不想碰 CSSSettings → Appearance → Quick Tweaks提供一套经过可读性筛选的免代码控制色板强调色 6 个语法/诊断色点色块直接换Density 密度预设Compact / Default / Comfortable同步缩放编辑器标签条与侧边栏、笔记列表行高紧凑模式下笔记行还会收起为一行摘要Corners 圆角预设Square / Default / Rounded通过全局--z-radius-scale乘子一次性方化或柔化所有圆角面板内置实时预览改色即刻可见。选中的值以themeTweaks存入可携带配置并注入为最顶层样式确保手动选的一定赢。预设的度量来源见 packages/shared-domain/src/overrides.ts。实时生效与开发者工具改完立刻看见主题与覆盖目录都被文件监听器盯着200ms 防抖编辑器里保存一下界面立即刷新无需重启 ⚡设置页的Developer tools按钮可打开检查器点选任意元素、找出它的类名与令牌再回头写 CSS调试闭环很短三层样式的注入顺序active-theme → overrides → tweaks在渲染端由 packages/app-core/src/lib/custom-themes.ts 保证切换明暗模式时无需重新注入延伸阅读源码与文档路径资料路径主题系统设计文档docs/explanation/custom-themes-and-community-gallery.md令牌推导与主题脚手架packages/shared-domain/src/custom-themes.ts桌面端加载器与 zen-theme:// 协议apps/desktop/src/main/custom-themes.ts覆盖文件加载与 example.cssapps/desktop/src/main/overrides.ts默认--z-*令牌定义packages/app-core/src/styles/index.css从一个文件夹、一份theme.css起步ZenNotes 的外观就完全由你定义——改配色是十分钟的事改字体和圆角只需两行 CSS 【免费下载链接】zennotesKeyboard-first local Markdown notes with Vim motions, diagrams, and MCP integration.项目地址: https://gitcode.com/gh_mirrors/zenn/zennotes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考