移动端夸克浏览器适配问题

[L33Z22L11]

检查清单

• [X] 已经阅读过 官方文档 相关内容，并尝试进行搜索。
• [X] 尝试过在本地测试运行官方 demo 源码。
• [ ] 尝试过在 Codespace 中测试运行官方 demo 源码。

问题描述

经过调试检测，发现是夸克端不支持深色模式。

代码中有大量 @media (prefers-color-scheme: light)，希望移除这些媒体查询，或者设置 @media (prefers-color-scheme: no-preference) 对应的样式。

另外参见 https://github.com/xaoxuu/hexo-theme-stellar/commit/f36e6b940f6d1898737e41380209113b705f6708 的评论。

[xaoxuu]

因为写法不统一造成部分内容用了深色的方案？

[L33Z22L11]

是「什么方案都没用」

[L33Z22L11]

一部分浏览器根本不认 prefers-color-scheme 媒体特性，例如这段代码对于夸克APP根本不生效：

@media (prefers-color-scheme: no-preference) {
  * {
    background: red;
  }
}

@media (prefers-color-scheme: light) {
  * {
    background: green;
  }
}

@media (prefers-color-scheme: dark) {
  * {
    background: blue;
  }
}

再比如一些注重隐私的浏览器为了防止跟踪，也不会报告自己的 prefers-color-scheme。

因此我建议将明亮模式作为不支持媒体特性的默认值，深色模式再单独处理。

[xaoxuu]

我是要将明亮模式作为不支持媒体特性的默认值的，应该怎样改呢

[L33Z22L11]

见 #478 ，这是成本最低且兼容性最好的修复方式，经简单检测不会影响主题目前和未来的样式。我观察到其他博客/网站也使用的这种方案。