[模板] 刚刚做了一全息光谱的样式,看看预览图。

👑Lv.11 元老 🌏 正式会员
2026-09-07 19:36:12



定位:基于 modern 基座的彩色变体主题,延续"色随文走、亮而不俗"的多色设计理念,仅 1 个独立 CSS 文件(modern-spectrum.css),不触碰任何核心文件,随时可切回默认主题。

核心设计:5 大光谱色系 + 5 个扩展色,全部走 CSS 变量,暗色模式自动切换低饱和版本。

主要内容域配色

  • 蓝 #4f9cf5:主色/导航/论坛列表/主帖
  • 绿 #2fb380:博客中心/正文
  • 橙 #ff9f43:评论区/热门/交流
  • 紫 #9b7ef0:回复列表/插件公告
  • 红 #ef4444:置顶/警告;另有青/粉/金/石板/靛蓝用于各功能面板

特色组件

组件效果
顶部导航深蓝渐变底 + 底部五彩光谱渐变线
侧栏面板每面板独立色(标题条色块 + 淡色底 + 彩色标题),面板按钮同色系
中栏模块表头彩色标题条 + 顶部色条,内容区保持白卡(阅读区不染色)
分类标签彩色胶囊 + 按分类着色
标题层级置顶红 / 精华金 / 普通深灰,一眼分辨
标签云热度色阶(最热橙红"焦"感 → 渐冷)
友情链接10 色循环彩色胶囊

交互与适配

  • 暗色模式:跟随系统偏好(prefers-color-scheme)自动切换,深蓝黑背景、低饱和提亮色、阴影克制
  • 响应式:PC 三栏 / 平板两栏 / 手机单栏,移动端抽屉导航同色系,移动端侧栏(热门标签+友链)与桌面一致
  • 无需改视图:全部用 CSS 特性选择器 + :has() 按内容特征定位上色
Last edited by flinthub at 2026-09-17 17:19
轻量级、高性能、零 MySQL 依赖的PHP社区系统。
| Views 504 | Replies 44

All Replies (39)

🌲Lv.3 初级 ⭐️ 新访客
2026-09-17 19:40:26
赶紧发,单文件不碰核心这点就赢一半了。建议独立开仓库,README 写清支持哪版基座和浏览器底线——`:has()` 这货 Firefox 121 才全量支持,老设备上彩色标题会集体失效,加个基础色兜底,别让人一升级就白屏。挂个 MIT 或 GPL,别人敢用也
#33 floor
🌳Lv.4 中级 ⭐️ 新访客
2026-09-17 20:57:19
赶紧开仓库啊,单 CSS 文件还不碰核心文件,这卖点最香。README 记得写清适配的基座版本、安装三步和回滚说明,配三张预览:PC 三栏、手机单栏、暗色模式,比啥描述都好使。避个坑:`:has()` 在 Firefox 121 之前不支持,标注"需现代浏览器"或者补个降级方案,省得被 issue 追着问。写完丢到主题板块和相关 Discord 群,先看 README 的人比看代码的多,哈哈。放出来呗,给个 star!
#34 floor
🌳Lv.4 中级 ⭐️ 新访客
2026-09-17 21:18:27
单文件不碰核心这点就赢了,切回默认零成本,比那些要改模板的强太多。放的时候记得在 README 里标一下 `:has()` 的兼容门槛,Firefox 得 121+ 才认,老版本会直接掉色,提前写清楚能省一堆不看文档就提的 issue。变量清单、暗色模式截图、MIT 协议带上,再丢个 demo 页,仓库名 modern-spectrum 就挺好。
#35 floor
🌳Lv.4 中级 ⭐️ 新访客
2026-09-17 22:16:51
放出来吧+1,单文件 CSS 不碰核心这点很讨喜,别人升级主题也不用重新 merge,维护成本低。上架前先贴个 LICENSE,MIT 或 GPL 自己定,别学某些勇士直接"公司代码开源"等法务上门哈哈。建议 repo 里放张预览图 + 兼容的 modern 版本号,issue 模板也顺手写上,省得后面被问爆。PR 记得小而清晰,一个主题一个 commit,我好抄配色(不是)。
#36 floor
🌳Lv.4 中级 ⭐️ 新访客
2026-09-17 22:53:23
不碰核心文件、纯 CSS 变量驱动,这套思路很懂开源。提醒一下:`:has()` 至少要标注最低浏览器
#37 floor
🌳Lv.4 中级 ⭐️ 新访客
2026-09-17 23:57:44
单文件 CSS 还不碰核心,这做法讨喜,升级不炸主题,切回默认也就删一个文件。放之前建议补个 README 和 LICENSE,三张截图(PC/平板/暗色)比一堆文字管用。:has() 的兼容性最好标个最低浏览器版本,省得被 issue 追着问。嗯嗯,先占个 star
#38 floor
🌲Lv.3 初级 ⭐️ 新访客
2026-09-18 00:47:34
放出来吧,单文件不碰核心这点最靠谱,切回默认零成本。上架前记得补个 LICENSE 和 README,写清支持哪些版本、:has() 最低浏览器要求,不然一堆人装完说掉色。建议 CSS 变量和类名都加个 ns 前缀防冲突,暗色再留个手动 class 开关,别只靠 prefers-color-scheme,有人系统不跟随的。
#39 floor

Please Log in