自定义主题色与深色模式全攻略

🎯 引言

在前端开发中，UI 组件库的个性化定制非常重要。Element UI 是国内非常受欢迎的 Vue 2.0 组件库，默认提供了统一且美观的设计风格，但很多时候我们希望根据项目需求自定义主题色，甚至实现深色模式，提升用户体验。这篇文章将带你全面掌握 Element UI 中自定义主题色和深色模式的关键技巧，帮你打造更符合产品定位的界面。

🎨 自定义主题色与深色模式简介

Element UI 默认的主题色为蓝色系，适合大多数场景。但不管是品牌色替换还是响应用户习惯，定制主题色和深色模式几乎是必备功能。

深色模式作为当下流行趋势，不但保护用户视力，还能减少屏幕能耗。Element UI 官方提供了深色模式支持，但同时我们也可以通过切换 class 或主题变量，实现更灵活的效果。

🌙 启用深色模式

1. 官方深色模式支持

Element UI 2.15.0 版本开始，官方推出了深色模式支持，但需要你手动引入深色主题样式并通过 class 切换。

使用步骤：

• 在项目中安装深色主题包 yarn add element-theme-dark
• 通过给根元素添加 .el-theme-dark 类，切换深色样式

示例：

import 'element-theme-dark';

<div id="app" class="el-theme-dark">
    <!-- 这里的 Element UI 组件将会以深色模式展示 -->
</div>

这样就能快速切换官方提供的深色样式。

2. 自定义实现深色模式思路

如果官方深色主题不满足需求，或者想和自定义主题色结合，可以考虑以下方案：

• CSS 变量切换：用 CSS 变量定义颜色属性，深色模式变量覆盖默认变量，切换变量即可切换模式。
• SCSS 变量动态编译：通过构建工具按需编译不同主题 CSS 文件，运行时替换样式。
• class 选择器切换样式：定义 .dark 类下的颜色样式，切换该类实现深色模式。

这种方式灵活度更高，适合复杂的主题系统。

🎨 使用 SCSS 全局变量修改主题色

Element UI 的主题其实就是一系列 SCSS 变量的组合，我们可以通过覆盖这些变量，定制专属主题色。

1. 准备工作

• 安装 sass 及 sass-loader（支持 SCSS 编译）
• 在 Vue 项目中配置全局 SCSS 变量，保证 Element UI 样式引用变量时能读取到

在 main.js 中引入 element-variables.scss 样式文件

import './styles/element-variables.scss';

2. 覆盖 Element UI 默认主题色

在 element-variables.scss 中，覆盖以下核心变量：

$--color-primary: #90f9c1; // 深色模式主色

.el-button--primary {
    background-color: $--color-primary !important;
    border-color: $--color-primary !important;

    &:hover {
        background-color: darken($--color-primary, 10%) !important;
        border-color: darken($--color-primary, 10%) !important;
    }
}

4. 兼顾深色模式时的主题色调整

假设你使用类名切换深色模式，可以在 SCSS 中写条件样式：

.el-theme-dark {
    $--color-primary: #90caf9; // 深色模式主色

    .el-button--primary {
        background-color: $--color-primary !important;
        border-color: $--color-primary !important;

        &:hover {
            background-color: darken($--color-primary, 10%) !important;
            border-color: darken($--color-primary, 10%) !important;
        }
    }
}

🧾 小节总结

• Element UI 支持官方深色模式，使用 .el-theme-dark 类即可快速切换
• 深色模式也可以通过切换 CSS 变量或 class，自定义实现更灵活的主题切换
• 使用 SCSS 覆盖 Element UI 的全局变量，可以轻松定制主色调和按钮颜色
• 配合深色模式，需针对不同主题调整变量及样式，保证视觉一致性

❓ 知识问答（Q&A）

Q：Element UI 使用 SCSS 变量修改主题色，需不需要重新编译样式？

A：是的，修改 SCSS 变量后，通常需要重新编译样式文件，才能生效修改。

Q：官方深色模式支持哪些版本的 Element UI？

A：从 2.15.0 版本开始，Element UI 才有官方深色主题支持。

🧪 小练习

练习 1

基于 Element UI，尝试修改 $--color-primary 变量成你喜欢的颜色，观察按钮、链接等元素颜色变化。

// element-variables.scss
$--color-primary: #3498db;

练习 2

自己实现一个深色模式切换按钮，点击后给根元素添加 el-theme-dark 类，实现深色模式切换。

模板代码：

<template>
    <div :class="{ 'el-theme-dark': isDark }">
        <el-button @click="toggleDark">切换深色模式</el-button>
        <el-button type="primary">主按钮</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isDark: false,
        };
    },
    methods: {
        toggleDark() {
            this.isDark = !this.isDark;
        },
    },
};
</script>

🎉 恭喜你已经掌握 Element UI 的自定义主题色、深色模式切换以及 SCSS 变量覆盖技能啦！