Composable: ```javascript // composables/useTheme.js import { ref, watch, onMounted } from 'vue' const STORAGE_KEY = 'theme' export function useTheme() { // 'light' | 'dark' | 'system' const theme = ref('system') const resolvedTheme = ref('light') const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') function getSystemTheme() { return mediaQuery.matches ? 'dark' : 'light' } function applyTheme(resolved) { resolvedTheme.value = resolved document.documentElement.setAttribute('data-theme', resolved) // Для meta theme-color (мобильные браузеры) const metaTheme = document.querySelector('meta[name="theme-color"]') if (metaTheme) { metaTheme.setAttribute( 'content', resolved === 'dark' ? '#1a1a2e' : '#ffffff' ) } } function setTheme(newTheme) { theme.value = newTheme localStorage.setItem(STORAGE_KEY, newTheme) const resolved = newTheme === 'system' ? getSystemTheme() : newTheme applyTheme(resolved) } function toggle() { const next = resolvedTheme.value === 'light' ? 'dark' : 'light' setTheme(next) } // Слушаем изменение системной темы mediaQuery.addEventListener('change', () => { if (theme.value === 'system') { applyTheme(getSystemTheme()) } }) // Инициализация onMounted(() => { const saved = localStorage.getItem(STORAGE_KEY) || 'system' theme.value = saved const resolved = saved === 'system' ? getSystemTheme() : saved applyTheme(resolved) }) return { theme, resolvedTheme, setTheme, toggle } } ``` CSS-переменные: ```css /* styles/themes.css */ :root, [data-theme="light"] { --color-bg: #ffffff; --color-bg-secondary: #f5f5f5; --color-text: #1a1a1a; --color-text-secondary: #666666; --color-border: #e0e0e0; --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-surface: #ffffff; --color-shadow: rgba(0, 0, 0, 0.1); } [data-theme="dark"] { --color-bg: #1a1a2e; --color-bg-secondary: #16213e; --color-text: #e0e0e0; --color-text-secondary: #a0a0a0; --color-border: #2a2a4a; --color-primary: #60a5fa; --color-primary-hover: #93bbfd; --color-surface: #0f3460; --color-shadow: rgba(0, 0, 0, 0.3); } /* Плавный переход между темами */ html { transition: background-color 0.3s, color 0.3s; } body { background-color: var(--color-bg); color: var(--color-text); } ``` Компонент переключателя: ```vue ``` Использование переменных в компонентах: ```vue ``` Предотвращение мерцания (FOUC) при загрузке: ```html ``` --- ## 📌 Реальные кейсы 🔹 **Блог/документация** -- тёмная тема для чтения ночью, light/dark/system выбор 🔹 **Дашборд** -- тёмная тема по умолчанию, UI-тяжёлые приложения 🔹 **Мобильное приложение** -- уважай системную настройку, sync через matchMedia --- ## Частые ошибки ```css /* ❌ Хардкод цветов в компонентах -- переключение не работает */ .card { background: #ffffff; color: #333; } /* ✅ CSS-переменные */ .card { background: var(--color-surface); color: var(--color-text); } /* ❌ Забыл про изображения -- белое лого на белом фоне */ /* ✅ Используй разные версии или CSS filter */ [data-theme="dark"] .logo { filter: invert(1); } ``` ```javascript // ❌ Мерцание при загрузке -- сначала light, потом dark onMounted(() => { document.documentElement.setAttribute('data-theme', savedTheme) }) // ✅ Inline script в до рендера // (см. пример выше) ``` --- ## Резюме | Элемент | Подход | |---|---| | Переключение | `data-theme` на `` + CSS-переменные | | Хранение | `localStorage` | | Системная тема | `matchMedia('(prefers-color-scheme: dark)')` | | Без мерцания | Inline `

Как реализовать тёмную тему в Vue-приложении?