Модуль для Nuxt, примитивы переключателя для Vue и независимые утилиты, которые держат выбранный режим и вычисленную тему раздельно.
Один сценарий: подключите GitHub Packages, установите пакет и импортируйте только ту точку входа, которая реально нужна приложению.
Добавьте реестр GitHub Packages в .npmrc:
@alyldas:registry=https://npm.pkg.github.comДля чтения пакета может понадобиться токен с
read:packages.
Установите пакет:
npm install @alyldas/theme-modeИмпортируйте CSS и нужную точку входа:
import '@alyldas/theme-mode/style.css'
import '@alyldas/theme-mode/nuxt'Замените строку импорта выше одной из этих строк:
@alyldas/theme-mode/nuxtЛучший вариант для Nuxt-приложений, где тема должна быть корректной ещё до гидрации.
Добавляет SSR-безопасный сценарий запуска и держит настройки согласованными.
import '@alyldas/theme-mode/nuxt'@alyldas/theme-mode/vueПодходит для оболочек приложения, своих кнопок, виджетов и тестов.
Используйте общий контроллер или переключатель без собственной разметки внутри вашего интерфейса.
import '@alyldas/theme-mode/vue'@alyldas/theme-mode/coreПодходит для адаптеров, которым нужны только разбор настроек, сохранение режима и DOM-запись.
Используйте из обычного TypeScript-кода без Vue.
import '@alyldas/theme-mode/core'Начните с одного модуля. Опции добавляйте только тогда, когда нужны свои ключи, атрибуты или CSS-переменные.
export default defineNuxtConfig({
modules: ['@alyldas/theme-mode/nuxt'],
})export default defineNuxtConfig({
modules: ['@alyldas/theme-mode/nuxt'],
themeMode: {
// До монтирования Vue
defaultMode: 'auto',
fallbackTheme: 'dark', // color-scheme: нативные элементы браузера
attribute: 'data-theme', // data-theme: light | dark
modeAttribute: 'data-theme-mode', // data-theme-mode: auto | dark | light
cssVariablePrefix: 'theme-mode', // --theme-mode-*: состояние переключателя
storageKey: 'theme',
},
})
Скриншоты выше генерируются из отдельного примера, который закоммичен в репозитории.