Переключение тем

Quasar Framework предоставляет встроенные механизмы для работы с темами, позволяя легко переключать визуальный стиль приложения между светлой и тёмной схемой, а также настраивать собственные цветовые палитры. Управление темами осуществляется на уровне конфигурации и через реактивные свойства, что обеспечивает динамическое обновление интерфейса без перезагрузки страницы.

Подключение и настройка тем

Quasar использует глобальный объект $q для доступа к функционалу приложения, включая управление темами. Основные настройки находятся в файле quasar.config.js в разделе framework.config:

framework: {
  config: {
    dark: false, // дефолтная тема
  }
}

Здесь dark может принимать логическое значение (true или false) или реактивное состояние. Это позволяет переключать темы программно:

this.$q.dark.set(true)  // включение тёмной темы
this.$q.dark.set(false) // возвращение к светлой теме

Состояние текущей темы доступно через $q.dark.isActive, что позволяет создавать условные стили в компонентах:

<template>
  <div :class="{ 'text-white': $q.dark.isActive, 'text-black': !$q.dark.isActive }">
    Текст меняет цвет в зависимости от темы
  </div>
</template>

Реактивное управление темами

Quasar полностью поддерживает реактивность Vue. Для динамического переключения темы можно использовать computed или ref:

<script setup>
import { ref, watch } from 'vue';

const isDark = ref(false);

watch(isDark, (newValue) => {
  $q.dark.set(newValue);
});
</script>

<template>
  <q-toggle v-model="isDark" label="Тёмная тема"/>
</template>

q-toggle — стандартный компонент Quasar, который удобно интегрируется с реактивным состоянием, мгновенно обновляя интерфейс при изменении состояния.

Пользовательские цветовые палитры

Quasar позволяет задавать собственные цвета для элементов интерфейса, расширяя стандартные переменные. Это делается через SCSS-переменные или через CSS-переменные на уровне темы:

:root {
  --q-color-primary: #1e88e5;
  --q-color-secondary: #ffb300;
  --q-color-accent: #7c4dff;
}

[data-theme="dark"] {
  --q-color-primary: #90caf9;
  --q-color-secondary: #ffc107;
  --q-color-accent: #b388ff;
}

Привязка темы к атрибуту data-theme позволяет использовать кастомные палитры как для светлой, так и для тёмной схемы. Переключение темы в коде:

if ($q.dark.isActive) {
  document.documentElement.setAttribute('data-theme', 'dark');
} else {
  document.documentElement.setAttribute('data-theme', 'light');
}

Автоматическое определение темы системы

Quasar может автоматически подстраиваться под системную тему пользователя, используя медиавыражение prefers-color-scheme. В quasar.config.js достаточно указать:

framework: {
  config: {
    dark: 'auto'
  }
}

При этом $q.dark.isActive будет синхронизироваться с системными настройками. Возможность программного изменения темы остаётся, что позволяет комбинировать автоматическую и ручную настройку.

Комбинация с компонентами Quasar

Все компоненты Quasar поддерживают адаптацию к текущей теме. Например, q-btn автоматически изменяет фон и цвет текста при переключении между светлой и тёмной темой:

<q-btn color="primary" label="Нажми меня"/>

Если требуется особое поведение в тёмной теме, можно использовать модификаторы классов:

<q-card :class="{ 'bg-grey-8': $q.dark.isActive, 'bg-white': !$q.dark.isActive }">
  Содержимое карточки
</q-card>

Такой подход позволяет поддерживать консистентный дизайн без дублирования компонентов под разные темы.

Хранение предпочтений пользователя

Для сохранения выбранной пользователем темы можно использовать localStorage:

watch(isDark, (val) => {
  localStorage.setItem('darkMode', val);
  $q.dark.set(val);
});

onMounted(() => {
  const saved = localStorage.getItem('darkMode');
  if (saved !== null) {
    isDark.value = saved === 'true';
  }
});

Таким образом, состояние темы сохраняется между сессиями и не зависит от перезагрузки страницы.

Итоговый подход

Комбинация реактивных свойств, глобального объекта $q.dark, CSS-переменных и хранения пользовательских настроек позволяет создавать полностью управляемую систему тем, которая:

  • Подстраивается под системные предпочтения;
  • Позволяет динамически менять тему в интерфейсе;
  • Сохраняет пользовательские настройки между сессиями;
  • Работает с любыми компонентами Quasar без дополнительных настроек.
Оглавление