useTheme

useTheme — это Composition API функция, предоставляемая библиотекой Vuetify, которая позволяет управлять темами приложения на уровне компонентов и глобально. Она обеспечивает динамическое переключение между светлой и тёмной темами, настройку пользовательских цветов и доступ к объекту темы для использования в стилях и логике компонентов.

Подключение и использование

Для работы с useTheme необходимо, чтобы проект использовал Vuetify 3 и Composition API. Основное подключение выглядит следующим образом:

import { useTheme } from 'vuetify'

Внутри компонента Composition API создаёт реактивный объект theme:

export default {
  setup() {
    const theme = useTheme()
    return { theme }
  }
}

После этого объект theme позволяет:

  • Получать текущую тему (theme.global.name)
  • Менять светлую/тёмную палитру (theme.global.current.value.dark)
  • Настраивать пользовательские цвета (theme.global.current.value.colors)

Структура объекта темы

Объект theme разделён на несколько ключевых частей:

  1. global — глобальные настройки темы.

    • name — имя текущей темы (например, 'light' или 'dark').

    • current — реактивный объект, содержащий свойства темы.

      • dark — булевое значение, указывающее на тёмную или светлую тему.
      • colors — объект цветов, используемых в теме.
      • variables — CSS-переменные, привязанные к цветам темы.

  2. defaults — настройки по умолчанию для компонентов, которые могут наследовать цвета из темы.

  3. themes — определённые темы приложения (например, пользовательские light и dark).

Пример структуры colors:

{
  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FB8C00'
}

Переключение между светлой и тёмной темой

Для динамического изменения темы используется реактивное свойство dark:

const theme = useTheme()

function toggleDarkMode() {
  theme.global.current.value.dark = !theme.global.current.value.dark
}

При этом все компоненты, использующие цвета из темы, автоматически обновят свои стили.

Работа с пользовательскими цветами

Можно добавлять или изменять цвета темы в реальном времени:

theme.global.current.value.colors.customBlue = '#1E88E5'

После этого новые цвета доступны в компонентах Vuetify через класс color="customBlue" или через CSS переменные:

.my-element {
  background-color: var(--v-theme-customBlue);
}

Применение в компонентах

Использование темы в компонентах Vuetify осуществляется через атрибут color:

<template>
  <v-btn color="primary">Primary Button</v-btn>
  <v-card color="customBlue">
    <v-card-text>Пользовательский цвет</v-card-text>
  </v-card>
</template>

Также можно динамически изменять цвет через реактивные свойства:

<template>
  <v-btn :color="theme.global.current.value.dark ? 'accent' : 'primary'">
    Кнопка с динамическим цветом
  </v-btn>
</template>

Глобальная настройка тем

При инициализации Vuetify можно задать собственные темы через объект themes:

import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
        }
      },
      dark: {
        colors: {
          primary: '#BB86FC',
          secondary: '#03DAC6',
        }
      }
    }
  }
})

После этого useTheme позволяет переключаться между этими темами без перезагрузки приложения.

Использование CSS переменных

useTheme автоматически генерирует CSS-переменные для всех цветов темы. Их можно использовать для стилизации любых элементов:

.my-text {
  color: var(--v-theme-primary);
}

.my-bg {
  background-color: var(--v-theme-secondary);
}

Это обеспечивает интеграцию темы с нестандартными компонентами и кастомными стилями.

Динамическое создание и удаление цветов

Можно добавлять новые цвета в тему без перезагрузки:

theme.global.current.value.colors.warning = '#FFA000'

Для удаления цвета:

delete theme.global.current.value.colors.warning

Все изменения сразу отражаются в компонентах, использующих эти цвета.

Рекомендации по организации темы

  • Для больших проектов лучше разделять light и dark темы с собственными палитрами.
  • Использовать пользовательские цвета для уникального брендинга.
  • Применять CSS-переменные для гибкой стилизации нестандартных компонентов.
  • Использовать theme.global.current.value.dark для управления режимом через переключатели.

Интеграция с Composition API

useTheme идеально сочетается с Vue 3 Composition API, позволяя реактивно управлять темами и цветами прямо внутри setup():

import { computed } from 'vue'
import { useTheme } from 'vuetify'

export default {
  setup() {
    const theme = useTheme()
    
    const isDark = computed(() => theme.global.current.value.dark)
    
    function toggleTheme() {
      theme.global.current.value.dark = !theme.global.current.value.dark
    }

    return { isDark, toggleTheme, theme }
  }
}

Это обеспечивает полную динамичность и гибкость при работе с цветами и стилями.

Работа с переменными темы для кастомной логики

Можно получать доступ к CSS-переменным напрямую для сложной логики:

const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--v-theme-primary')

Использование этого метода полезно, если необходимо применить тему к сторонним библиотекам или нестандартным элементам DOM.

useTheme в Vuetify — мощный инструмент для управления визуальным стилем приложения. Он объединяет глобальную и локальную настройку цветов, поддержку светлого/тёмного режима, динамическое добавление пользовательских цветов и интеграцию с Composition API. Этот подход обеспечивает единообразие и гибкость при создании современных интерфейсов.

Оглавление