页面加载时的深色主题 CSS 问题 1 秒间隙答案

【问题标题】：Dark theme CSS problem on page load 1 second gap页面加载时的深色主题 CSS 问题 1 秒间隙
【发布时间】：2020-03-15 01:31:26
【问题描述】：

我有以下代码在页面加载时将主题更改为深色。问题是有 1 秒的间隙，每次我切换到其他页面时，屏幕都会闪烁 1 秒，然后就黑了。如何在页面加载后立即替换 document.body.setAttribute('data-theme', 'dark'); 以使用 dark 主题？

if ($is_dark) {

  echo "
  <link rel='stylesheet' href='$zrcdn_url/css/z-b-u/dark-theme.css'/>
  <script>document.body.setAttribute('data-theme', 'dark');</script>
  ";

}

此外，有时脚本加载速度比 CSS 快，我使用了这段代码，它甚至会产生 2-3 秒的差距。

<script>
$(document).ready(function(){
  document.body.setAttribute('data-theme', 'dark');
});
</script>

【问题讨论】：

为什么不直接在css中使用@media (prefers-color-scheme: dark) {}，页面渲染后不加载单独的css文件？
OK 通过使用 `echo ""; 解决
CSS 文件，也许会帮助某人static.zareklamy.com/css/z-b-u/dark-theme.css

标签： javascript php css

【解决方案1】：

尝试首先使用html正文或头部中的CSS文件。

<style>
body {
  background-color: black;
}
</style>

【讨论】：

您也可以将代码放入标签内。像这样：保持简单！
这不是您想象的那么好的解决方案。其他开发人员/设计人员需要注意在 HTML 中而不是在其所属的 CSS 中完成静态样式。