使用 Gatsby.js 搭建静态博客黑暗模式

Posted 2021-06-26 陌路y

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 Gatsby.js 搭建静态博客黑暗模式相关的知识，希望对你有一定的参考价值。

方案 1

最初实现的方案是直接使用媒体查询和 css 变量。关键是把区分两个模式的变量抽离出来，分别配置两组变量，核心代码如下：

@media screen and (prefers-color-scheme: dark) {
  :root {
    --linkColor: #ec9bab;
    --fontColor: #ecc3cb;
    --codeBlock: #3c495b;
    --code: #c3c7cb;
    --divider: #3e4b5e;
  }
}
@media screen and (prefers-color-scheme: light) {
  :root {
    --linkColor: #683741;
    --fontColor: hsl(284, 20%, 30%);
    --codeBlock: #3c495b;
    --code: #c3c7cb;
    --divider: #eee;
  }
}
body {
  background-color: var(--backgroundColor);
  color: var(--fontColor);
  transition: all 0.5s ease-in-out;
}

（prism 用户还要自己整理一下两个模式的 prism 样式）

css 变量除了在 IE 不能用之外其他浏览器的适应性还算不错，如果必须适配 IE 的话需要另外写一份不用变量的样式保底。

https://www.98891.com/article-46-1.html

方案 2

按上面的写法其实已经可以实现根据系统配置转换明亮和黑暗模式，但是要做到直接在网页通过一个切换按钮手动修改还是远远不够，方案 2 登场。

因为现在 javascript 不能改变系统级的明暗模式，只能获取和监听模式变化，所以手动操作铁定不能靠 prefers-color-scheme 了。

我们需要反过来通过 JavaScript 获取 color-scheme 然后告诉 CSS 明暗模式发生变化，这样的变化包括系统级的改变和用户在网页选择改变。

首先把两组变量的作用范围改为 class：

.light-theme {
  --linkColor: #ec9bab;
  --fontColor: #ecc3cb;
  --codeBlock: #3c495b;
  --code: #c3c7cb;
  --divider: #3e4b5e;
}
.dark-theme {
  --linkColor: #683741;
  --fontColor: hsl(284, 20%, 30%);
  --codeBlock: #3c495b;
  --code: #c3c7cb;
  --divider: #eee;
}

下面这一段代码我写在 Layout.js 的 componentDidMount 中，只有这里才是服务器渲染的范围之外。

// setTheme 的实现
setTheme = themeName => {
  localStorage.setItem(\'theme\', themeName)
  document.documentElement.className = themeName + \'-theme\'
  this.setState({
    theme: themeName,
  })
}
// 第一部分
let localTheme = localStorage.getItem(\'theme\')
if (localTheme) {
  if (localTheme === \'dark\') {
    this.setTheme(\'dark\')
  } else {
    this.setTheme(\'light\')
  }
} else if (window.matchMedia) {
  if (window.matchMedia(\'(prefers-color-scheme: dark)\').matches) {
    this.setTheme(\'dark\')
  } else {
    this.setTheme(\'light\')
  }
} else {
  // default light
  this.setTheme(\'light\')
}
// 第二部分
const darkModeMediaQuery = window.matchMedia(\'(prefers-color-scheme: dark)\')
darkModeMediaQuery.addListener(e => {
  const darkModeOn = e.matches
  if (darkModeOn) {
    this.setTheme(\'dark\')
  } else {
    this.setTheme(\'light\')
  }
})