CSS переменные для тем

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

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

В Quasar глобальные CSS-переменные задаются в корневом селекторе :root для светлой темы и через селектор [data-theme="dark"] для тёмной. Например:

:root {
  --q-color-primary: #1976d2;
  --q-color-secondary: #26a69a;
  --q-color-accent: #ff4081;
}

[data-theme="dark"] {
  --q-color-primary: #2196f3;
  --q-color-secondary: #80cbc4;
  --q-color-accent: #f50057;
}

Эти переменные автоматически применяются к компонентам Quasar, использующим предопределённые цветовые классы (bg-primary, text-secondary и т.д.).

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

Quasar предоставляет утилиту для смены темы в рантайме. Основная точка управления — объект Quasar.Dark:

import { Dark } from 'quasar';

Dark.set(true); // включение тёмной темы
Dark.set(false); // включение светлой темы

Смена темы автоматически переключает набор CSS-переменных, если они определены для [data-theme="dark"].

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

Можно создавать собственные CSS-переменные и использовать их внутри стилей компонентов:

.my-button {
  background-color: var(--q-color-primary);
  color: var(--q-color-accent);
  border-radius: 8px;
  padding: 12px 24px;
}

[data-theme="dark"] .my-button {
  background-color: var(--q-color-primary);
  color: var(--q-color-accent);
}

Использование var(--имя-переменной) позволяет одним стилевым правилом управлять внешним видом как для светлой, так и для тёмной темы.

Поддержка динамических значений

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

document.documentElement.style.setProperty('--q-color-primary', '#ff5722');

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

Интеграция с SCSS и Stylus

Quasar поддерживает препроцессоры SCSS и Stylus, что даёт возможность использовать CSS-переменные совместно с переменными препроцессоров для более гибкой темы:

$primary: #1976d2;
$secondary: #26a69a;

:root {
  --q-color-primary: #{$primary};
  --q-color-secondary: #{$secondary};
}

При этом можно легко менять $primary или $secondary, и это автоматически обновит все связанные CSS-переменные.

Темизация отдельных компонентов

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

<template>
  <q-btn label="Кнопка" class="custom-btn"/>
</template>

<style scoped>
.custom-btn {
  --q-btn-bg-color: #ff9800;
  --q-btn-text-color: #212121;
}
</style>

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

Преимущества использования CSS-переменных для тем

  • Унификация стилей: все компоненты могут использовать одну цветовую палитру.
  • Динамическая настройка: изменение темы без перезагрузки страницы.
  • Гибкость и масштабируемость: добавление новых тем и кастомных цветов легко интегрируется в существующий код.
  • Совместимость с препроцессорами: SCSS и Stylus позволяют комбинировать переменные препроцессора и CSS-переменные.

Рекомендации по структуре переменных

  • Разделять семантически: --q-color-primary, --q-color-secondary, --q-color-accent, --q-color-positive, --q-color-negative.
  • Использовать единый источник правды: глобальные переменные должны быть централизованы в одном файле.
  • Определять значения для тёмной темы отдельно от светлой, чтобы минимизировать визуальные несоответствия.

Взаимодействие с Quasar CSS Utility Classes

CSS-переменные напрямую интегрируются с классами Quasar:

  • bg-primary, bg-secondary, bg-accent
  • text-primary, text-secondary, text-accent
  • border-primary, border-secondary

Изменение переменной --q-color-primary автоматически обновляет все компоненты, использующие bg-primary или text-primary.

Примеры комплексного применения

  1. Переключение темы и кастомизация цветов:
import { Dark } from 'quasar';

function switchTheme(isDark) {
  Dark.set(isDark);
  document.documentElement.style.setProperty(
    '--q-color-accent', 
    isDark ? '#f50057' : '#ff4081'
  );
}
  1. Локальная настройка компонентов под тему:
<q-card class="theme-card">
  <q-card-section>
    Контент с кастомной цветовой схемой
  </q-card-section>
</q-card>

<style scoped>
.theme-card {
  --q-card-bg: var(--q-color-secondary);
  --q-card-text: var(--q-color-primary);
}
</style>

Использование CSS-переменных в сочетании с механизмом тем Quasar создаёт мощный инструмент для построения динамических, легко кастомизируемых интерфейсов.

Оглавление