我要提问
ARTICLE DETAIL

资讯详情

前沿编程新知与开发实战干货的深度解读。

Actual Budget 自定义主题完全指南:从安装、编写到发布 CSS 主题

Actual Budget 自定义主题完全指南:从安装、编写到发布 CSS 主题 Actual Budget 自定义主题完全指南从安装、编写到发布 CSS 主题【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actualActual 是一款本地优先local-first的个人财务管理应用其界面配色完全由 CSS 自定义属性Custom Properties驱动这让自定义主题成为一项开箱即用的能力。本文以官方文档 custom-themes.md 为主体结合仓库源码完整讲解如何在 Actual 中从目录安装社区主题、直接粘贴 CSS 覆盖配色、按严格规范编写属于自己的主题并通过 GitHub 仓库发布到官方主题目录Catalog让读者掌握从用主题到做主题再到发主题的全链路技能。自定义主题机制概述Actual 的主题系统建立在两层 CSS 变量之上基础主题Light / Dark / Midnight定义了一整套以--color-*命名的语义变量例如页面背景--color-pageBackground、表格边框--color-tableBorder调色板Palette提供了--palette-*变量如--palette-gray900、--palette-purple400基础主题的--color-*变量大多直接引用它们。三层主题文件的真实位置以当前仓库为准为palette.css —— 调色板变量light.css —— Light 主题dark.css —— Dark 主题midnight.css —— Midnight 主题以 Dark 主题为例其页面背景实际是--color-pageBackground: var(--palette-gray900)见 dark.css而--palette-gray900: #080811定义在 palette.css 中。自定义主题的本质就是提供一个:root { ... }块覆盖任意数量的--color-*变量。运行时theme.tsx 会把基础主题 CSS 与已安装的自定义主题 CSS 一并注入页面自定义主题的变量声明会覆盖基础主题的声明从而改变全局配色。安装自定义主题方式一从官方目录Catalog安装这是最快捷的方式操作路径如下进入设置Settings→主题Themes在主题下拉框中选中Custom theme自定义主题主题安装器随即打开展示来自官方目录的可用主题列表点击任意主题即可立即安装。安装器会以每行 3 个主题卡片的形式展示对应源码中ITEMS_PER_ROW 3见 ThemeInstaller.tsx每个主题卡片包含6 色预览调色板3×2 网格由目录 JSON 中定义的colors数组渲染而来指向其来源仓库的链接若该主题与当前明暗模式匹配mode: light | dark才会显示在对应列表里见 ThemeInstaller.tsx。从实现上看点击主题后会发生如下调用链见 ThemeInstaller.tsxnormalizeGitHubRepo(theme.repo)把owner/repo规范化为完整 GitHub 仓库地址fetchThemeCss(repo)从https://raw.githubusercontent.com/{owner}/{repo}/refs/heads/main/actual.css拉取主题 CSS见 customThemes.tsembedThemeFonts(css, repo)若主题声明了font-face则把仓库内相对路径引用的字体文件自动抓取并内嵌为data:URI见 customThemes.tsvalidateThemeCss(css)对最终 CSS 做严格校验校验通过后以InstalledTheme结构保存到全局偏好prefs中主题 ID 由仓库地址通过generateThemeId生成见 customThemes.ts。目录本身来自 useThemeCatalog.ts它从raw.githubusercontent.com上的customThemeCatalog.json拉取 JSON 数组并校验其确实为数组。若目录加载失败安装器仍会保留下方粘贴 CSS区域供手动使用。方式二粘贴 CSS 直接应用不需要托管仓库也能试用自己的主题进入设置 → 主题 → Custom theme滚动到or paste CSS directly或直接粘贴 CSS区域把主题 CSS 粘贴进文本框点击Apply应用。粘贴的 CSS 会先经过validateThemeCss校验见 ThemeInstaller.tsx校验通过后被写入customCssOverride全局偏好若校验失败错误信息会显示在文本框下方。这一特性非常适合开发调试阶段快速验证配色无需先发布到 GitHub。主题格式与硬性规范自定义主题必须写成 CSS使用:root选择器 CSS 自定义属性基本格式如下:root { --color-pageBackground: #1a1a1a; --color-pageText: #ffffff; --color-buttonPrimaryBackground: #007bff; /* ... 更多变量 ... */ }官方规范中有几条硬性要求违反任意一条都会被校验器拒绝CSS 中必须恰好包含一个:root { ... }块且除此之外不能有任何其他内容font-face除外见下文只允许声明以--开头的自定义属性Actual 主题统一使用--color-*命名属性值既可以是字面量颜色、长度、数字、关键字也可以是var(--自定义属性名)引用——用于复用已有主题变量但不支持带回退值的var(--name, value)形式不允许出现任何其他选择器、at-rulesimport、media、keyframes等或嵌套块允许写注释校验阶段会被自动剥离。利用变量引用的合法示例:root { --color-pageBackground: #1a1a1a; --color-pageText: #ffffff; /* 复用另一个变量 */ --color-buttonPrimaryBackground: var(--color-pageTextLink); }可用的 CSS 变量自定义主题可以覆盖基础主题中的任意--color-*变量。以下按功能分组列出常用变量完整清单请直接查看上述三个主题文件页面Page颜色变量作用--color-pageBackground页面主背景--color-pageText主文本颜色--color-pageTextSubdued次级/弱化文本--color-pageTextPositive正向/强调文本--color-pageTextLink链接文本表格Table颜色变量作用--color-tableBackground表格背景--color-tableText表格文本--color-tableBorder表格边框--color-tableRowBackgroundHover行悬停背景按钮Button颜色变量作用--color-buttonPrimaryBackground主按钮背景--color-buttonPrimaryText主按钮文本--color-buttonNormalBackground普通按钮背景--color-buttonNormalText普通按钮文本侧边栏Sidebar颜色变量作用--color-sidebarBackground侧边栏背景--color-sidebarItemText侧边栏条目文本--color-sidebarItemTextSelected侧边栏选中条目文本图表Graph颜色--color-chartQual1到--color-chartQual9是一组 9 色的定性调色板直接影响自定义报表中柱状图、折线图、环形图等各种图表的系列配色文档原文明确impact custom report series colors in all variations - bar, line, donut, etc...。其底层机制可以从源码得到印证报表图表通过 chart-theme.ts 中的getColorScale返回var(--color-chartQual1)至var(--color-chartQual9)的引用因此只要覆盖这 9 个变量所有自定义报表的系列颜色都会随之变化。基础主题中它们又映射到调色板如--color-chartQual1: var(--palette-chartQual1)见 dark.css而调色板里--palette-chartQual1: #45b29d等定义在 palette.css。更多变量Dark 主题的完整变量覆盖了卡片、菜单、弹窗、表单、日历、提示框、预算数字、通知等几乎所有界面区域见 dark.css 全文约 270 行。要查看全部可用变量最可靠的方式是直接阅读 light.css、dark.css、midnight.css 三个文件或参考一个已有主题。校验规则与安全设计无论是粘贴 CSS 还是从目录安装主题都会经过严格的验证。综合文档与 customThemes.ts 的实现validateThemeCss第 428-481 行完整校验规则如下CSS 必须包含恰好一个:root { ... }块:root块内只允许 CSS 自定义属性以--开头且属性名只能由字母、数字、下划线和连字符组成不能为空、不能以连字符结尾值可以是字面量或var(--name)引用不带回退值不允许 at-rulesimport、media、keyframes等不允许嵌套选择器或嵌套块:root块之外不允许有任何内容。校验器对属性值采用白名单allowlist模式见 customThemes.ts只放行以下安全值十六进制颜色#RGB、#RRGGBB、#RRGGBBAA3/6/8 位rgb()/rgba()函数仅含简单数字或百分比hsl()/hsla()函数带单位长度值px、em、rem、%、vh、vw、vmin、vmax、cm、mm、in、pt、pc、ex、ch无单位数字安全关键字inherit、initial、unset、revert、transparent、none、auto、normal纯var(--name)引用。其他函数调用、URL、复杂表达式一律拒绝。若校验失败安装器会在界面下方显示具体的错误信息。关于font-face的特殊规则虽然文档正文强调:root内不允许 at-rules但当前仓库的实现额外支持主题声明font-face自定义字体并施加了更严格的安全约束见 customThemes.tsfont-face块必须出现在:root之前字体src只允许data:URI从 GitHub 安装时url(./fonts/MyFont.woff2)这类仓库内相对路径会被自动抓取并内嵌为data:URI支持woff2、woff、ttf、otf不允许 http/https 远程 URL也不允许/开头或包含..的路径见embedThemeFonts第 520-635 行单个字体解码后不超过2 MBMAX_FONT_FILE_SIZE全部字体总量不超过10 MBMAX_TOTAL_FONT_SIZE单字体抓取超时 15 秒FONT_FETCH_TIMEOUT_MS对于--font-*属性有专门的validateFontFamilyValue校验允许任意字体名含引号但禁止url()、expression()等函数调用见 customThemes.ts。这些限制的目的在于保护用户隐私不发起远程请求并防止 DoS属于主题安全设计的一部分。创建并发布 GitHub 托管主题仓库结构要发布主题供社区使用按如下结构托管在 GitHub新建一个 GitHub 仓库在仓库根目录main分支创建文件actual.css把主题 CSS 写入该文件。your-theme-repo/ └── actual.css # 主题 CSSactual.css示例:root { --color-pageBackground: #0d1117; --color-pageText: #c9d1d9; --color-pageTextSubdued: #8b949e; --color-buttonPrimaryBackground: #238636; --color-buttonPrimaryText: #ffffff; /* 按需添加你要自定义的其他变量 */ }发布后在目录中以owner/repo格式引用例如actualbudget/demo-theme。安装器正是通过该字符串构造 raw 地址拉取actual.css的见 customThemes.tsowner还会通过extractRepoOwner提取用于卡片展示第 27-34 行。完整示例参考官方演示主题仓库 包含多个主题变体示范了正确的 CSS 变量命名完整的主题定义结构。它是创建自己主题的最佳模板。将主题加入官方目录主题加入官方目录需要按上述结构在 GitHub 托管主题在 Actual 仓库发起 issue 或 pull request请求将主题加入目录提供owner/repo格式的仓库名提供6 个代表性十六进制颜色数组形式用于调色板预览。目录文件位于 packages/desktop-client/src/data/customThemeCatalog.json每条主题记录包含name主题名称repoGitHub 仓库owner/repo格式colors6 个十六进制颜色值数组用于调色板预览例如[#1a1a2e, #16213e, #0f3460, #e94560, #533483, #f1f1f1]modelight或dark决定该主题出现在哪个明暗模式列表该字段在目录 JSON 中存在安装器按其过滤显示见 ThemeInstaller.tsx。从 customThemeCatalog.json 可以看到当前目录已收录 Catppuccin 系列、Gruvbox 明暗、Rosé Pine 系列、Dracula、Nord、Matrix、Black Gold、色盲友好Okabe-Ito等多款社区主题它们的colors字段6 色正是 3×2 调色板预览的数据来源。作为提交参考多数条目的 6 色通常选取背景色、强调色与文本色等具有代表性的颜色。主题开发实用技巧官方文档给出以下建议从基础主题起步复制 Light、Dark 或 Midnight 任一内置主题的 CSS 变量只修改想改的颜色增量测试小步修改并在应用中即时查看效果善用粘贴 CSS 功能开发期间无需托管到 GitHub直接粘贴即可快速验证严格核对变量名变量名大小写敏感必须以--color-开头后接主题键名关注可访问性保证文本与背景之间有足够对比度确保可读性。源码层面的补充提示基础主题baseTheme字段从目录安装时安装器会根据条目的mode自动把baseTheme设为light或dark见 ThemeInstaller.tsx在auto跟随系统模式下明暗两侧可分别安装不同的自定义主题并各自基于对应基础主题见 theme.tsx。这意味着你的自定义主题只需覆盖少数差异变量未覆盖的部分会自动继承所选基础主题。旧版本兼容迁移仓库内置了一次性迁移逻辑migrateLegacyOverride见 customThemes.ts会把旧版存储在已安装主题 JSON 里的overrideCss字段迁移到独立的customCssOverride全局偏好迁移是幂等的见 theme.tsx升级到新版本后旧的自定义主题不会被丢弃。校验与存储一致性安装时注入页面的 CSS 是去除注释后通过校验的版本validateThemeCss返回cleaned见 customThemes.ts保证校验通过即按原样生效。结语Actual 的自定义主题体系在易用性与安全性之间取得了良好平衡普通用户可以在设置界面一键安装社区主题进阶用户可以通过粘贴 CSS 快速试色主题作者则可以基于:root--color-*变量的规范配合actual.css与 6 色预览把作品发布到官方目录供全球用户使用。需要深入了解变量全集时直接阅读 palette.css 与三个基础主题文件即可需要理解校验与字体内嵌等底层细节时customThemes.ts 是权威参考。【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表