Тема

Настройте dark mode через Nuxt Color Mode и CSS-переменные, которые используют компоненты Alixan UI.

Для более подробной информации перейдите в документацию Nuxt Color Mode.

Установка

npx nuxt module add color-mode

Конфигурация

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
		preference: 'system',
		fallback: 'light',
		globalName: '__NUXT_COLOR_MODE__',
		componentName: 'ColorScheme',
		classPrefix: '',
		classSuffix: '',
		storage: 'cookie',
		storageKey: 'nuxt-color-mode',
	},
})

Tailwind Variant

app/assets/css/tailwind.css

@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
}

Использование

Тема

<script setup lang="ts">
type ColorModePreference = 'system' | 'light' | 'dark'

const colorMode = useColorMode()

const themeOptions: Array<{ label: string; value: ColorModePreference }> = [
  { label: 'System', value: 'system' },
  { label: 'Light', value: 'light' },
  { label: 'Dark', value: 'dark' },
]

const setTheme = (value: ColorModePreference): void => {
  colorMode.preference = value
}
</script>

<template>
  <div class="space-y-2">
    <p class="px-1 text-sm font-medium text-muted-foreground">
      {{ $t('settings.theme') }}
    </p>
    <Select
      :model-value="colorMode.preference"
      :options="themeOptions"
      @change="setTheme($event.value as ColorModePreference)"
    />
  </div>
</template>