建议深色模式下当前tab上的文字颜色改成白色

[bearcolin]

深色主题下，主题色亮一点，tab上的字就看不清，暗一点，页面上文字颜色又看不清，能让两处看起来都正常的颜色选择范围很小，就很尴尬。

浅色模式这个tab上的文字是纯白的，这样只要主题色亮度稍微低一点就能看清，但深色模式下这个文字颜色是个灰的，就会造成前面说的那个问题。

再就是深色模式下tab栏鼠标hover状态下的下划线颜色，用的浅色模式的主题色。

[SpeedPartner]

我觉得你issue发错地方了...是18.06的主题吗?

[SpeedPartner]

改了18.06的
自定义主色调在[暗色模式]下更残废了🤣

[bearcolin]

我觉得你issue发错地方了...是18.06的主题吗?

我以为这个深色主题部分的问题是靠config插件修复，没想到直接改主体啊？

[bearcolin]

改了18.06的 自定义主色调在[暗色模式]下更残废了🤣

看了下你的修改说明，有种不好的预感😨

[SpeedPartner]

说实话,[暗色模式]下其实也没必要使用自定义主色调,很多网页和APP都是这样的

[bearcolin]

说实话,[暗色模式]下其实也没必要使用自定义主色调,很多网页和APP都是这样的

感觉像是“为了避免生出来孩子不健康，直接给绝育了”。。

[SpeedPartner]

暗色模式下,比如文字和线条太细的话,就会导致设置深色时看不清,所以直接取消自定义主色调了;
而大色块类型menu active的自定义主色调则继续保留.

[bearcolin]

暗色模式下,比如文字和线条太细的话,就会导致设置深色时看不清,所以直接取消自定义主色调了; 而大色块类型menu active的自定义主色调则继续保留.

菜单hover状态下划线那个问题，如果没办法改成用深色模式的主题色的话，写死倒不是不可以。

其实之前的主要问题是，主题颜色可选的亮度的上限跟下限夹得范围太小。只要把我说改白色那个地方改了就能解决一个上限的问题，可选范围就已经足够大了，用户别用特别暗的颜色，在深色背景上文字都是可以看清的。

但如果直接文字颜色也不能改写死的话，只改一个菜单选中颜色不仅没啥意义，而且还可能会还有主题色跟写死的文字颜色搭在一起不好看的问题，还不如直接取消主题色算了。

个人愚见，仅供参考。

[bearcolin]

另外还有个比较好奇的地方是，为什么不在config插件里改啊？

这个issue是用了config插件才会产生的，如果不用config的话，首先没有深色模式可以选，其次默认那个蓝色在深色浅色模式下都是可用的。只有用户自己改了其他颜色才可能会有问题。

[jerrykuku]

看得讨论很激烈,我最近也意识到 其实单独指定深色模式的颜色不太合理，但是如果深色模式直接使用亮色的颜色的话，确实会出现明度问题，所以我想取消暗色的单独颜色指定，而是通过lua 脚本来计算出降低明度的颜色。已经有了初步的想法。

[SpeedPartner]

同意取消深色模式自定义主色调.

不过后者我觉得也没必要,如果用亮色模式的自定义主色调,通过降低明度应用到深色模式的话,也会出现问题;比如自定义的主色调为深色,降低明度大概率依旧看不清.

要么就固定提供几种在深色模式下显示效果尚可的可选色调.

[bearcolin]

看得讨论很激烈,我最近也意识到 其实单独指定深色模式的颜色不太合理，但是如果深色模式直接使用亮色的颜色的话，确实会出现明度问题，所以我想取消暗色的单独颜色指定，而是通过lua 脚本来计算出降低明度的颜色。已经有了初步的想法。

你们是不是都把问题搞复杂了啊？明明只用改一个选中菜单上的文字颜色就能解决很大一部分问题了……

[bearcolin]

同意取消深色模式自定义主色调.

不过后者我觉得也没必要,如果用亮色模式的自定义主色调,通过降低明度应用到深色模式的话,也会出现问题;比如自定义的主色调为深色,降低明度大概率依旧看不清.

要么就固定提供几种在深色模式下显示效果尚可的可选色调.

如果不把深色模式当作浅色主题的附属，而是当作另一个独立的主题配色方案，是不是让用户自己指定深色主题颜色就是很正常的需求了？为啥一定要区别对待，深色模式低人一等么……

能想到专门装个config插件来调颜色换背景的人，肯定都是对个性化有需求的人，愿意尝试在有限的范围内利用现有的自由度调整出自己满意的配色，不要把用户当成纯小白啊。对于单个用户来说，大部分应该都是只用深色或者只用浅色模式，两种模式是平等的关系，而不是主用浅色偶尔情况下才用深色。把深色模式功能改残废了，对于喜欢深色模式的用户来说，那这个config插件就变成一个换登录图的工具了？问题是谁没事会停在自己路由器登录界面盯着那个背景看啊……

