一个 浏览器暗黑模式的监听 Hook

使用

监听浏览器是否切换成暗黑模式，是的话返回 true，这个主要适用于浏览器的风格切换里面，结合 scss 的全局颜色变量，可以实现项目的模式跟随浏览器的模式切换

• 主要是通过 window.matchMedia('(prefers-color-scheme: dark)') 这个 Web API，检测用户是否设置了暗黑模式偏好

实现代码

点击 展开/收起 jsx 代码

/**
 * @des 浏览器暗黑模式监听hook
 */
import React, { useState, useEffect } from 'react';

export const useDarkMode = () => {
  const [darkMode, setDarkMode] = useState(
    window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches,
  );

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (event) => {
      setDarkMode(event.matches);
    };

    // 监听事件
    mediaQuery.addEventListener('change', handleChange);

    // 组件卸载时移除监听
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  return darkMode;
};