主题功能 - sss

6.1.主题状态管理
在 src/store/modules/theme.js 中对一些主题风格相关的属性进行状态里，可在主题抽屉中进行在线切换，也可直接修改默认值：
// 如果需要修改默认值可直接改这个里面的值
// 但要注意主题抽屉中修改后会缓存在本地, 默认值若无效先清空缓存, 或主题抽屉中点重置
const DEFAULT_STATE = Object.freeze({
// 页签数据
tabs: [],
// 是否折叠侧栏
collapse: false,
// 侧栏一级是否紧凑风格
compact: false,
// 内容区是否最大化
maximized: false,
// 是否需要页签栏
tabBar: true,
// 布局类型
layout: 'side',
// 侧栏布局类型
sidebarLayout: 'default',
// 顶栏风格
headerStyle: 'light',
// 侧栏风格
sidebarStyle: 'dark',
// 页签风格
tabStyle: 'simple',
// 是否固定顶栏
fixedHeader: false,
// 是否固定侧栏
fixedSidebar: true,
// 是否固定内容区
fixedBody: true,
// 内容区是否撑满
fluid: true,
// 图标是否置于顶栏
logoInHeader: false,
// 侧栏菜单是否彩色图标
colorfulIcon: false,
// 侧栏排他展开
uniqueOpened: true,
// 固定主页页签
fixedHome: true,
// 路由切换动画
transitionName: 'slide-right',
// 是否色弱模式
weakMode: false,
// 是否暗黑模式
darkMode: false,
// 主题色
color: null,
// 内容区宽度
contentWidth: null
});
// ......省略其它代码
6.2.在线切换主题
在 ele-admin-plus/es/utils/theme-util 中提供了一个切换主题的方法，使用示例：
import { changeColor } from 'ele-admin-plus/es/utils/theme-util';

// 参数一是主题色, 参数二是是否暗黑模式
changeColor('#33cc99', false);
暗黑模式会给 html 的 class 增加 dark ，因为 Element 的暗黑主题变量都放在了 html.dark 下。
使用暗黑主题要先确保全局引入了暗黑主题的 css 变量的使用方式，一般在 main.js 中全局引入：
// Element 组件库的暗黑主题的 css 变量(Element 也会有全局的 css 变量)
import 'element-plus/theme-chalk/dark/css-vars.css';
// EleAdminPlus 组件库的暗黑主题的 css 变量
import 'ele-admin-plus/es/style/themes/dark-css-var.scss';
6.3.覆盖主题变量
可以在 src/styles/variables.scss 中修改 Element 和 EleAdminPlus 组件的样式变量：
// variables.scss 是在 vite.config.ts 中配置, 所以会对所有 scss 文件生效
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
border-radius: (
// 例如修改圆角值
'base': 6px,
'small': 4px
)
);

@forward 'ele-admin-plus/es/style/themes/default.scss' with (

e l e : (^{'} s i d e ba r^{'} : (// 例如修改侧栏宽 度^{'} w i d t h^{'} : 210 p x),^{'} h e a d e r^{'} : (// 例如修改顶栏高 度^{'} h e i g h t^{'} : 48 p x)) // El e A d min Pl u s 为了方便所有变量是都放在

ele 下
);
element-plus/theme-chalk/src/common/var.scss 中是 Element 所有的变量，可以点进去查看全部的变量。
ele-admin-plus/es/style/themes/default.scss 中是 EleAdminPlus 所有的变量，可以点进去查看全部的变量。
EleAdminPlus 根据经验总结出了一套美观的文字颜色、边框颜色、背景颜色、阴影颜色等，建议替换掉 Element 的默认值：
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
text-color: (
'primary': rgba(0, 0, 0, 0.92),
'regular': rgba(0, 0, 0, 0.88),
'secondary': rgba(0, 0, 0, 0.6),
'placeholder': rgba(0, 0, 0, 0.36),
'disabled': rgba(0, 0, 0, 0.28)
),
fill-color: (
'': #f0f0f0,
'light': #f5f5f5,
'lighter': #f7f7f7,
'extra-light': #fafafa
),
box-shadow: (
'': (
0 2px 10px 2px rgba(0, 0, 0, 0.1)
),
'light': (
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 9px 28px 8px rgba(0, 0, 0, 0.05)
),
'lighter': (
0 1px 2px 0 rgba(0, 0, 0, 0.03),
0 1px 6px -1px rgba(0, 0, 0, 0.02),
0 2px 4px 0 rgba(0, 0, 0, 0.02)
),
'dark': (
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 9px 28px 8px rgba(0, 0, 0, 0.05)
)
),

o v er l a y - co l or : (^{''} : r g ba (0, 0, 0, 0.8),^{'} l i g h t^{'} : r g ba (0, 0, 0, 0.6),^{'} l i g h t e r^{'} : r g ba (0, 0, 0, 0.45)),

mask-color: (
'': rgba(255, 255, 255, 0.3),
'extra-light': rgba(255, 255, 255, 0.6)
),
$border-radius: (
'base': 3px,
'small': 2px
)
);
6.4.使用暗黑主题
如果想要直接固定为暗黑主题(不需要在线切换暗黑主题)，可以在 src/styles/variables.scss 中使用暗黑主题的变量覆盖默认的主题变量：
@use 'ele-admin-plus/es/style/themes/dark.scss' as *;
@use 'element-plus/theme-chalk/src/dark/var.scss' as eldark;

// 使用

e l e - d a r k 变量覆盖掉默认的

ele
@forward 'ele-admin-plus/es/style/themes/default.scss' with (

e l e :

ele-dark
);

// 使用 Element 提供的暗黑主题变量覆盖要复杂一些
@forward 'element-plus/theme-chalk/src/common/var.scss' with (

co l ors : e l D a r k .

colors,

b g - co l or : e l D a r k .

bg-color,

b or d er - co l or - ba se : e l D a r k .

border-color-base,

b or d er - co l or : e l D a r k .

border-color,

b o x - s ha d o w : e l D a r k .

box-shadow,

f i ll - co l or - ba se : e l D a r k .

fill-color-base,

f i ll - co l or : e l D a r k .

fill-color,

t e x t - co l or - ba se : e l D a r k .

text-color-base,

t e x t - co l or : e l D a r k .

text-color,

ma s k - co l or : e l D a r k .

mask-color,

b u tt o n : e l D a r k .

button,

c a r d : e l D a r k .

card,

e m pt y : e l D a r k .

empty
);
完成以上操作就成功使用暗黑主题了，当然还可以在 $ele-dark 的基础上继续覆盖为自己的值：
@use 'sass:map';
@use 'ele-admin-plus/es/style/themes/dark.scss' as *;
@use 'element-plus/theme-chalk/src/dark/var.scss' as elDark;

@forward 'ele-admin-plus/es/style/themes/default.scss' with (

e l e : ma p . d ee p - m er g e (

ele-dark,
(
'sidebar': (
// 例如修改侧栏宽度
'width': 210px
),
'header': (
// 例如修改顶栏高度
'height': 48px
)
)
)
);

// Element 默认提供的暗黑主题色并不好看, EleAdminPlus 根据经验总结出了一套好看的暗黑主题色, 建议修改为如下
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
bg-color: (
'': #141414,
'page': #080808,
'overlay': #1f1f1f
),

b or d er - co l or - ba se : e l D a r k .

border-color-base,
box-shadow: (
'': (
0px 0px 12px rgba(0, 0, 0, 0.8)
),
'light': (
0 3px 6px -4px rgba(0, 0, 0, 0.48),
0 6px 16px 0 rgba(0, 0, 0, 0.32),
0 9px 28px 8px rgba(0, 0, 0, 0.2)
),
'lighter': (
0 1px 2px 0 rgba(0, 0, 0, 0.03),
0 1px 6px -1px rgba(0, 0, 0, 0.02),
0 2px 4px 0 rgba(0, 0, 0, 0.02)
),
'dark': (
0 3px 6px -4px rgba(0, 0, 0, 0.48),
0 6px 16px 0 rgba(0, 0, 0, 0.32),
0 9px 28px 8px rgba(0, 0, 0, 0.2)
)
),

f i ll - co l or - ba se : e l D a r k .

fill-color-base,
text-color-base: elDark.

t e x t - co l or - ba se,

text-color: (
'primary': rgba(255, 255, 255, 0.9),
'regular': rgba(255, 255, 255, 0.85),
'secondary': rgba(255, 255, 255, 0.4),
'placeholder': rgba(255, 255, 255, 0.3),
'disabled': rgba(255, 255, 255, 0.28)
),

ma s k - co l or : (^{''} : r g ba (20, 20, 20, 0.8),^{'} e x t r a - l i g h t^{'} : r g ba (20, 20, 20, 0.6)),

button: elDark.

b u tt o n,

card: elDark.

c a r d,

empty: elDark.

e m pt y); 如果需要在线切换主题可以使用 C ss Va r 形式的暗黑主题，在 main . j s 中引入如下两个文件： im p or t^{'} e l e m e n t - pl u s / t h e m e - c ha l k / d a r k / css - v a rs . cs s^{'}; im p or t^{'} e l e - a d min - pl u s / es / s t y l e / t h e m es / d a r k - css - v a r . scs s^{'}; 然后给 h t m l 加 c l a ss = " d a r k " 就可切换到暗黑主题了。但 El e m e n t 默认提供的暗黑主题色并不好看， El e A d min Pl u s 根据经验总结出了一套好看的暗黑主题色，新建一个 d a r k . scss 内容如下： // 先不要在 main . j s 引入上面说的两个文件 // 覆盖掉 El e m e n t 默认的暗黑主题变量 @ f or w a r d^{'} e l e m e n t - pl u s / t h e m e - c ha l k / src / d a r k / v a r . scs s^{'} w i t h (

