夜间模式覆盖了普通模式的原有样式 about heti HOT 4 CLOSED

@dyxang 明白你的意思了，请问一下你是不是改过代码去掉了[data-darkmode="auto"]相关的部分？看截图里这样，会优先使用操作系统的深色模式设置了。如果你想以左上角按钮为准，可以把@media (prefers-color-scheme: dark) {...}那一层换成body.dark。

from heti.

@dyxang 明白你的意思了，请问一下你是不是改过代码去掉了[data-darkmode="auto"]相关的部分？看截图里这样，会优先使用操作系统的深色模式设置了。如果你想以左上角按钮为准，可以把@media (prefers-color-scheme: dark) {...}那一层换成body.dark。

请问是指这个网站的代码还是Heti的代码？我没改Heti的代码。我一时间没找到data-darkmode="auto"这种代码在哪里出现，谷歌也没搜到。
换成@media (prefers-color-scheme: body.dark)后明亮模式显示正常了，但是夜间模式没有效果了

from heti.

@dyxang 抱歉，我以为明暗设置你用了项目演示网站的代码。你可以在你博客的css里（只要在heti.min.css后面引用就行）加上这一段覆盖一下。

@media (prefers-color-scheme: dark) {
    .heti blockquote {
        background-color: hsla(0, 0%, 0%, 0.054);
    }
    body.dark .heti blockquote {
        background-color: hsla(0, 0%, 100%, 0.054);
    }
}

这样可以恢复覆盖回以博客明暗调节按钮的设置展示blockquote样式。

不过类似的地方还有hr、pre等元素，因此麻烦一点的办法是一次性全改过来，以你博客的设置，可以按下面的流程：

1. clone一份项目到本地；
2. 在lib/_variables.scss中将$darkmode那行修改为$darkmode: 'manual';；
3. 下方，将$manualmode-dark-selector那行修改为$manualmode-dark-selector: 'body.dark &';
4. 重新编译这个适合你自己的heti.min.css文件。

这样最终的文件就不会再包含@media (prefers-color-scheme: dark)相关的代码了，一切都以你博客明暗调节按钮的设置为准。

from heti.

有空研究一下，谢谢，有问题再Open

from heti.