9

我正在尝试向我的 Jekyll 站点添加一个简单的明暗模式切换。

我现在设置它的方式是，主体有一个dark类，该类在切换时切换到一个类，并且每当用户进入新页面时，light主题都会保留并加载。localStorageSCSS 仅具有选择器，用于.dark显示.light相应的配色方案。

这种方法的问题是我的默认主题是dark，所以如果主题设置为 ，那么当我加载新页面时，当类从 切换到时，light会有一个非常清晰的 0.2 秒闪烁。darklight

我尝试通过将 body 设置visibilty为hidden然后visible在切换后重新设置来解决问题，但不幸的是，这种方法引入了另一个令人讨厌的 flash/lag，并且没有好的方法可以阻止它在每次页面加载时闪烁。

我想到的一些潜在解决方案，但不知道它们是否可能或如何实施它们是：

  1. 让Jekyll 以某种方式读取localStorage并基于它更改呈现的 HTML 的类（可能是最好的解决方案，但也可能是不可能的）

  2. Jekyll 不知何故从 SCSS 生成了两个单独的样式表并使用 JS 选择正确的一个

    感谢您对如何做这些事情或潜在的替代解决方案的任何见解，谢谢！

4

4 回答 4

7

所以打破这个：

  • 当您使用静态站点生成器时，您只能在执行一小段 Javascript 以确定和设置主题后应用深色或浅色主题。
  • 这会导致 Javascript 执行时出现一些延迟/闪烁的内容。

我认为使用静态站点生成器意味着从 localStorage 读取并使用 Javascript 应用主题类是一种非常好的方法。正如我所看到的，有两种可能的方法可以最大限度地减少闪烁问题，而不涉及将架构从 Jekyll 站点中更改出来。

随着页面内容的加载，请尽快执行 Javascript：

因为唯一需要加载的 DOM 元素是<html> 元素本身，您可以对其应用主题类，您可以将“关键”Javascript 放在<head>. 即只是“主题切换”的代码行。

然后它应该在内容加载之前立即执行。

使用 CSS 过渡来最小化 Flash 本身：

<html>您可以在元素没有主题类时隐藏页面内容，并在应用后将其淡入，如下所示：

html {
    opacity: 0;
    transition: opacity 1s;
}

html.light, html.dark {
    opacity: 1;
}
于 2018-10-25T23:31:05.723 回答
2

根据第 3 点，你想要什么，

在将可见性从隐藏更改为可见时实现某种淡入/淡出

是 -

CSS 过渡

每当 CSS 属性更改时显示缓入效果的示例用法：

body {
  transition: background 1s ease-in, color 1s ease-in;
}
.dark {
  color: white;
  background: black;
}
<body>

  <p> Lorem Ipsum dolor sit amet... </p>

  <button onclick="document.body.classList.toggle('dark')">Change Theme</button>

</body>

于 2018-10-18T19:12:04.010 回答
0

我在我的本地尝试过它工作正常，虽然我没有使用任何 js 或 jekyll 简单转换。让js做类切换，别的什么都没有。让 css 处理过渡。使用一个样式表。

.theme {
    &.dark {
        background: #000;
        color: #fff;
    }
    &.light {
        background: #fff;
        color: #000;
    }
    transition:background-color 200ms ease-in-out, color 200ms ease-in-out;
}


<body class="body theme dark"> <!-- just switch dark to light class-->
    <h1 class="sticky">Thank you</h1>
    <div class="row" id="bindlinkTempl"></div>
    <script src="js/dist/app.js"></script>


</body>
于 2018-10-31T12:42:25.673 回答
0

不需要 javascript，使用prefers-color-scheme媒体查询：

@media (prefers-color-scheme: dark) {
  // Styles for dark mode here
  body { background-color: #222 }
  ...
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

于 2020-06-18T16:19:25.263 回答