colors: (
'primary': (
'base': #1668dc
),
'success': (
'base': #49aa19
),
'warning': (
'base': #d89614
),
'danger': (
'base': #dc4446
),
'error': (
'base': #dc4446
),
'info': (
'base': #8b8b8b
)
),

t e x t - co l or : (^{'} p r ima r y^{'} : r g ba (255, 255, 255, 0.9),^{'} re gu l a r^{'} : r g ba (255, 255, 255, 0.85),^{'} seco n d a r y^{'} : r g ba (255, 255, 255, 0.4),^{'} pl a ce h o l d e r^{'} : r g ba (255, 255, 255, 0.3),^{'} d i s ab l e d^{'} : r g ba (255, 255, 255, 0.28)),

border-color: (
'': #424242,
'light': #303030,
'lighter': #303030,
'extra-light': #282828,
'dark': #303030,
'darker': #424242
),
bg-color: (
'': #141414,
'page': #080808,
'overlay': #1f1f1f
),

b o x - s ha d o w : (^{''} : (0 p x 0 p x 12 p x r g ba (0, 0, 0, 0.8)),^{'} l i g h t^{'} : (03 p x 6 p x - 4 p x r g ba (0, 0, 0, 0.48), 06 p x 16 p x 0 r g ba (0, 0, 0, 0.32), 09 p x 28 p x 8 p x r g ba (0, 0, 0, 0.2)),^{'} l i g h t e r^{'} : (01 p x 2 p x 0 r g ba (0, 0, 0, 0.03), 01 p x 6 p x - 1 p x r g ba (0, 0, 0, 0.02), 02 p x 4 p x 0 r g ba (0, 0, 0, 0.02)),^{'} d a r k^{'} : (03 p x 6 p x - 4 p x r g ba (0, 0, 0, 0.48), 06 p x 16 p x 0 r g ba (0, 0, 0, 0.32), 09 p x 28 p x 8 p x r g ba (0, 0, 0, 0.2))),

