vue3 结合element-plus 切换主题功能，结合上篇使用

最新推荐文章于 2025-11-14 13:40:46 发布

原创最新推荐文章于 2025-11-14 13:40:46 发布 · 632 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在mian.js中使用ElementPlus框架，通过修改`styles/element/index.scss`和引入自定义的dark.scss文件，实现ElementPlus主题的切换，包括primary颜色的定制和按钮padding的调整，同时参考了element-plus-vite-starter-main项目。

mian.js 里面

import './styles/element/index.scss'

// styles/element/index.scss 代码

// 修改element主题样式
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #e54c0f,
    ),
  ),
   $button-padding-horizontal: ("default": 50px)
);
// 自定义暗黑主题变量
@use "./dark.scss";
// 导入element样式
@use "element-plus/theme-chalk/src/index.scss" as *;
//导入黑色主题
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

dark.scss里面代码

// 自定义黑色主题
$--colors: (
        "primary": (
                "base": #589ef8,
        ),
);
@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors: $--colors
);

参考：element-plus-vite-starter-main 项目