\n\n\n```\n\n## Способ 3: Tailwind CSS Dark Mode\n\nТаильвинд имеет встроенную поддержку тёмной темы:\n\n```html\n\nmodule.exports = {\n darkMode: 'class', // или 'media'\n theme: {\n extend: {\n colors: {\n primary: '#007bff',\n }\n }\n }\n};\n\n\n\n\n\n```\n\nJavaScript для переключения в Tailwind:\n\n```javascript\nfunction toggleDarkMode() {\n document.documentElement.classList.toggle('dark');\n localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');\n}\n\n// При загрузке\nif (localStorage.getItem('theme') === 'dark' || \n (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.documentElement.classList.add('dark');\n}\n```\n\n## React компонент для переключения темы\n\n```typescript\nimport { createContext, useContext, useEffect, useState } from 'react';\n\ntype Theme = 'light' | 'dark';\n\ninterface ThemeContextType {\n theme: Theme;\n toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext(undefined);\n\nexport function ThemeProvider({ children }: { children: React.ReactNode }) {\n const [theme, setTheme] = useState('light');\n \n // Инициализация темы\n useEffect(() => {\n const saved = localStorage.getItem('theme') as Theme | null;\n \n if (saved) {\n setTheme(saved);\n } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n setTheme('dark');\n }\n }, []);\n \n // Применение темы к документу\n useEffect(() => {\n document.documentElement.setAttribute('data-theme', theme);\n localStorage.setItem('theme', theme);\n }, [theme]);\n \n const toggleTheme = () => {\n setTheme(prev => prev === 'dark' ? 'light' : 'dark');\n };\n \n return (\n \n {children}\n \n );\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme должен использоваться внутри ThemeProvider');\n }\n return context;\n}\n\n// Использование\nfunction App() {\n return (\n \n

\n

\n