Developer

Темизация: SASS-переменные, brand colors, dark mode

↑ 5.3 Quasar · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Как привести Quasar к дизайн-системе компании и поддержать тёмную тему.

Объяснение

Три уровня настройки:

  1. Brand colors (рантайм, CSS-переменные):
// quasar.config
framework: { config: { brand: { primary: "#1976d2", secondary: "#26a69a", accent: "#9c27b0", dark: "#1d1d1d", positive: "#21ba45", negative: "#c10015", info: "#31ccec", warning: "#f2c037" } } }
// в рантайме
import { setCssVar, getCssVar } from "quasar"; setCssVar("primary", "#ff5722");
  1. SASS-переменные (src/css/quasar.variables.scss, компиляция):
$primary: #1976d2;
$typography-font-family: "Inter", sans-serif;
$button-border-radius: 8px;
$spaces: (sm: (x: 8px, y: 8px), md: (x: 16px, y: 16px));
$breakpoint-md: 1024px;
  1. Глобальные стили (app.scss) и CSS-переменные собственных токенов:
:root { --app-radius: 8px; --app-border: #e0e0e0; }
body.body--dark { --app-border: #424242; }
.text-muted { color: var(--q-secondary); }

Dark mode:

framework: { config: { dark: "auto" } }         // true | false | "auto" (системные предпочтения)
$q.dark.set(true); $q.dark.toggle(); $q.dark.isActive;

Класс body--dark включается на <body>; компоненты Quasar адаптируются. Для собственных стилей: селектор .body--dark .my, CSS-переменные --q-* (var(--q-primary)), утилиты bg-dark, text-white. Сохраняйте выбор пользователя (Pinia + LocalStorage) и учитывайте prefers-color-scheme.

Иконки и шрифты: extras (material-icons, mdi-v7, fontawesome-v6), iconSet.

Дизайн-токены: держите цвета/радиусы/отступы в SASS-переменных и CSS-переменных; избегайте магических значений в компонентах.

Нюансы и подводные камни

  • SASS-переменные Quasar работают только при использовании SASS-сборки (Quasar CLI подключает).
  • Цвета контраста (WCAG) в тёмной теме проверяйте отдельно.
  • Смена brand в рантайме не перекрашивает жёстко заданные цвета в CSS.
  • Мигание светлой темы при загрузке: устанавливайте класс до рендера (inline-скрипт или ранняя инициализация).
  • Картинки и графики требуют версий для тёмной темы.

Практика

  1. Настройте фирменные цвета и шрифт через SASS-переменные.
  2. Реализуйте переключатель темы с сохранением выбора.
  3. Проверьте контраст в тёмной теме и исправьте.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки