在 jekyll 中实现深色主题

Question

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

我现在设置的方式是 body 有一个 dark class，在切换时切换到 light class，并且主题保留在 localStorage 中，并在用户转到新页面时加载。 SCSS 仅具有 select 或 .dark 和 .light 将显示相应的配色方案。

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

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

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

让 Jekyll 以某种方式从 localStorage 读取并基于此更改呈现的 HTML 的 class（可能是最好的解决方案，但也可能是不可能的)
Jekyll 以某种方式从 SCSS 生成了两个单独的样式表并使用 JS 来select正确的

非常感谢任何关于如何做这些事情的见解或潜在的替代解决方案，谢谢！

Answer 1

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

Implement some kind of fade in/fade out when changing the visibility from hidden to visible

是--

CSS Transitions

每当 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>

Answer 2

所以分解一下：

由于您使用的是静态站点生成器，因此只有在一小段 Javascript 执行以确定和设置主题后，您才能应用深色或浅色主题。
这会在 Javascript 执行时产生一些 delay/flash 的内容。

我认为使用静态站点生成器意味着从 localStorage 读取并应用主题 class 和 Javascript 是一个非常好的方法。正如我所见，有两种可能的方法可以最大程度地减少闪烁问题，并且不涉及将体系结构从 Jekyll 站点更改为其他站点。

在加载页面内容时更快地执行 Javascript：

因为唯一需要加载的 DOM 元素是 <html> 元素本身，您可以对其应用主题 class，您可以将 'critical' Javascript 在一个小脚本标签里面 <head>。即只是 'theme-switching' 行代码。

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

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

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

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

html.light, html.dark {
    opacity: 1;
}

Answer 3

我在我的本地尝试过它工作正常，虽然我没有使用任何 js 或 jekyll 简单转换。让 js 做 class 切换，别无其他。让 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>

Answer 4

不需要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

在 jekyll 中实现深色主题

Implementing a dark theme in jekyll

javascript

html

css

fouc