Темная тема

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

Включение темной темы через переменные

Темная тема реализуется с помощью CSS-переменных. Библиотека предоставляет набор переменных для каждого компонента, которые можно переопределять. Ключевые переменные для темной темы:

:root {
  --el-color-primary: #409EFF;
  --el-color-primary-light-3: #53a8ff;
  --el-color-primary-light-5: #66b1ff;
  --el-color-primary-light-7: #79bbff;
  --el-color-primary-light-9: #8cc5ff;

  --el-color-bg-1: #303133;
  --el-color-bg-2: #2c2c2c;
  --el-color-bg-3: #1f1f1f;

  --el-color-text-primary: #ffffff;
  --el-color-text-regular: #dcdfe6;
  --el-color-text-secondary: #a6a6a6;
  --el-color-border: #464646;
}

Эти переменные можно подключить через глобальный CSS или через <style> в App.vue. Важно определить их до монтирования приложения, чтобы компоненты корректно отображались в темной палитре.

Использование ConfigProvider

ConfigProvider позволяет задавать тему глобально для всех компонентов:

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import { ElConfigProvider } from 'element-plus';
import App from './App.vue';

const app = createApp(App);

app.use(ElementPlus);

app.mount('#app');

Для динамического переключения тем можно использовать метод:

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

function enableDarkMode() {
  document.body.classList.add('el-theme-dark');
}

function disableDarkMode() {
  document.body.classList.remove('el-theme-dark');
}

Добавление класса el-theme-dark автоматически применяет темную тему ко всем компонентам Element Plus.

Настройка отдельных компонентов

Некоторые компоненты требуют дополнительной настройки для корректного отображения в темной теме.

Кнопки (ElButton)

Для кнопок рекомендуется использовать type="primary" или plain, чтобы текст оставался читаемым на темном фоне:

<el-button type="primary">Основная кнопка</el-button>
<el-button plain>Простая кнопка</el-button>

Модальные окна (ElDialog)

Модальные окна наследуют цвет фона и текста от глобальных переменных. При необходимости можно переопределять отдельные стили:

.el-dialog__header {
  background-color: var(--el-color-bg-2);
  color: var(--el-color-text-primary);
}

.el-dialog__body {
  background-color: var(--el-color-bg-3);
  color: var(--el-color-text-regular);
}

Таблицы (ElTable)

Для таблиц важно настроить цвет строк и границ:

.el-table th {
  background-color: var(--el-color-bg-2);
  color: var(--el-color-text-primary);
}

.el-table td {
  background-color: var(--el-color-bg-3);
  color: var(--el-color-text-regular);
}

.el-table__body tr:hover {
  background-color: #3b3b3b;
}

Динамическое переключение тем

Темная тема может быть включена и отключена во время работы приложения. Для этого используют реактивное состояние и классы CSS:

<template>
  <el-switch
    v-model="isDark"
    active-text="Темная тема"
    inactive-text="Светлая тема"
    @change="toggleTheme"
  />
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const isDark = ref(false);

    const toggleTheme = (value) => {
      if (value) {
        document.body.classList.add('el-theme-dark');
      } else {
        document.body.classList.remove('el-theme-dark');
      }
    };

    watch(isDark, toggleTheme);

    return { isDark, toggleTheme };
  },
};
</script>

Персонализация темной темы

Element Plus позволяет менять отдельные оттенки цветов через SCSS-переменные при сборке:

$--color-primary: #409EFF;
$--color-bg-1: #303133;
$--color-text-primary: #ffffff;

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

Интеграция с Vue Router и Vuex

Темная тема может быть сохранена между страницами и сессиями. Для этого используют глобальное состояние через Vuex или Composition API:

import { reactive, watch } from 'vue';

export const themeStore = reactive({
  darkMode: false,
});

watch(
  () => themeStore.darkMode,
  (val) => {
    document.body.classList.toggle('el-theme-dark', val);
  }
);

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

Важные моменты

  • Всегда подключать переменные темной темы до монтирования компонентов, иначе стили могут примениться некорректно.
  • Некоторые сторонние компоненты могут требовать ручного переопределения цветов.
  • Использование CSS-переменных позволяет динамически менять тему без перезагрузки страницы.
  • Комбинирование SCSS-переменных и CSS-переменных даёт гибкость как при сборке, так и при runtime.

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

Оглавление