在 jekyll 中实现深色主题答案

【问题标题】：Implementing a dark theme in jekyll在 jekyll 中实现深色主题
【发布时间】：2019-03-23 15:39:30
【问题描述】：

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

我现在设置它的方式是，主体有一个dark 类，该类在切换时切换到light 类，并且主题在localStorage 中保持不变，并在用户转到新的时加载页。 SCSS 仅包含 .dark 和 .light 的选择器，它们将显示相应的配色方案。

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

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

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

让 Jekyll 以某种方式从 localStorage 中读取数据，并据此更改呈现的 HTML 的类（可能是最好的解决方案，但也可能是不可能的）
Jekyll 不知何故从 SCSS 生成了两个单独的样式表，并使用 JS 选择正确的一个

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

【问题讨论】：

Eliminate flash of unstyled content的可能重复
真的不是 -_- - 实际上我应该让我的问题更清楚，因为我知道第三种选择并不可行，只会让人感到困惑并给我不必要的答案
为什么不默认隐藏内容，加载完成后显示？
因为即使我等到切换完成时，当它们从隐藏变为可见时仍然会出现瞬间闪烁
Light & Dark 主题是在同一个样式表中还是两个不同的样式表中？两种样式中的每种背景颜色和颜色都具有相同的过渡持续时间和缓动？我认为拥有两个样式表会产生问题，而不是拥有一个样式表。使用 scss 管理它们对您来说并不困难。

标签： javascript html css fouc

【解决方案1】：

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

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

是--

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>

【讨论】：

这不适用于可见性，因为它只是一个可见/隐藏的二进制
使用opacity 而不是visibility。

【解决方案2】：

所以分解一下：

由于您使用的是静态网站生成器，因此您只能在执行一小段 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;
}

【讨论】：

我遇到了同样的问题，我修复了它在开始正文标记之后执行 JavaScript。

【解决方案3】：

我在本地尝试过它工作正常，虽然我没有使用任何 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>

【讨论】：

【解决方案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

【讨论】：