[SpeedPartner]

看得讨论很激烈,我最近也意识到 其实单独指定深色模式的颜色不太合理，但是如果深色模式直接使用亮色的颜色的话，确实会出现明度问题，所以我想取消暗色的单独颜色指定，而是通过lua 脚本来计算出降低明度的颜色。已经有了初步的想法。

你们是不是都把问题搞复杂了啊？明明只用改一个选中菜单上的文字颜色就能解决很大一部分问题了……

选中菜单的字体改成高亮的白色确实能解决;
但是暗色模式下应避免使用亮度过高的字体颜色,避免刺眼.

[SpeedPartner]

这就是为什么绝大多数App不会有RGB主题色调,一般都是给几个固定的主题颜色选择.
颜色一多,就总会有各种问题;然后衍生出一些人既要又要还要的问题.

[bearcolin]

看得讨论很激烈,我最近也意识到 其实单独指定深色模式的颜色不太合理，但是如果深色模式直接使用亮色的颜色的话，确实会出现明度问题，所以我想取消暗色的单独颜色指定，而是通过lua 脚本来计算出降低明度的颜色。已经有了初步的想法。

你们是不是都把问题搞复杂了啊？明明只用改一个选中菜单上的文字颜色就能解决很大一部分问题了……

选中菜单的字体改成高亮的白色确实能解决; 但是暗色模式下应避免使用亮度过高的字体颜色,避免刺眼.

只是把当前选中这个菜单的文字颜色改成白的，不是要所有菜单文字都改成白的，就那么一小块不会刺眼的。整个系统里的按钮上的文字全是纯白的。包括菜单当前选中那个图标也是白的，右边的小箭头也是白的，也没人说刺眼啊。

至于主题色如果选的太刺眼，人自己会换，这个是正常的自由度吧。

[SpeedPartner]

那么你的图1的选中菜单字体颜色,你认为改成什么颜色可以看清?

[SpeedPartner]

你想要自定义RGB,又觉得某些颜色不合适,那就继续更换其它合适的颜色直到满意为止.
那么我认为你这个issue也没必要啊,毕竟你也知道"人自己会换",我之前也是这么设置的深色主色调,比如用亮色模式的默认主色调,稍稍降低明度后应用在暗色模式下的效果就不错.

[bearcolin]

那么你的图1的选中菜单字体颜色,你认为改成什么颜色可以看清?

改成白色就可以啊，一开始就这么建议的。

[SpeedPartner]

所以你只是在考虑你自己吗?
你试试把色调亮度再调高一些,不就又会看不清了?
你为何不降低这个色调的亮度以搭配这个灰色字体呢?

[bearcolin]

你想要自定义RGB,又觉得某些颜色不合适,那就继续更换其它合适的颜色直到满意为止. 那么我认为你这个issue也没必要啊,毕竟你也知道"人自己会换",我之前也是这么设置的深色主色调,比如用亮色模式的默认主色调,稍稍降低明度后应用在暗色模式下的效果就不错.

自己会换的前提是有足够的自由度的情况下吧，我也不是没换过，就是因为换了觉得有问题，自由度太低了能换的范围太小了，才提的issue啊。把那个灰色文字改成白的，那么主题色的选择范围就会大很多。这个改动性价比多高……而且目测也不会产生什么不好的影响。

[bearcolin]

所以你只是在考虑你自己吗? 你试试把色调亮度再调高一些,不就又会看不清了? 你为何不降低这个色调的亮度以搭配这个灰色字体呢?

亮度降低了文字颜色就看不清了啊……
而且我都已经用深色模式了我为啥要用那么亮的主题色呢？

[SpeedPartner]

#4e5eba
可以试试这个,就会好很多

[bearcolin]

我不否认现在这个状况是可以有合适的颜色的，问题不是我想要选择范围更多一些吗……

就算不说自由度，你觉得当前选中的menu文字跟未选中用一个灰色合适吗？一个menu上左边icon跟右边的箭头都是白色，中间文字是灰色的OK吗？

[SpeedPartner]

"自由度太低了能换的范围太小了",这不是很正常吗?
从美术常识来说,白纸上书写作画就是最佳的,你有见过多少人用黑纸的吗?这是客观事实啊;你难道要说那些不用黑纸书写和作画的都是歧视不成?😧
另外,从深色模式的设计主旨来说,护眼,舒适度,可读性,普适性是最重要的.

[bearcolin]

不好意思，我回看了一下之前的沟通过程，感觉我的语气可能有些不太好，先抱歉哈。

之所以我一开始就明确建议把这个menu文字的颜色改成白色，而不是只提出现在的问题，是基于我的认知，经过思考的结论，主要基于以下几点：

