前端应用将根据系统主题自动切换明暗模式

1.使用Tailwind CSS的dark:前缀来定义暗色模式样式：

在元素上使用dark:前缀来定义在暗色模式下的样式。例如：

<div class="bg-white dark:bg-black">内容</div>

当图片在使用明暗变化时，可采用显示隐藏完成。

<Wimage
    src={bhistory.src}
    className="w-[25px] h-[27px] dark:hidden"
/>
<Wimage
    src={history.src}
    className="w-[25px] h-[27px] hidden dark:block"
 />

2.JavaScript监听系统主题变化：

使用JavaScript的matchMedia方法来检测当前主题状态，并返回一个MediaQueryList对象，表示指定的媒体查询字符串解析后的结果。通过监听系统主题的变化，可以动态地切换页面的主题：

let mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
mediaQueryList.addEventListener('change', (e) => {
    if (e.matches) {
        // 系统切换到暗色主题
        document.documentElement.classList.add('dark');
    } else {
        // 系统切换到亮色主题
        document.documentElement.classList.remove('dark');
    }
});

3.CSS变量与类名切换：

定义全局样式变量，并根据不同的主题设置不同的变量值。然后，通过JavaScript动态切换HTML根元素的data-theme属性来改变主题

:root {
    --color-bg: #ffffff; /* 亮色背景 */
    --color-text: #333333; /* 亮色文字 */
}
[data-theme="dark"] {
    --color-bg: #1f1f1f; /* 暗色背景 */
    --color-text: #ffffff; /* 暗色文字 */
}
body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

function toggleTheme() {
    document.documentElement.setAttribute('data-theme', 
        document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
}

这种办法允许通过CSS变量和类名来灵活控制主题切换。

还有另一种办法

用于检测主题变化

   const [isDarkMode, setIsDarkMode] = useState(false)
 useEffect(() => {
    // 监测系统的主题变化
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    const handleThemeChange = (e: MediaQueryListEvent) => {
      setIsDarkMode(e.matches)
    }

    mediaQuery.addEventListener('change', handleThemeChange)
    setIsDarkMode(mediaQuery.matches) // 初始化状态

    return () => {
      mediaQuery.removeEventListener('change', handleThemeChange)
    }
  }, [])
                      src={
                      isDarkMode
                        ? '/images/referrer/close.png'
                        : '/images/referrer/wclose.webp'
                    }

这种可以直接使用isDarkMode来用于主题的明暗切换。