Работа с темами

В Element Plus управление визуальной темой начинается с глобальной конфигурации. Библиотека позволяет менять цветовую палитру, темы компонентов и глобальные переменные стилей, используя встроенный механизм SCSS-переменных или API для динамического изменения.

Использование SCSS-переменных

Element Plus предоставляет набор SCSS-переменных, которые определяют цвета, размеры, отступы и шрифты компонентов. Основные переменные:

  • $--color-primary — основной цвет.
  • $--color-success — цвет успеха.
  • $--color-warning — предупреждающий цвет.
  • $--color-danger — цвет ошибки.
  • $--font-size-base — базовый размер шрифта.
  • $--border-radius-base — радиус скругления элементов.

Пример подключения SCSS-переменных:

@use "element-plus/theme-chalk/src/common/var.scss" as *;

$--color-primary: #409eff;
$--border-radius-base: 6px;

После изменения переменных необходимо перекомпилировать стили, чтобы новые значения вступили в силу.

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

Element Plus предоставляет функцию el-global-config для динамического обновления темы без пересборки проекта. Основной метод — ElMessage, ElNotification и другие компоненты автоматически используют новые цвета, если изменить глобальные переменные через Jav * aScript:

import { ElMessage } from 'element-plus';
import 'element-plus/theme-chalk/index.css';

document.getElementById('switchTheme').addEventListener('click', () => {
  document.documentElement.style.setProperty('--el-color-primary', '#f56c6c');
  ElMessage.success('Тема изменена на красную');
});

--el-color-primary является CSS-переменной, используемой всеми компонентами для основного цвета. Такой подход позволяет реализовать тёмную и светлую тему, переключение которых происходит мгновенно.

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

Element Plus поддерживает тёмную тему с отдельным набором переменных. Для её активации используется CSS-класс el-theme-dark. В сочетании с динамическими переменными можно создавать гибкие интерфейсы с переключением между светлой и тёмной темой.

Подключение тёмной темы

import 'element-plus/theme-chalk/dark/css-vars.css';

document.body.classList.add('el-theme-dark');

Эта команда заменяет все CSS-переменные на значения тёмной темы. Для комбинирования со светлой темой удобно хранить набор переменных и подгружать их по выбору пользователя.

Кастомизация тёмной темы

Тёмная тема также может быть кастомизирована через SCSS:

@use "element-plus/theme-chalk/src/common/var.scss" as *;

.el-theme-dark {
  --el-color-primary: #ffd04b;
  --el-color-success: #67c23a;
}

Эти значения перекрывают стандартные цвета и позволяют подстраивать интерфейс под корпоративные требования.

Темы для отдельных компонентов

Element Plus позволяет задавать темы не только глобально, но и для отдельных компонентов с помощью CSS-переменных на уровне элемента:

<template>
  <el-button class="custom-button">Кнопка</el-button>
</template>

<style scoped>
.custom-button {
  --el-color-primary: #67c23a;
  --el-button-border-radius-base: 12px;
}
</style>

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

Применение темы в Vue 3

Для полноценного управления темой в Vue 3 удобно использовать реактивные переменные и watchEffect:

import { reactive, watchEffect } from 'vue';

const theme = reactive({
  primary: '#409eff',
  success: '#67c23a'
});

watchEffect(() => {
  document.documentElement.style.setProperty('--el-color-primary', theme.primary);
  document.documentElement.style.setProperty('--el-color-success', theme.success);
});

Любое изменение переменной theme.primary автоматически обновляет все компоненты, использующие основной цвет. Такой подход идеально подходит для реализации настраиваемых тем в реальном времени.

Использование темы с CSS-переменными

CSS-переменные в Element Plus имеют приоритет над SCSS после компиляции. Это позволяет:

  • Менять тему без пересборки проекта.
  • Локально настраивать отдельные компоненты.
  • Создавать адаптивные темы под конкретный контент.

Пример: переключение светлой и тёмной темы через переменные:

const darkTheme = {
  '--el-color-primary': '#ffd04b',
  '--el-color-success': '#67c23a'
};

const lightTheme = {
  '--el-color-primary': '#409eff',
  '--el-color-success': '#67c23a'
};

function applyTheme(theme) {
  Object.entries(theme).forEach(([key, value]) => {
    document.documentElement.style.setProperty(key, value);
  });
}

Вызывая applyTheme(darkTheme) или applyTheme(lightTheme), интерфейс мгновенно адаптируется к выбранной теме.

Итоговый подход к работе с темами

  1. SCSS-переменные — для глобальной базовой настройки.
  2. CSS-переменные — для динамических изменений и локальной кастомизации.
  3. Классы темы (el-theme-dark) — для переключения между светлой и тёмной темой.
  4. Реактивные переменные Vue — для создания интерактивных переключателей и пользовательских тем.

Такой подход обеспечивает полную гибкость в оформлении интерфейса, позволяя поддерживать единый стиль или создавать уникальные визуальные решения для каждого проекта.

Оглавление