尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
tt-rss-feedly-theme进阶改造:如何修改_variables.less打造你的专属配色方案?
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),仅供参考
RELATED

相关推荐

框架质疑学习法:在“懂了”与“不会用”之间,造一座桥

框架质疑学习法:在“懂了”与“不会用”之间,造一座桥

文章目录框架质疑学习法:在“懂了”与“不会用”之间,造一座桥第一步:先造一架“破马车”,而非等待一辆“法拉利”第二步:戴上“有色眼镜”,与权威文本对话第三步:完成“模式迁移”,…

📅 2026/11/1 12:27:17
Excel VBA宏实现采购单据自动化生成:从数据到格式化收购单的一键解决方案

Excel VBA宏实现采购单据自动化生成:从数据到格式化收购单的一键解决方案

这次我们来看一个用 VBA 自动生成收购单的解决方案。如果你经常需要处理采购、入库或财务对账,手动从 Excel 明细表整理成格式化的收购单,不仅耗时还容易出错。这个项目就是通过一段 VBA 宏代码,实现“一键生成”,将零散的数据条目…

📅 2026/10/14 12:28:50
创业团队技术选型的常见误区

创业团队技术选型的常见误区

创业团队技术选型的常见误区 “最小可行方案的范围切分”说的不是一套通用技巧,而是 技术人的商业思维与创业避坑指南 中一个应被单独处理的环节。MVP 的范围由要验证的假设决定,不由演示时的完整感决定。本文不假定任何真实公司数据或项目经历&#xf…

📅 2026/10/14 9:11:35
MORE NEWS

更多资讯

📰

启动报Port 8088 was already in use?先查是谁占的

启动报Port 8088 was already in use?先查是谁占的 项目启动报 Port 8088 was already in use,意思很直白:这个端口已经有人占了。 先说原理:端口是"门牌号",一间房只住一个进程 端口就是一台机器上的门牌号…

📰

担心文档上云?本地运行的办公AI才敢放心用

单位上周开了个会,主题是"AI 提效",散会时领导补了一句:涉及客户资料的文档,不许往云端传。这话一出,会议室里本来跃跃欲试的同事全蔫了——大家平时用的那些在线 AI,文档一上传就不知道存哪儿去…

📰

先能用,再好用:从烂尾复盘到两周上线,全栈项目的‘原型—快速迭代‘方法论

先能用,再好用:从烂尾复盘到两周上线,全栈项目的“原型—快速迭代”方法论 全栈学习路径的文章已经很多了:怎么选技术栈、怎么搭环境、怎么记文档,几乎每个方向都有人写。但一个更扎心的问题很少有人正面讨论——为什…

📰

深度思考模式把 ARC-AGI-2 从 17.6% 拉到 45.1%:对照 Gemini 3 Pro 的三份能力评测,看‘会思考‘改写了哪些边界

深度思考模式把 ARC-AGI-2 从 17.6% 拉到 45.1%:对照 Gemini 3 Pro 的三份能力评测,看“会思考”改写了哪些边界 一、先说结论:变强的不是“知识”,而是“解法” 每次新模型发布,评测榜单都会涨几个点,大…

📰

1.c++入门篇

1.c中的关键字asmdoifreturntrycontinueautodoubleinlineshorttypedefforbooldynamic_castintsignedtypeidpublicbreakelselongsizeoftypenamethrowcaseenummutablestaticunionwchar_tcatchexplicitnamespacestatic_castunsigneddefaultcharexportnewstructusingfriendclassext…

📰

《江灯合声》:有可行的分框版,也仍可以选择连续鸣谢

武汉江岸区栎坡合唱团在免费节目册《江灯合声》中,以表格集中鸣谢资助者。各家共同要求改为独立小框,团里仍想保留表格。现有全名与支持事项清楚可见,双方此前未承诺具体排版。我支持保留表格。补充的试排材料让选择更具体:分框能…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