Light и Dark режимы

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

Конфигурация темы

Quasar использует объект Quasar для глобальной настройки приложения. Основным параметром, отвечающим за тему, является dark. Он может быть:

true — принудительно включён тёмный режим;
false — принудительно включён светлый режим;
'auto' — тема подстраивается под системные настройки пользователя.

Пример конфигурации в quasar.conf.js:

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

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

Программное управление темой

Quasar предоставляет объект $q в каждом компоненте, через который можно динамически управлять темой. Основные методы и свойства:

Чтение текущего режима:

console.log(this.$q.dark.isActive) // true, если тёмный режим активен

Включение/отключение тёмного режима:

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

Переключение режима:

this.$q.dark.toggle()

Локальная переопределяемая тема для компонентов

Некоторые компоненты Quasar поддерживают локальные параметры темы, что позволяет устанавливать светлый или тёмный режим только для конкретного элемента. Пример:


  
    Пример локальной настройки темы

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

--q-color-primary
--q-color-secondary
--q-color-accent
--q-dark-bg
--q-dark-page-bg

Эти переменные автоматически адаптируются при смене режима.

Настройка цветов для тёмной темы

Quasar позволяет полностью кастомизировать цвета светлой и тёмной темы через объект cssAddon или через SCSS-переменные. Пример настройки в SCSS:

$primary: #1976d2;
$secondary: #26a69a;
$dark-bg: #1d1d1d;
$dark-page-bg: #121212;

@import '~quasar/src/css/index.sass';

После этого тёмная тема будет использовать заданные цвета для фонов, текста и акцентов.

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

При использовании режима 'auto' Quasar опирается на CSS-медиа-запрос prefers-color-scheme:

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--q-dark-bg);
    color: var(--q-dark-page-bg);
  }
}

Это позволяет приложению подстраиваться под системные настройки без дополнительного кода.

Интеграция с пользовательским интерфейсом

Для удобного переключения режимов можно создать кнопку или переключатель с реактивной привязкой к $q.dark:

Изменение состояния переключателя автоматически меняет тему во всём приложении.

Особенности взаимодействия компонентов с темой

Компоненты Quasar, такие как QToolbar, QBtn, QCard, QDialog, автоматически реагируют на смену темы.
Комбинация пользовательских классов и встроенных CSS-переменных позволяет создавать уникальные визуальные стили для светлого и тёмного режимов.
Важно тестировать контрастность текста и фона при кастомных цветах, чтобы сохранить читаемость в обоих режимах.