如何使用 Gatsby 和 React Hooks 实现“黑暗模式”

我最近上线了我的新作品集网站，不得不说，我超级自豪！我的旧网站是在我学习编程之前的几年里用 Wix 搭建的，当时需要进行一次重大的设计更新。

我选择了Gatsby作为我的设置，Netlify作为我的部署平台，伙计们，我强烈推荐它们。但这篇文章不是关于它们的！

为什么是黑暗模式？

事实证明，很多人喜欢暗黑主题的互联网内容（问问 Twitter 就知道了）。我选择在我的作品集中添加可切换的日出和日落主题，localStorage因为它为我原本静态的网站增加了一定程度的交互性，让我能够使用更复杂的 CSS，并且允许用户自定义他们的体验。它甚至可以通过!在整个会话期间保持可见。

我用了什么？

我曾经考虑过自己实现这个功能，直到我发现了这个叫做use-dark-mode 的工具。简而言之，它是一个自定义的 React Hook，可以帮你处理存储部分。他们的文档很棒，不过我还是会分享一下我的使用案例。

执行

您必须使用react@16.8.0或更高版本，其中包括 Hooks
这只在功能组件中有效，因此如果您使用具有非钩子生命周期方法的旧版 React 类组件，则可能会遇到困难。

1.安装

您将安装这两个插件use-dark-mode及其 Gatsby 特定插件，以帮助整体呈现您的主题：

yarn add use-dark-mode gatsby-plugin-use-dark-mode

2. 添加到 Gatsby 配置

为了防止页面加载时默认样式内容闪退，请将此块添加到您的gatsby-config.js文件中。（更多内容请参阅文档）

{
  resolve: "gatsby-plugin-use-dark-mode",
  options: {
     classNameDark: "dark-mode",
     classNameLight: "light-mode",
     storageKey: "darkMode",
     minify: true,
  },
}

注意：这些类名可以随意命名！我坚持使用默认设置。

3. 添加到 React

这是我的 Hero 组件的极简版本。它包含两个图标组件（日出和日落），handleTheme点击后会触发，具体触发方式darkMode.enable()取决于darkMode.disable()它们的 props。

这里的目标是当您单击日落时切换到暗模式，当您单击日出时切换到亮模式。


import React from "react"
import useDarkMode from "use-dark-mode"
import Sunrise from "../components/icons/sunrise"
import Sunset from "../components/icons/sunset"

const Hero = () => {
  // Instantiate with the default behavior, in this case, it defaults to light-mode
 // This places "light-mode" class on document.body, as outlined in my gatsby-config.js
  const darkMode = useDarkMode(false);

  // Custom function that handles the toggling
  // When called, it replaces the class on document.body and holds it in localStorage
  const handleTheme = theme => theme === "dark" ? darkMode.enable() : darkMode.disable();

  return (
    <div className="hero">
      <Sunrise onClick={handleTheme} />
      <Sunset onClick={handleTheme} />
    </div>
  )
}

export default Hero;

日落和日出图标组件非常相似，只是传递的值不同（“亮”和“暗”）。以下是精简版的日落图标：

import React from "react"

const Sunset = (props) => {
  // If the `onClick` prop exists, call it with 'dark'
  const handleClick = () => props.onClick && props.onClick('dark');

  return (
    <div className="theme-toggle" onClick={handleClick}>...</div>
  )
}

注意：您也可以通过传递布尔值来实现这一点（即“true”表示黑暗，但我选择保持其更具可读性并使用字符串）

CSS

现在，当我们单击日出或日落图标时，我们有了在亮模式和暗模式之间切换的类document.body，我们可以调整 CSS 来反映变化。

我使用了 Less，这使得基于父值应用规则变得非常容易。同样，这已经简化了，但希望你能理解。

选择.dark-mode &器会查找dark-mode更高层组件（在本例中为body标签）上是否存在该类。然后，您可以应用所需的任何规则——在本例中，它是一个背景颜色的变量。

   .hero {
      background: @sunrise-gradient;
      .dark-mode & {
        background: @sunset-gradient;
      }
    }

...就是这样！

结论

你无需完全重新设计轮子就能在 Gatsby 应用中实现暗黑模式。希望这篇文章对你有帮助，我很乐意在评论区回答你的任何问题！

文章来源：https://dev.to/kim_hart/how-to-implement-dark-mode-with-gatsby-react-hooks-k5a