Создание пользовательских тем

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

В Quasar есть две основные стратегии работы с темами: глобальная тема и локальная тема компонентов. Глобальная тема задаёт основной стиль всего приложения, тогда как локальная позволяет менять визуальные параметры отдельных компонентов.

Работа с CSS-переменными

В основе темы лежат CSS-переменные, которые определяются в файле variables.sass или variables.scss. Основные переменные включают:

$primary – основной цвет приложения;
$secondary – дополнительный цвет для акцентов;
$accent – цвет выделений;
$dark – цвет фона тёмной темы;
$positive, $negative, $info, $warning – стандартные семантические цвета для сообщений и состояний.

Изменение этих переменных автоматически отражается во всех компонентах, которые используют их через var(--q-*). Например, чтобы задать новый основной цвет:

$primary: #4caf50; // Зеленый

После этого все компоненты Quasar, использующие $primary, примут новый цвет без дополнительного вмешательства.

Создание собственной темы

Создание файла темы Все пользовательские темы удобно хранить в папке src/css/themes/. Для каждой темы создаётся отдельный SCSS-файл, например my-theme.scss.

/* src/css/themes/my-theme.scss */
$primary: #2196f3;
$secondary: #ff9800;
$accent: #e91e63;
$dark: #121212;
$positive: #4caf50;
$negative: #f44336;
$info: #00bcd4;
$warning: #ffeb3b;

Импорт темы в приложение В quasar.conf.js в секции cssAddon или через css импортируется новый файл:

css: [
  'app.scss',
  'themes/my-theme.scss'
],

Переключение между темами Quasar позволяет динамически менять темы через Vue-переменные или плагины. Для этого можно использовать метод this.$q.theme.set():

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

Для пользовательской темы необходимо зарегистрировать её в системе:

import { Dark } from 'quasar'

Dark.set(true) // включение пользовательской тёмной темы

Локальная кастомизация компонентов

Для компонентов можно задавать тему локально через проп color и text-color:

<q-btn color="primary" text-color="white" label="Кнопка"></q-btn>

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

<template>
  <q-card class="custom-card">
    <q-card-section>Пример локальной темы</q-card-section>
  </q-card>
</template>

<style scoped lang="scss">
.custom-card {
  background-color: var(--q-primary);
  color: var(--q-white);
}
</style>

Это позволяет создавать уникальный внешний вид отдельных элементов без влияния на глобальную тему.

Динамическая смена темы

Quasar поддерживает динамическое применение тем в реальном времени. Можно реализовать переключатель тем с помощью реактивного свойства:

data() {
  return {
    darkMode: false
  }
},
watch: {
  darkMode(val) {
    this.$q.dark.set(val)
  }
}

В шаблоне:

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

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

Продвинутые техники

Наследование тем: можно создавать темы, которые наследуют базовую и переопределяют только несколько переменных. Это удобно для создания вариантов одного стиля.
SCSS-функции: Quasar предоставляет функции вроде darken(), lighten() и rgba() для манипуляции цветами прямо в файлах темы.
Поддержка RTL и языковых особенностей: переменные темы можно сочетать с адаптацией интерфейса, например, цветовые схемы для разных локализаций.