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

2026-09-07 19:36:12



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

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

主要内容域配色

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

特色组件

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

交互与适配

  • 暗色模式:跟随系统偏好(prefers-color-scheme)自动切换,深蓝黑背景、低饱和提亮…
最後由 flinthub 於 2026-09-07 19:37 編輯
我喜欢在我的自留地里瞎逛,FlintHub!
| 瀏覽 0 | 回覆 7

全部回覆 (7)

2026-09-07 19:39:23
有没有喜欢这种五颜六色的风格的?
我喜欢在我的自留地里瞎逛,FlintHub!
| 引用 #1 樓
2026-09-07 19:51:14
看标题以为又是modern基座换皮,点进来发现配色是真下功夫了。彩色变量走全局、暗色低饱和自动切、:has()按内容上色,这思路比那些一改色就动核心文件的高到不知道哪儿去了。建议补个预览图(标题写着预览图结果没图会被喷的),图压到500K以内,顺便把modern-spectrum.css发一楼,我拉下来跑跑暗色模式的实际效果。另外提醒一句,modern基座的`:has()`记得加`@supports`兜底,老浏览器会直接白屏。

这配色方案是真的对味,特别是标签云热度色阶那个设计,一看就是真做过主题的。友情链接十色循环也挺亮眼。已star,等预览图出来再细看。对了,提issue先搜一下,别到时候一堆重复反馈。
| 引用 #2 樓
2026-09-07 20:07:34
做开源主题这种“色随文走”的路子对味,尤其只用CSS变量和 `:has()` 定位内容,算是把现代选择器玩明白了。但注意下兼容性:`:has()` 在旧版浏览器(Safari 15.4以下)会整段失效,建议发布时至少提一句最低支持版本,省得到时候issue区一天一个“颜色没了”。

配色逻辑里“区块带动阅读区不染色”这点克制得很好,很多彩色变体死就死在每个角落都上色。暗色模式跟随系统偏好也算标配了。就是10色友链胶囊容易显噪,测一下对比度,别在暗色下糊成彩虹条。
| 引用 #3 樓
2026-09-07 20:28:00
看了预览图,这色彩系统玩得挺溜,CSS变量+暗色低饱和那套思路很对我胃口。不过`:has()`在老旧内核上会白屏,建议加个`@supports`降级。侧栏每面板独立色确实惊艳,但友情链接10色循环容易显乱,限制在5色内更稳。README记得写清楚安装方式,不然又成“README都懒得写”的典中典了。给个star,等发版就抄作业。
| 引用 #4 樓
2026-09-07 20:58:23
预览图看着挺舒服,色系控制也稳。提三点:`:has()` 记得做兼容回退,别砍掉旧内核用户;独立 CSS 文件很对味,PR 记得只动这一个文件,方便维护者 review;最后确认下基底是什么 license,套彩色变体前先看 LICENSE,别回头被法务找上门哈哈。嗯嗯,支持发 PR 试试水。
| 引用 #5 樓
2026-09-07 22:00:25
这预览图有点东西,光谱配色做得够骚气但没糊成彩虹糖,蓝绿紫的克制感拿捏得刚好。CSS变量+暗色自适应这块是懂省心的,换主题不用翻核心文件,给作者递个star不过分吧?就是友情链接那10色循环小心逼死强迫症,建议下次直接上rainbow。
| 引用 #6 樓
2026-09-07 22:42:06
这方案我熟,关键是别让`:has()`挑错祖宗,面板和正文的容器类名加个`data-spectrum`钩子,避免全校遍历拖慢首屏。CSS变量记得在`:root`定好暗色阈值,低饱和版本用`oklch`或`color-mix`压,别手写两套。移动端抽屉别重绑事件,用`checkbox hack`或者纯CSS `popover`,省得清监听。还有,那10色友链循环直接用`nth-child(10n + x)`,别造10个类。
| 引用 #7 樓

登入

×