1. 只用改动一个色值，改动成本几乎可以忽略不计；
2. 可以让主题色彩的选择范围相对大很多，不会像现在深色模式的自定义主题色功能略显鸡肋（只代表我个人）；
3. 目前选中menu上左边的icon和右边的箭头都是白的，文字是灰的在视觉上不够协调，改成白的可以保持一致；
4. 未选中的menu文字现在跟选中都是一个灰色，没有区分，改成白色可以有更明显的区分（非必要）；
5. 对于原本满意主题色，用习惯了的用户来说，这里文字改成白色不会跟原先的颜色产生太大差异，要论感受，只会比现在更好不会更差。

对于这个问题可能每个人的看法不一样，站在不同角度解决问题的思路肯定也会有区别。我提的建议也只是基于我的理解，针对眼下的问题的折中方案，我也相信在它未来变得越来越好用的过程中，单单改一个文字颜色肯定是不够的。

不论开发者最后决定用什么方案，我相信肯定也是基于开发者自己认为的最好方案去做的，我尊重开发者的决定。

[SpeedPartner]

先改回去了,顺便补充适配了 [左侧导航主菜单] 指针悬浮时 的底部线条颜色.

另外按照你的建议,在 指针悬浮时 & 选中时,字体颜色改为#fff(白色);子菜单选项卡也一样.

但是其他跟随自定义主色调的字体颜色 jerrykuku/luci-theme-argon@142e968 我还是保留自己的看法,写死颜色了,这样一来深色模式下,可用的颜色范围会更多,且尽可能地减少对可读性的影响.

[bearcolin]

突然想到其实可以让主题色用在文字上的时候做一个插值映射，比如在menu背景和下划线是实际主题色，但是用到主题色的那些文字会在主题色的色值上加一定比例的白色（例如50%，就像在图形处理软件里给它一个透明度，下面垫白色）。这样的话如果用不同色调的主题色，文字在色调上都是一致的只是明度不同，也会解决主题色太深的时候导致字看不清楚的问题。

[SpeedPartner]

可以用filter: brightness(2);的滤镜提升颜色的两倍亮度的方式;
不过自定义主色调选用浅色时(如亮色模式默认主色调#5e72e4),那么字体颜色会变成亮蓝,比较刺眼,所以我不推荐该方案,普适性较差.

我建议的方案:使用text-shadow: 1px 1px 2px #000;,给字体添加黑色阴影,提升对比度,让字体看起来像浮雕一样,可以少许提升深色字体的清晰度.

---

[SpeedPartner]

字体阴影,再改成粗体应该够了

[bearcolin]

这个颜色你觉得刺眼吗？

模拟在做设计时的处理方法，70%透明度的主题色#5e72e4下面垫#CCC，得到颜色#7F8DDD。之前说的垫白色可能会有点太亮，#CCC是跟旁边文字一样的，会更柔和点。

计算方式（问的 new bing）：

将两种颜色转换为 RGB 模式。#5e72e4 可以转换为 (94, 114, 228)，#ccc 可以转换为 (204, 204, 204)。

然后，根据透明度计算新的颜色值。#5e72e4 的透明度为 70%，所以它的 RGB 值分别为 94 * 0.7 = 65.8，114 * 0.7 = 79.8 和 228 * 0.7 = 159.6。#ccc 的透明度为 (1-0.7) = 0.3，所以它的 RGB 值分别为 204 * 0.3 = 61.2，204 * 0.3 = 61.2 和 204 * 0.3 = 61.2。

最后，将两种颜色的 RGB 值相加得到新的颜色值：65.8 + 61.2 = 127，79.8 + 61.2 = 141 和 159.6 + 61.2 = 220.8。因此，最终的颜色值为 (127, 141, 221)，即 #7f8ddd。

[bearcolin]

换了几个不同的颜色，不同亮度的，感觉用这个算法算出来的都还行。

[SpeedPartner]

刺眼是指该颜色提升2倍亮度后的方式,如果换成亮度再高一点的颜色就更不行了.

你这个方案光靠CSS没办法实现,得再写JavaScript (摔键盘)

[SpeedPartner]

jerrykuku/luci-theme-argon@ce06b26
已实现,等正式合并吧

[bearcolin]

我问了下ChatGPT，它给了个建议是用 mix-blend-mode 属性，我在他的帮助下做了个demo对比了mix-blend-mode各种模式的效果。

我发现用screen和exclusion这两种模式可以部分接近我之前说的那种效果，在颜色比较暗的情况下适当提升一点亮度同时降低饱和度。

https://bearcolin.github.io/temp/argon_dark_themecolor_demo.html

[SpeedPartner]

我最开始就是测试的这个方式,效果并不OK;
把字体大小调整到和主题一样的font-size: 90%;后,浅色字体效果还不错,不会太亮;
但是过于深色的字体还是容易看不清.

你之前的哪个思路,我测试效果就还不错.

你可以复刻我的主题复刻仓库,18.06分支已经支持Github Actions云编译主题ipk了.