react-theme-detector

介绍

• 适用于 React 项目，并且是最轻量级的插件
• 快速实现深色模式的适配（样式或文案或图片等）
• 可以在 JS 和 CSS 中使用（让 CSS 的适配逻辑和 JS 的适配逻辑完全一致）

安装

$ npm i react-theme-detector

$ pnpm i react-theme-detector

$ yarn add react-theme-detector

推荐使用的 node 版本和 npm 版本

{
  "node": ">=14.x.x",
  "npm": ">=6.x.x"
}

要求的 react 版本

{
  "react": ">=16.8.0"
}

使用教程

index.tsx

import { Theme, useTheme } from 'react-theme-detector';

import './index.scss';

/**
 * 原来的根组件
 */
function Home() {
  /** 是否为深色模式 */
  const isDarkMode = useTheme();
  /** 对应模式的文案 */
  const text = isDarkMode ? '深色' : '浅色';

  return <div className="home-page">{`当前为 “${text}” 模式`}</div>;
}

/**
 * 需要将根组件传入 `Theme` 组件中，否则 `useTheme` 无法使用
 */
export default function HomePage() {
  return (
    <Theme>
      <Home />
    </Theme>
  );
}

index.scss

/* 浅色模式 */
.home-page {
  color: blue;
}

/* 暗黑模式（根据自己项目中的CSS来选择对应的那一个） */
/* 在普通 CSS 中使用 */
body[dark-mode] {
  .home-page {
    color: green;
  }
}

/* 在 CSS Modules 中使用 */
:global(body[dark-mode]) {
  .home-page {
    color: green;
  }
}

如果是轻度使用的话，可以采用下方的这种方式引入并使用

import { useDarkMode } from 'react-theme-detector';

import './index.scss';

/**
 * 标题组件
 */
export default function Title() {
  /** 是否为深色模式 */
  const isDarkMode = useDarkMode();
  /** 对应模式的标题 */
  const text = isDarkMode ? '天黑请闭眼' : '天亮请睁眼';

  return <div>{text}</div>;
}

useDarkMode 可接收回调函数作为参数：

/**
 * 回调函数，返回当前是否为深色模式
 */
type Callback = (isDarkMode: boolean) => void;

declare function useDarkMode(callback?: Callback): boolean;

Theme 组件的 props 如下：

参数	类型	默认值	说明
disable	boolean	false	禁用检测
tagName	string	"dark-mode"	标记名称