Tailwind не покажет режим света и показывает только стили темных режимов ⇐ Javascript

[Anonymous]

Я сделал кнопку переключения, чтобы перейти на темный режим и режим Light для проекта React, над которым я работаю. Он делает то, что должно быть, правильно добавляет и удаляет имя класса «Темное» из тега HTML, а также локальное хранилище, но стили, которые я вижу, - это просто стили темного режима.
My Dark Mode Code: < /p>

Код: Выделить всё

export default function DarkModeSwitch() {
const [isDarkMode, setIsDarkMode] = useState(false);

useEffect(() => {
// Check if theme is already saved in localStorage
const savedTheme = localStorage.getItem('theme');

// If no theme saved in localStorage, check system preference
if (savedTheme === null) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setIsDarkMode(prefersDark);
// Apply the correct class based on system preference
if (prefersDark) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
} else {
// Apply saved theme from localStorage
setIsDarkMode(savedTheme === 'dark');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
}, []);

// Toggle the theme and save it to localStorage
const toggleDarkMode = () => {
const newMode = !isDarkMode;
setIsDarkMode(newMode);
if (newMode) {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
};

const spring = {
type: 'spring',
stiffness: 700,
damping: 30,
};

return (
onClick={toggleDarkMode}
className={`flex-start flex h-[48px] w-[100px] rounded-[30px] bg-zinc-100 p-[5px] shadow-inner hover:cursor-pointer dark:bg-zinc-700 ${isDarkMode ? 'place-content-end' : ''}`}
>


{isDarkMode ? (

) : (

)}



);
}
< /code>
И вот мой файл конфигурации Tailwind: < /p>
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {
fontFamily: {
iran: ["iran"],
},
colors: {
background: {
light: 'oklch(0.985 0.002 247.839)',
dark: '#030712',
},
titles: {
light: '#fafafa',
dark: '#030712',
},
text: {
light: '#fafafa',
dark: '#030712',
gray: '#374151',
},
icons: {
light: '#44403c',
dark: '#115e59',
},
nav: {
light: '#99f6e4',
dark: '#115e59',
},
},
lineHeight: {
relaxed: '1.25',
},
},
},
plugins: [
require('tailwindcss-rtl'),
require('daisyui'),
],
};

Правильно меняет имя класса, но когда я использую что-то вроде Classname = "Исправлено w-full z-50 bg-whed Dark: bg-gray-800 фон-blur-sm border-gray-100" он показывает только темнота: Bg-Gray-800 и если я чувствую темный стиль, он показывает стиль света. по умолчанию от JS, но это не сработало.

Подробнее здесь: https://stackoverflow.com/questions/796 ... ode-styles