tt-rss-feedly-theme进阶改造如何修改_variables.less打造你的专属配色方案【免费下载链接】tt-rss-feedly-themeFeedly theme for Tiny Tiny RSS项目地址: https://gitcode.com/gh_mirrors/tt/tt-rss-feedly-themett-rss-feedly-theme 是 Tiny Tiny RSS自托管 RSS 阅读器最受欢迎的 Feedly 风格主题之一。它虽然自带默认、Sepia、高对比度等九套配色但官方 FAQ 明确说过主题颜色在编译期就已固定无法靠 CSS 变量修改。想要真正属于自己的专属配色方案唯一的正路就是修改源码里的 _variables.less 并重新构建。这篇教程将带你从零看懂这个文件的每一个颜色开关手把手完成一次完整的配色改造。上图中的全部变体其实都派生自同一套 Less 变量。改对几个变量整个主题就能换血。为什么改不了颜色先搞懂 tt-rss-feedly-theme 的配色原理Tiny Tiny RSS 主题的文件结构非常清晰feedly*.css是编译产物真正的源码全部位于 src/ 目录下用 Less 编写。你在设置里能即时调整的字体与间距走的是 CSS 变量如--base-spacing、--font-size-post而所有颜色——背景、文字、强调色、边框——都是在构建时由 Less 变量计算后写死的。一句话总结想换专属配色必须动_variables.less然后重新编译。改造前的准备工作克隆源码并搭建构建环境动手前先克隆仓库构建需要 Node.js 与 npmgit clone https://gitcode.com/gh_mirrors/tt/tt-rss-feedly-theme cd tt-rss-feedly-theme npm install之后二选一npm start监听 src/ 目录改动即自动编译适合边改边看效果npm run dist一次性构建、压缩并产出dist/目录适合改完直接部署。构建脚本都定义在 package.json 中编译入口则是各变体文件如 feedly.less、feedly-sepia.less、feedly_night.less。⚙️认识 _variables.less一份完整的配色地图打开 src/_variables.less你会发现它大致分为三大区域。① 基础色板第 52~62 行red: #d45; orange: #e84; green: #6b5; blue: #39c; default-fg: black; // 默认前景色文字 default-bg: white; // 默认背景色default-fg与default-bg是整套主题的阴阳两极几乎所有界面颜色都由它们派生而来。② 透明度渐变刻度第 64~95 行fade1到fade9是一组递进的透明度刻度再配合fade(default-fg, ...)生成九档文字色淡化值。边框、图标、分隔线各取一档微调即可整体改变界面的深浅层次。③ 语义颜色第 97~116 行color-selected: yellow; // 选中态 color-marked: green; // 星标 color-published: orange; // 已发布 color-error: red; // 错误提示这里集中定义了功能色——星标、发布、报错各司其职是定制个性化配色时最常动的位置。登录、找回密码这类工具页面同样会被主题覆盖改完变量后它们会自动跟随新配色。三步打造你的专属配色方案第一步替换主背景与主文字色最直观的入门改动就是替换default-fg与default-bg。想要米黄纸感参考 Sepia 变体的写法见 feedly-sepia.lessdefault-bg: hsl(45, 80%, 96%);它会连带影响边框、图标、按钮等所有派生色一步到位。第二步定义强调色与链接色强调色color-accent控制滚动条、选中项、按钮等高光位置链接色color-link控制正文链接。夜间版的琥珀强调色定义在 _night-amber.less 中color-accent: #b87d2c;把这行改成你喜欢的品牌色整个主题的气质立刻不同。第三步微调对比度觉得界面太灰或太刺眼调整fade*系列即可。高对比度变体就是这么做的参考 _high-contrast.less 将fade1从100%/15提升到200%/15层级感马上变强。改完保存npm start会自动重新编译刷新 TT-RSS 页面即可看到新效果。进阶技巧让亮暗主题自动切换_variables.less里有一行非常巧妙的逻辑第 120 行is-night: boolean(luma(default-fg) 50%);它会自动检测前景色亮度文字色越亮就判定为夜间模式。夜间深色背景定义在 _night.lessdefault-bg: #111。这意味着你只需维护好default-fg的亮度主题就会自动走对应的一套派生逻辑亮暗两套配色一次搞定。常见问题排查改完没生效确认你改的是 src/ 下的.less且已重新编译直接改feedly.css会被构建覆盖。只想微调字体间距不必动_variables.less在 TT-RSS 设置的 Customize 里写 CSS 变量即可例如--base-spacing: 30px; --font-size-post: 14px;。如何定制高对比度变体入口是 feedly-high-contrast.less 与 feedly-sepia-contrast.less它们在_variables.less基础上二次调整了 fade 档位。不想每次手动复制文件构建出dist/后把feedly*.css与feedly/目录放进 TT-RSS 的themes.local再到偏好设置中选中即可。移动端的偏好设置同样会被新配色覆盖改完记得在手机上刷新确认。结语掌握了 _variables.less 的变量体系你就拿到了 tt-rss-feedly-theme 配色的总开关。从换一档背景色到完整复刻一套品牌专属配色方案差的只是一次编译的时间。快去打造属于你的配色方案吧【免费下载链接】tt-rss-feedly-themeFeedly theme for Tiny Tiny RSS项目地址: https://gitcode.com/gh_mirrors/tt/tt-rss-feedly-theme创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
