У меня возникла странная проблема с реакцией. Мой компонент должен отображать 1 из 2 разных значков на основе логического значения isDarkMode. Однако по какой-то причине значки не меняются, хотя логическое значение меняется. Они изменяются только при первоначальной визуализации сайта, и это все.
Я немного озадачен тем, что я сделал не так, любая помощь приветствуется.
"use client"
import React, { useEffect, useState } from 'react'
import { HiOutlineMoon, HiOutlineSun } from 'react-icons/hi'
export default function Switcher({ className, navbar }: { className?: string, navbar?: boolean }) {
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
setIsDarkMode(true);
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
setIsDarkMode(false);
}
}, [])
function changeMode(mode: 'mode' | 'layout', event: React.SyntheticEvent): void {
if (mode === 'mode') {
if (document.documentElement.className.includes("dark")) {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
setIsDarkMode(false);
} else {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
localStorage.setItem('theme', 'dark');
setIsDarkMode(true);
}
}
}
useEffect(() => {
console.log("dark mode is: " + isDarkMode);
if (isDarkMode) {
console.log("Should show sun icon");
} else {
console.log("Should show moon icon");
}
}, [isDarkMode])
return (
{
console.log('Checkbox toggled. Current isDarkMode:', isDarkMode);
changeMode('mode', event)
}}
aria-label="Toggle dark mode"
/>
{isDarkMode ? (
) : (
)}
)
};```
Подробнее здесь: https://stackoverflow.com/questions/797 ... te-toggles
