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

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

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

Каждый компонент Element Plus использует набор CSS-переменных для стилизации. Для создания пользовательской темы необходимо определить значения этих переменных.

Пример переопределения базовых цветов:

:root {
  --el-color-primary: #409EFF;
  --el-color-success: #67C23A;
  --el-color-warning: #E6A23C;
  --el-color-danger: #F56C6C;
  --el-color-info: #909399;

  --el-border-radius-base: 8px;
  --el-font-size-base: 14px;
}

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

  • --el-color-primary – основной цвет для кнопок, ссылок и активных элементов.
  • --el-border-radius-base – базовый радиус скругления для всех компонентов.
  • --el-font-size-base – базовый размер шрифта, используемый во всех текстовых компонентах.

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

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

Element Plus предоставляет SCSS-переменные для более глубокой кастомизации. Это особенно полезно, если требуется изменять внутренние состояния компонентов, которые недоступны через CSS-переменные.

Пример создания SCSS-темы:

$--color-primary: #409EFF;
$--color-success: #67C23A;
$--border-radius-base: 10px;
$--font-size-base: 16px;

@import "~element-plus/packages/theme-chalk/src/index";

Особенности SCSS-подхода:

  • Подключение через @import позволяет скомпилировать новую тему вместе с проектом.
  • Позволяет изменять переменные, не доступные через CSS, например: тени, анимации или состояния hover.
  • Требует сборщика SCSS (Webpack, Vite или другие).

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

Для интерактивного изменения темы в рантайме можно использовать функцию ElMessageBox, ElButton и другие компоненты с динамически заданными стилями через CSS-переменные.

Пример динамической смены основной палитры:

function setThemeColor(primaryColor) {
  document.documentElement.style.setProperty('--el-color-primary', primaryColor);
}

// Использование
setThemeColor('#FF5722');

Преимущества:

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

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

  1. Определение базовой палитры:

    • Основной, второстепенный и акцентные цвета.
    • Цвета состояний: hover, disabled, active.

  2. Настройка типографики и размеров:

    • Базовый шрифт, размеры заголовков, отступы.
    • Радиусы скругления и размеры иконок.

  3. Настройка специфических компонентов:

    • Например, ElButton – цвет фона, цвет текста, тень при наведении.
    • ElInput – цвет рамки, внутренние отступы, фокусное состояние.

  4. Интеграция через SCSS или CSS-переменные.

  5. Добавление механизма динамической смены темы (опционально).

Пример расширенной CSS-темы:

:root {
  --el-color-primary: #1E90FF;
  --el-color-success: #28A745;
  --el-color-warning: #FFC107;
  --el-color-danger: #DC3545;
  --el-color-info: #17A2B8;

  --el-border-radius-base: 12px;
  --el-font-size-base: 15px;
  --el-input-height: 42px;
  --el-button-padding-horizontal: 18px;
  --el-button-padding-vertical: 10px;
}

Работа с пользовательскими шрифтами и иконками

Element Plus поддерживает интеграцию сторонних шрифтов и иконок. Для этого достаточно переопределить CSS-переменные или использовать SCSS:

$--font-family-base: "Roboto", sans-serif;
$--icon-font-path: "~assets/fonts/element-icons.woff2";

Рекомендации:

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

Практические советы

  • Использовать CSS-переменные для легкой смены темы, SCSS – для глубокой кастомизации.
  • Сохранять совместимость с обновлениями Element Plus, избегая прямого изменения исходных стилей библиотеки.
  • Тестировать тему на разных компонентах, чтобы проверить видимость текста и контраст.
  • Для крупных проектов стоит реализовать систему тем, где можно хранить несколько наборов переменных и переключать их динамически.

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

Оглавление