mask-color: (
'': rgba(20, 20, 20, 0.8),
'extra-light': rgba(20, 20, 20, 0.6)
)
);
@use 'element-plus/theme-chalk/src/dark/css-vars.scss';
@use 'ele-admin-plus/es/style/themes/dark-css-var.scss';
然后在 main.js 中引入这个 dark.scss 之后给 html 加 class="dark" 就可切换到暗黑主题了。
如果需要覆盖 EleAdminPlus 的暗黑主题变量，在引入 dark-css-var.scss 的上一行进行覆盖，示例代码：
//......省略其它代码
@use 'element-plus/theme-chalk/src/dark/css-vars.scss';

@forward 'ele-admin-plus/es/style/themes/dark.scss' with (
ele-rounded 变量覆盖掉默认的 $ele
@use 'ele-admin-plus/es/style/themes/rounded.scss' as *;

@forward 'ele-admin-plus/es/style/themes/default.scss' with (

e l e :

ele-rounded
);

// 基础的圆角值是 Element 控制的
@forward 'element-plus/theme-chalk/src/common/var.scss' with (

b or d er - r a d i u s : (^{'} ba s e^{'} : 6 p x,^{'} s ma l l^{'} : 4 p x),

colors: (
'primary': (
// 参考前面的介绍, 还可以修改默认的主题色等
'base': #1677ff
)
)
// 这里建议将 Element 变量全覆盖为 6.3 建议的值
);
完成以上操作就成功使用圆角主题了，当然还可以在 $ele-rounded 的基础上继续覆盖为自己的值：
@use 'sass:map';
@use 'ele-admin-plus/es/style/themes/rounded.scss' as *;

@forward 'ele-admin-plus/es/style/themes/default.scss' with (

e l e : ma p . d ee p - m er g e (

ele-rounded,
(
'card': (
// 例如修改卡片的圆角
'radius': 4px
),
'sidebar': (
// 例如修改侧栏的宽度
'width': 210px
)
)
)
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with (

b or d er - r a d i u s : (^{'} ba s e^{'} : 6 p x,^{'} s ma l l^{'} : 4 p x)); 如果需要在线切换主题可以使用 C ss Va r 形式的圆角主题 (精简版不支持) ，新建一个 ro u n d e d . scss ，内容如下： //

rounded-selector: 'html.rounded';
// 引入 EleAdminPlus 提供的 CssVar 形式的圆角主题
@use 'ele-admin-plus/es/style/themes/rounded-css-var.scss' as *;
// 修改 Element 基础的圆角值
@use 'element-plus/theme-chalk/src/mixins/_var.scss' as *;

#{rounded-selector 可自己修改，如 'body.my-theme' , 然后给 body 加 class="my-theme"
// 如果要修改

ro u n d e d - se l ec t or 一定要写在第一行然后在 main . j s 中引入这个 ro u n d e d . scss 之后给 h t m l 加 c l a ss = " ro u n d e d " 就可切换到圆角主题了。如果需要覆盖 El e A d min Pl u s 的圆角主题变量，在引入 ro u n d e d - css - v a r . scss 的上一行进行覆盖，示例代码： @ f or w a r d^{'} e l e - a d min - pl u s / es / s t y l e / t h e m es / ro u n d e d . scs s^{'} w i t h (

ele-rounded: (
'menu': (
'item-radius': 20px
)
)
);
@use 'ele-admin-plus/es/style/themes/rounded-css-var.scss' as *;
//......省略其它代码
6.6.组件支持主题
在封装自定义组件时如果想要支持主题切换可以这样取 Element 的一些全局的样式变量：

只能使用放在 :root 里面的 css 变量，Element 将常用的一些颜色、背景、圆角、尺寸等是放在 :root 下的，这些足以让每个组件都可适配主题色以及暗黑模式的切换了，像每个组件自己使用的变量是没有放在 :root 下的，这些变量是不能在任意的位置使用的，EleAdminPlus 组件使用的 css 变量都放在每个组件下面，没有放在 :root 下，在封装自己的组件时，也应该避免把 css 变量放在 :root 下，如果所有组件都把 css 变量放在 :root 下，最终会因为变量过多导致切换主题的时候卡顿。