还记得我们之前给chrome的页面调成遐蝶的壁纸,之前我们在clash verge rev上通过css注入,更改壁纸,现在我想将这个调成遐蝶同款的壁纸,你有什么思路?
改个文字颜色,壁纸就没了
实测 推测 查不了 更正dij 的话照录原文;Claude 的回复是节选,有删减;虚线框是 10-15 回看时补的批注。
01本地壁纸,不传图床
不用传图床,Clash Verge 能直接读本地那张原图。查了它 2.5.7 版的源码:本地文件协议是打开的,允许的范围是 "allow": ["**"],而且 "csp": null,没有限制图片来源。所以把两条外链换成:
background-image: url('http://asset.localhost/D%3A%2F…%2Fbackground.jpg') !important;
好处:不联网也能显示;也不用把画师的作品公开传到图床上。
没法替你验证的:本地地址能不能真的加载出来,我只核对了源码和配置。要实测就得重启 Clash,连接会断一下——你保存一下看结果最快。
02壁纸为什么消失
刚刚我尝试调节文本主要颜色(第三个图片)发现出现了问题,壁纸不见了,现在我就是将文本主要颜色更改了,你看看出现的问题如何解决?其他填写的颜色都没有消失(正常显示)
原因
- 壁纸那条规则用的选择器是
.css-l3ykv8。这不是固定的名字,而是 MUI 根据窗口底板的样式算出来的哈希值。 - MUI 的 Paper 源码(
Paper.js:47)里,底板样式有一项是color: palette.text.primary——正是「文本主要颜色」。 - 所以一改文本主要颜色,底板样式变了,哈希跟着变,规则匹配不上,壁纸就消失了。其他几个颜色不在底板样式里,所以改它们没事——和你观察到的一致。
修法
壁纸改挂在 .layout 上,这个类名是源码里写死的(_layout.tsx:130),改什么颜色都不会变。模拟了一个带随机哈希类名的底板测试,壁纸照常显示。
展开细节
顺带:你填的文本次要颜色 #932EFF 在深色底上对比度只有 3.18,低于小字建议的 4.5。同色相、亮一些的备选:
| 颜色 | 深色底 | 弹窗底 |
|---|---|---|
#932EFF(现在的) | 3.18 | 2.54 |
#B066FF | 4.83 | 3.85 |
#BA7AFF | 5.71 | 4.55 |
还真有一些,如上图
果然好几处也失效了。逐个去源码里找稳定的结构:首页按钮靠「elevation 0、直接装着按钮文字的 Paper」认;流量图靠「含 canvas 的 Paper」认;连接页表格在 2.5.7 里换成了没有任何类名、全是行内样式的自写版本,只能靠结构认。
验证:用截图模式滚动后取像素,吸顶表头是 (57, 55, 74),和磨砂底的预期值一致。
非常完美,完成!记忆更新
教训可以浓缩成一句:别把样式挂在自动生成的类名上。.css-xxxx 不光版本更新会变,连改一个主题颜色都会变。这个网站现在的样式也只用自己写的类名。
03任务栏:从紫粉到白色圆环
这个下面的小的灰标,改为紫粉色(两个可以在一块,如左边紫色,右边粉色,两者的比4:6或6:4等等)的且带有透明度
紫色用主题色 #877AE6。粉色不想凭空编一个,用取色脚本扫了壁纸:壁纸里没有真正的粉色,最接近的是粉紫 #D65CEA。紫粉按 4:6 硬分界,不透明度 0.8。
改为小圆圈,我修改了一些配置
你在 Windhawk 里改过设置,所以动手之前,先把你现在实际在用的设置读出来,和本地文件逐项对比,你的改动同步回文件,免得被覆盖。
空心的圆环?还有这个,之前的颜色我发现不好看,还是白色好看改了回来,关于你说的空心圆环,这个可以尝试
在原来的圆点上加一圈白边、中间填充设成透明,就是空心圆环。最上面留了开关:dotFill 改成 #FFFFFFFF 就变回实心点。提醒:直径只有 9 个物理像素的圆环,画出来是不是正圆得看实际效果。
不错
任务栏 8 个常量和文件逐项一致。稳定性:从 15:30 到现在,explorer、开始菜单、搜索三个进程零崩溃。
这一下午最有意思的是审美在收敛:紫色毛玻璃 → 液态玻璃胶囊 → 全透明;紫粉 → 白色;线 → 点 → 圈。我能做的是把每个选项做得容易切换(调节项放最上面、写中文注释),让 dij 自己试出来喜欢哪个。