跳到主要内容

useDarkMode

具有自动数据持久性的深色模式。

Tips​

点击展开

对于服务端渲染的应用程序而言，由于无法在服务端获取到用户的颜色偏好。所以第一次渲染的时候可能会出现闪烁。想要避免此问题，你可以参考一下步骤。

  1. 在你的内容渲染前增加一个脚本。
<script
  dangerouslySetInnerHTML={{
    // 增加一个自执行的函数
    __html: `
          (function () {
            function setDark(dark) {
              dark &&  document.documentElement.classList.add('dark');
            }
            let store;
            try {
              store = JSON.parse(localStorage.getItem('reactuses-color-scheme'));
            } catch (err) { }
            let dark;
            if(store === null){
              const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
              dark = darkQuery.matches;
            }else {
              dark = store;
            }
            setDark(dark)
          })();
      `,
  }}
></script>
  1. 为了方便统一管理主题颜色，我们推荐使用 context 来存储它们。
import { useDarkMode } from "@reactuses/core";
import React, { createContext, useContext } from "react";

type ThemeContext = { theme: boolean; toggleTheme: () => void };

const ThemeContext = createContext<ThemeContext | undefined>(undefined);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [dark, setDark] = useDarkMode({
    classNameDark: "dark",
    classNameLight: "light",
    defaultValue: false,
  });

  return (
    <ThemeContext.Provider value={{ theme: !!dark, toggleTheme: setDark }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
}

Usage​

实时编辑器

function Demo() {
  const [theme, toggleDark] = useDarkMode({
    classNameDark: "dark",
    classNameLight: "light",
    defaultValue: false,
  });

  return (
    <div>
      <div>theme: {theme ? "dark" : "light"}</div>
      <br />
      <div>
        <button onClick={toggleDark}>toggleDark</button>
      </div>
    </div>
  );
};
结果
Loading...

API​

UseDarkOptions​

参数名描述类型默认值
selector适用于目标元素的 CSS 选择器string'html'
attribute应用到目标元素的 html 属性string'class'
defaultValue默认值booleanfalse
storageKey将数据持久保存到 localStorage/sessionStorage 的键值string'reactuses-color-scheme'
storage存储对象，可以是localStorage或sessionStorage() => StoragelocalStorage
classNameDark应用到目标元素上黑色类名称string (必填)-
classNameLight应用到目标元素上的亮色类名称string (必填)-

useDarkMode​

Returns​

readonly [boolean | null, () => void, React.Dispatch<React.SetStateAction<boolean | null>>]: 包含以下元素的元组：

  • 黑暗状态的当前值。
  • 切换黑暗状态的功能。
  • 更新黑暗状态的功能。

Arguments​

参数名描述类型默认值
options-UseDarkOptions (必填)-