Адаптивная темизация

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

Токены и переменные

Quasar использует набор предопределённых переменных для основных цветов интерфейса: primary, secondary, accent, positive, negative, info, warning. Эти переменные можно менять динамически через объект $q.colors:

this.$q.colors.setBrand('primary', '#1E88E5')

Особенности:

  • Изменение цвета через setBrand мгновенно отражается на всех компонентах, использующих этот токен.
  • Можно переопределять сразу несколько цветов, создавая индивидуальную палитру для конкретного состояния темы.

Темы: светлая и тёмная

Quasar поддерживает две базовые темы: light и dark. Переключение между ними осуществляется через объект $q.dark:

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

Система тем автоматически регулирует:

  • фоновый цвет приложения;
  • цвет текста и иконок;
  • стили элементов Quasar (кнопки, карточки, таблицы и т.д.).

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

$q.dark.setAuto() // автоматически подстраивается под системную тему

Динамическая смена цветов компонентов

Quasar позволяет задавать цвета компонентов через пропсы, используя токены и кастомные значения. Например:

<q-btn color="primary" label="Сохранить" />
<q-card :class="$q.dark.isActive ? 'bg-dark' : 'bg-white'">
  <q-card-section>
    Динамический фон
  </q-card-section>
</q-card>

Ключевые моменты:

  • Связка с $q.dark.isActive позволяет изменять стили компонентов без перезагрузки.
  • Любой компонент можно настроить через динамические классы или стили, привязанные к текущей теме.

Пользовательские темы

Создание пользовательской темы требует работы с объектом brand. Например, для создания “зелёной” темы:

this.$q.colors.setBrand({
  primary: '#4CAF50',
  secondary: '#8BC34A',
  accent: '#CDDC39',
  positive: '#00E676',
  negative: '#FF5252',
  info: '#2196F3',
  warning: '#FFC107'
})

Особенности:

  • Любая переменная бренда может быть связана с компонентом или глобальным стилем.
  • Можно создавать несколько предустановленных цветовых схем и переключать их по событиям.

Персонализация через локальное хранилище

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

import { LocalStorage } from 'quasar'

const userTheme = LocalStorage.getItem('userTheme')
if (userTheme) {
  $q.dark.set(userTheme === 'dark')
}

// Смена темы и сохранение
function toggleTheme() {
  $q.dark.toggle()
  LocalStorage.set('userTheme', $q.dark.isActive ? 'dark' : 'light')
}

Важные моменты:

  • Позволяет сохранять индивидуальные настройки пользователя.
  • Обеспечивает консистентность интерфейса при перезагрузке страницы.

Темизация через SCSS

Quasar интегрирован с SCSS, что позволяет более гибко работать с переменными:

$primary: #ff5722;
$secondary: #ffc107;

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

body {
  background-color: $primary;
}
  • SCSS-переменные могут быть динамически связаны с токенами Quasar через quasar.conf.js.
  • Позволяет создавать сложные градиенты, миксины и адаптивные цветовые схемы.

Реактивная адаптация интерфейса

Комбинация реактивных данных Vue и систем Quasar позволяет динамически адаптировать интерфейс под состояние пользователя:

<template>
  <div :class="$q.dark.isActive ? 'text-white bg-dark' : 'text-black bg-light'">
    <q-btn @click="toggleTheme" label="Переключить тему" />
  </div>
</template>

<script>
export default {
  methods: {
    toggleTheme() {
      this.$q.dark.toggle()
    }
  }
}
</script>

Особенности:

  • Реактивность позволяет менять цвета без перезагрузки компонента.
  • Любой визуальный элемент можно синхронизировать с текущей темой.

Интеграция с медиа-запросами

Для более точной адаптивности можно использовать Quasar Screen Plugin:

if ($q.screen.gt.sm) {
  this.$q.colors.setBrand('primary', '#673AB7')
} else {
  this.$q.colors.setBrand('primary', '#3F51B5')
}
  • Позволяет изменять цветовую палитру в зависимости от размера экрана.
  • Сочетание $q.dark и $q.screen обеспечивает гибкую адаптивную темизацию для любых устройств.

Итоговые принципы адаптивной темизации

  1. Использовать токены Quasar вместо жестко заданных цветов.
  2. Комбинировать $q.dark с пользовательскими настройками для автоматической и ручной смены тем.
  3. Сохранять состояние темы через LocalStorage для консистентного UX.
  4. Интегрировать SCSS для более сложных цветовых схем и миксинов.
  5. Применять медиа-запросы через Screen Plugin для адаптивного изменения палитры в зависимости от устройства.

Эти методы обеспечивают мощную, гибкую и полностью адаптивную систему темизации, соответствующую современным требованиям интерфейсов на Vue.js с использованием Quasar.

Оглавление