建议深色模式下当前tab上的文字颜色改成白色
bearcolin opened this issue · comments
深色主题下，主题色亮一点，tab上的字就看不清，暗一点，页面上文字颜色又看不清，能让两处看起来都正常的颜色选择范围很小，就很尴尬。
浅色模式这个tab上的文字是纯白的，这样只要主题色亮度稍微低一点就能看清，但深色模式下这个文字颜色是个灰的，就会造成前面说的那个问题。
再就是深色模式下tab栏鼠标hover状态下的下划线颜色，用的浅色模式的主题色。
我觉得你issue发错地方了...是18.06的主题吗?
改了18.06的
自定义主色调在[暗色模式]下更残废了
我觉得你issue发错地方了...是18.06的主题吗?
我以为这个深色主题部分的问题是靠config插件修复，没想到直接改主体啊？
改了18.06的
自定义主色调在[暗色模式]下更残废了🤣
看了下你的修改说明，有种不好的预感
说实话,[暗色模式]下其实也没必要使用自定义主色调,很多网页和APP都是这样的
说实话,[暗色模式]下其实也没必要使用自定义主色调,很多网页和APP都是这样的
感觉像是“为了避免生出来孩子不健康，直接给绝育了”。。
暗色模式下,比如文字和线条太细的话,就会导致设置深色时看不清,所以直接取消自定义主色调了;
而大色块类型menu active的自定义主色调则继续保留.
暗色模式下,比如文字和线条太细的话,就会导致设置深色时看不清,所以直接取消自定义主色调了; 而大色块类型menu active的自定义主色调则继续保留.
菜单hover状态下划线那个问题，如果没办法改成用深色模式的主题色的话，写死倒不是不可以。
其实之前的主要问题是，主题颜色可选的亮度的上限跟下限夹得范围太小。只要把我说改白色那个地方改了就能解决一个上限的问题，可选范围就已经足够大了，用户别用特别暗的颜色，在深色背景上文字都是可以看清的。
但如果直接文字颜色也不能改写死的话，只改一个菜单选中颜色不仅没啥意义，而且还可能会还有主题色跟写死的文字颜色搭在一起不好看的问题，还不如直接取消主题色算了。
个人愚见，仅供参考。
另外还有个比较好奇的地方是，为什么不在config插件里改啊？
这个issue是用了config插件才会产生的，如果不用config的话，首先没有深色模式可以选，其次默认那个蓝色在深色浅色模式下都是可用的。只有用户自己改了其他颜色才可能会有问题。
看得讨论很激烈,我最近也意识到 其实单独指定深色模式的颜色不太合理，但是如果深色模式直接使用亮色的颜色的话，确实会出现明度问题，所以我想取消暗色的单独颜色指定，而是通过lua 脚本来计算出降低明度的颜色。已经有了初步的想法。
同意取消深色模式自定义主色调.
不过后者我觉得也没必要,如果用亮色模式的自定义主色调,通过降低明度应用到深色模式的话,也会出现问题;比如自定义的主色调为深色,降低明度大概率依旧看不清.
要么就固定提供几种在深色模式下显示效果尚可的可选色调.
看得讨论很激烈,我最近也意识到 其实单独指定深色模式的颜色不太合理，但是如果深色模式直接使用亮色的颜色的话，确实会出现明度问题，所以我想取消暗色的单独颜色指定，而是通过lua 脚本来计算出降低明度的颜色。已经有了初步的想法。
你们是不是都把问题搞复杂了啊？明明只用改一个选中菜单上的文字颜色就能解决很大一部分问题了……
同意取消深色模式自定义主色调.
不过后者我觉得也没必要,如果用亮色模式的自定义主色调,通过降低明度应用到深色模式的话,也会出现问题;比如自定义的主色调为深色,降低明度大概率依旧看不清.
要么就固定提供几种在深色模式下显示效果尚可的可选色调.
如果不把深色模式当作浅色主题的附属，而是当作另一个独立的主题配色方案，是不是让用户自己指定深色主题颜色就是很正常的需求了？为啥一定要区别对待，深色模式低人一等么……
能想到专门装个config插件来调颜色换背景的人，肯定都是对个性化有需求的人，愿意尝试在有限的范围内利用现有的自由度调整出自己满意的配色，不要把用户当成纯小白啊。对于单个用户来说，大部分应该都是只用深色或者只用浅色模式，两种模式是平等的关系，而不是主用浅色偶尔情况下才用深色。把深色模式功能改残废了，对于喜欢深色模式的用户来说，那这个config插件就变成一个换登录图的工具了？问题是谁没事会停在自己路由器登录界面盯着那个背景看啊……
看得讨论很激烈,我最近也意识到 其实单独指定深色模式的颜色不太合理，但是如果深色模式直接使用亮色的颜色的话，确实会出现明度问题，所以我想取消暗色的单独颜色指定，而是通过lua 脚本来计算出降低明度的颜色。已经有了初步的想法。
你们是不是都把问题搞复杂了啊？明明只用改一个选中菜单上的文字颜色就能解决很大一部分问题了……
选中菜单的字体改成高亮的白色确实能解决;
但是暗色模式下应避免使用亮度过高的字体颜色,避免刺眼.
这就是为什么绝大多数App不会有RGB主题色调,一般都是给几个固定的主题颜色选择.
颜色一多,就总会有各种问题;然后衍生出一些人既要又要还要的问题.
看得讨论很激烈,我最近也意识到 其实单独指定深色模式的颜色不太合理，但是如果深色模式直接使用亮色的颜色的话，确实会出现明度问题，所以我想取消暗色的单独颜色指定，而是通过lua 脚本来计算出降低明度的颜色。已经有了初步的想法。
你们是不是都把问题搞复杂了啊？明明只用改一个选中菜单上的文字颜色就能解决很大一部分问题了……
选中菜单的字体改成高亮的白色确实能解决; 但是暗色模式下应避免使用亮度过高的字体颜色,避免刺眼.
只是把当前选中这个菜单的文字颜色改成白的，不是要所有菜单文字都改成白的，就那么一小块不会刺眼的。整个系统里的按钮上的文字全是纯白的。包括菜单当前选中那个图标也是白的，右边的小箭头也是白的，也没人说刺眼啊。
至于主题色如果选的太刺眼，人自己会换，这个是正常的自由度吧。
那么你的图1的选中菜单字体颜色,你认为改成什么颜色可以看清?
你想要自定义RGB,又觉得某些颜色不合适,那就继续更换其它合适的颜色直到满意为止.
那么我认为你这个issue也没必要啊,毕竟你也知道"人自己会换",我之前也是这么设置的深色主色调,比如用亮色模式的默认主色调,稍稍降低明度后应用在暗色模式下的效果就不错.
那么你的图1的选中菜单字体颜色,你认为改成什么颜色可以看清?
改成白色就可以啊，一开始就这么建议的。
所以你只是在考虑你自己吗?
你试试把色调亮度再调高一些,不就又会看不清了?
你为何不降低这个色调的亮度以搭配这个灰色字体呢?
你想要自定义RGB,又觉得某些颜色不合适,那就继续更换其它合适的颜色直到满意为止. 那么我认为你这个issue也没必要啊,毕竟你也知道"人自己会换",我之前也是这么设置的深色主色调,比如用亮色模式的默认主色调,稍稍降低明度后应用在暗色模式下的效果就不错.
自己会换的前提是有足够的自由度的情况下吧，我也不是没换过，就是因为换了觉得有问题，自由度太低了能换的范围太小了，才提的issue啊。把那个灰色文字改成白的，那么主题色的选择范围就会大很多。这个改动性价比多高……而且目测也不会产生什么不好的影响。
所以你只是在考虑你自己吗? 你试试把色调亮度再调高一些,不就又会看不清了? 你为何不降低这个色调的亮度以搭配这个灰色字体呢?
亮度降低了文字颜色就看不清了啊……
而且我都已经用深色模式了我为啥要用那么亮的主题色呢？
#4e5eba
可以试试这个,就会好很多
我不否认现在这个状况是可以有合适的颜色的，问题不是我想要选择范围更多一些吗……
就算不说自由度，你觉得当前选中的menu文字跟未选中用一个灰色合适吗？一个menu上左边icon跟右边的箭头都是白色，中间文字是灰色的OK吗？
"自由度太低了能换的范围太小了",这不是很正常吗?
从美术常识来说,白纸上书写作画就是最佳的,你有见过多少人用黑纸的吗?这是客观事实啊;你难道要说那些不用黑纸书写和作画的都是歧视不成?
另外,从深色模式的设计主旨来说,护眼,舒适度,可读性,普适性是最重要的.
不好意思，我回看了一下之前的沟通过程，感觉我的语气可能有些不太好，先抱歉哈。
之所以我一开始就明确建议把这个menu文字的颜色改成白色，而不是只提出现在的问题，是基于我的认知，经过思考的结论，主要基于以下几点：
- 只用改动一个色值，改动成本几乎可以忽略不计；
- 可以让主题色彩的选择范围相对大很多，不会像现在深色模式的自定义主题色功能略显鸡肋（只代表我个人）；
- 目前选中menu上左边的icon和右边的箭头都是白的，文字是灰的在视觉上不够协调，改成白的可以保持一致；
- 未选中的menu文字现在跟选中都是一个灰色，没有区分，改成白色可以有更明显的区分（非必要）；
- 对于原本满意主题色，用习惯了的用户来说，这里文字改成白色不会跟原先的颜色产生太大差异，要论感受，只会比现在更好不会更差。
对于这个问题可能每个人的看法不一样，站在不同角度解决问题的思路肯定也会有区别。我提的建议也只是基于我的理解，针对眼下的问题的折中方案，我也相信在它未来变得越来越好用的过程中，单单改一个文字颜色肯定是不够的。
不论开发者最后决定用什么方案，我相信肯定也是基于开发者自己认为的最好方案去做的，我尊重开发者的决定。
先改回去了,顺便补充适配了 [左侧导航主菜单] 指针悬浮时 的底部线条颜色.
另外按照你的建议,在 指针悬浮时 & 选中时,字体颜色改为#fff(白色);子菜单选项卡也一样.
但是其他跟随自定义主色调的字体颜色 jerrykuku/luci-theme-argon@142e968 我还是保留自己的看法,写死颜色了,这样一来深色模式下,可用的颜色范围会更多,且尽可能地减少对可读性的影响.
突然想到其实可以让主题色用在文字上的时候做一个插值映射，比如在menu背景和下划线是实际主题色，但是用到主题色的那些文字会在主题色的色值上加一定比例的白色（例如50%，就像在图形处理软件里给它一个透明度，下面垫白色）。这样的话如果用不同色调的主题色，文字在色调上都是一致的只是明度不同，也会解决主题色太深的时候导致字看不清楚的问题。
可以用filter: brightness(2);的滤镜提升颜色的两倍亮度的方式;
不过自定义主色调选用浅色时(如亮色模式默认主色调#5e72e4),那么字体颜色会变成亮蓝,比较刺眼,所以我不推荐该方案,普适性较差.
我建议的方案:使用text-shadow: 1px 1px 2px #000;,给字体添加黑色阴影,提升对比度,让字体看起来像浮雕一样,可以少许提升深色字体的清晰度.
字体阴影,再改成粗体应该够了
这个颜色你觉得刺眼吗？
模拟在做设计时的处理方法，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。
换了几个不同的颜色，不同亮度的，感觉用这个算法算出来的都还行。
刺眼是指该颜色提升2倍亮度后的方式,如果换成亮度再高一点的颜色就更不行了.
你这个方案光靠CSS没办法实现,得再写JavaScript (摔键盘)
jerrykuku/luci-theme-argon@ce06b26
已实现,等正式合并吧
我问了下ChatGPT，它给了个建议是用 mix-blend-mode 属性，我在他的帮助下做了个demo对比了mix-blend-mode各种模式的效果。
我发现用screen和exclusion这两种模式可以部分接近我之前说的那种效果，在颜色比较暗的情况下适当提升一点亮度同时降低饱和度。
https://bearcolin.github.io/temp/argon_dark_themecolor_demo.html
我最开始就是测试的这个方式,效果并不OK;
把字体大小调整到和主题一样的font-size: 90%;后,浅色字体效果还不错,不会太亮;
但是过于深色的字体还是容易看不清.
你之前的哪个思路,我测试效果就还不错.
你可以复刻我的主题复刻仓库,18.06分支已经支持Github Actions云编译主题ipk了.