带有反应挂钩的暗模式 - JavaScript

简介

在现代的网站和应用程序中，暗模式已经成为了非常流行的设计风格之一。与此同时，反应挂钩（React hooks）也成为了构建交互式用户界面的首选技术之一。在这篇文章中，我们将介绍如何使用反应挂钩（React hooks）来构建一个带有开关按钮的暗模式。

实现

首先，我们将使用 useEffect 钩子来监听暗模式的开关状态。我们需要将当前的主题状态保存在本地存储中，以便用户关闭网站后，再次打开网站时依旧能够保持之前的主题状态。

import { useEffect, useState } from "react";

export default function useDarkMode() {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    const nextTheme = theme === "light" ? "dark" : "light";
    setTheme(nextTheme);
    localStorage.setItem("theme", nextTheme);
  };

  useEffect(() => {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);

  return [theme, toggleTheme];
}

接下来，我们将实现一个开关按钮来切换暗模式。该组件将从父组件接收当前的主题状态和切换主题的函数。当用户单击开关按钮时，我们将调用切换主题的函数以切换当前的主题状态。

import { MoonIcon, SunIcon } from "@heroicons/react/solid";

export default function ThemeToggle({ theme, toggleTheme }) {
  return (
    <button className="flex items-center p-2" onClick={toggleTheme}>
      {theme === "light" ? (
        <MoonIcon className="w-5 h-5" />
      ) : (
        <SunIcon className="w-5 h-5" />
      )}
      <span className="ml-2 text-sm font-medium">Toggle Dark Mode</span>
    </button>
  );
}

最后，我们将在应用程序中使用这两个组件。我们将 useDarkMode 钩子挂接到最顶层的组件，并将暗模式状态和切换主题函数分别传递给 ThemeToggle 组件。

import useDarkMode from "./useDarkMode";
import ThemeToggle from "./ThemeToggle";

export default function App() {
  const [theme, toggleTheme] = useDarkMode();

  return (
    <div className={`app ${theme}`}>
      <header className="p-4 text-center">
        <h1 className="text-lg font-medium">Dark Mode with React Hooks</h1>
      </header>
      <main className="p-4">
        <p className="mb-4">
          Welcome to the Dark Mode app with React Hooks. Enjoy the
          toggle!
        </p>
        <ThemeToggle theme={theme} toggleTheme={toggleTheme} />
      </main>
    </div>
  );
}

结论

在本文中，我们已经使用反应挂钩（React hooks）构建了一个带有反应挂钩的暗模式。我们使用 useEffect 监听主题状态的变化，并将主题状态保存在本地存储中。我们还实现了一个开关按钮来切换主题，并在最顶层的组件中使用了这两个组件。我们希望这篇文章对你有所帮助，让你更好地了解如何使用反应挂钩（React hooks）构建交互式用户界面。