为站点添加亮暗模式切换组件，却在黑暗模式下遇到主题闪烁的问题，如图：

主题初始化

添加切换组件之前，已经做好了亮暗模式的获取。即通过 window.matchMedia') 获取信息，由于使用了 tailwindcss,可控制 document 节点的 'dark' 类名切换页面亮暗模式。

在初始化站点亮暗模式之前。还注册了对 document 节点 class 变化的监听，根据有无 'dark' 类名，将亮暗模式信息持久化储存。

代码如下这方面，

const getThemePreference = => {
if ) {
return localStorage.getItem;}
return window.matchMedia').matches
'dark'
: 'light';}，const isDark = getThemePreference === 'dark';if {
const observer = new MutationObserver => {
const isDark = document.documentElement.classList.contains;localStorage.setItem;})，observer.observe(document.documentElement。{
attributes: true,attributeFilter:,});}
document.documentElement.classList;

主题闪烁

在浏览器暗黑模式下进入页面页面已经初始化为暗黑模式。但 ModeToggle 组件的渲染引发了主题闪烁。怎么说呢，

import { Button } from '@/components/ui/button';import { Sun,Moon } from 'lucide-react';import { useState,useEffect } from 'react';type Theme = 'light' | 'dark';
const ModeToggle = => {
const = useState;useEffect => {
const isDark = document.documentElement.classList.contains;setTheme，},);useEffect => {
const docClassList = document.documentElement.classList;if ) {
docClassList.add;} else if ) {
docClassList.remove;}
},)，const handleClick = => {
setTheme;}，return (

{me === 'light'? : }

);}，不过，export default ModeToggle;

*分析一下执行流程*

*组件将 me 初始化为 light。*

*初次渲染，依次执行组件的两个 useEffect。*

* 是依赖项为空数组的 useEffect。此时页面已是暗黑模式，所以会执行 setTheme。*

*接下来执行依赖项为 me 的 useEffect。会执行 remove，将页面置为日间模式。*

*接下来第二次渲染。此时 me 值是 dark，所以执行 add 恢复页面至夜间状态。*

修复

*于是不再把 me 初始值设置成 light，而是设置成 null* ：

组件跳变问题

*只是又出现新问题...

说到修复方案一。

&

[...

最终优选方案这方面，