Question

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

我现在设置的方式是，主体具有dark类，该类在切换时切换为light类，并且该主题保留在localStorage中，并在任何时候加载用户转到新页面。 SCSS仅具有.dark和.light的选择器，它们将显示相应的配色方案。

此方法的问题在于，我的默认主题是dark，因此，如果将该主题设置为light，当类从dark切换时，会有非常清晰的0.2秒闪烁加载新页面时转到light。

我尝试通过将主体的visibilty设置为hidden并在进行切换后再次将其设置为visible来解决此问题，但不幸的是，这种方法引入了另一种烦人的闪光灯/滞后，并且没有很好的方法来阻止它在每次页面加载时闪烁。

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

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

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

Answer 1

所以要解决这个问题

在使用静态网站生成器时，只有执行一小段Javascript来确定和设置主题后，才能应用深色或浅色主题。
这会导致Java语言执行时内容的某些延迟/闪烁。

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

正在加载页面内容，请尽快执行Javascript：

由于唯一需要加载的DOM元素是<html>元素本身，可以对其应用主题类，因此可以将“关键” Javascript放在{{1 }}。即只是“主题转换”代码行。

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

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

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

<html>

Answer 2

根据第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>

Answer 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>

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中实现黑暗主题

4 个答案: