夜间模式覆盖了普通模式的原有样式

dyxang commented 2 years ago

我觉得可能是我自己问题，不想污染Issue。本来想提一个Discussion的，但是这个仓库没有。首先无论能不能解决，都感谢开发者肯看我的问题，谢谢了

问题描述：无论怎么在网站左上角点切换样式，最后blockquote的background-color一定是暗黑模式下的样式。
地址：https://www.1inn.top/post/%E4%B8%89%E4%B8%AA%E6%9C%88%E7%9A%84%E6%80%BB%E7%BB%93/

问题如图：

明亮模式

夜间模式

sivan commented 2 years ago

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

dyxang commented 2 years ago

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

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

sivan commented 2 years ago

@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等元素，因此麻烦一点的办法是一次性全改过来，以你博客的设置，可以按下面的流程：

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

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

dyxang commented 2 years ago

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

sivan / heti

夜间模式覆盖了普通模式的原有样式 #93

明亮模式

夜间模式