当前位置：首页 > news >正文

tt-rss-feedly-theme进阶改造：如何修改_variables.less打造你的专属配色方案？

news 2026/8/20 16:26:23

tt-rss-feedly-theme进阶改造：如何修改_variables.less打造你的专属配色方案？

【免费下载链接】tt-rss-feedly-themeFeedly theme for Tiny Tiny RSS项目地址: https://gitcode.com/gh_mirrors/tt/tt-rss-feedly-theme

tt-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 与 npm）：

git 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.less）：

@default-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.less（@default-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，再到偏好设置中选中即可。