ant |
您所在的位置:网站首页 › vue设置主题颜色 › ant |
ant-design-vue 4.x实现动态主题和暗色模式
github地址:github.com/pepedd864/c…
bilibili: www.bilibili.com/video/BV1u9…
在 4.0 版本的 Ant Design Vue 中,提供了一套全新的定制主题方案。不同于 3.x 版本的 less 和 CSS 变量,有了 CSS-in-JS 的加持后,动态主题的能力也得到了加强,包括但不限于: 支持动态切换主题; 支持同时存在多个主题; 支持针对某个/某些组件修改主题变量; ...通过ConfigProvider即可实时修改主题 在本项目中,我使用了antdv+pinia+sass的组合,理论上可以在任何前端项目中使用 通过改变页面中的自定义属性theme和dark配合sass+pinia实现实时修改主题色和亮暗模式 上面使用的是js操作antdv中的主题,实际开发中,我们会有一部分组件是自己设计,因此为了维持主题的统一性,我们可以使用sass进行主题的定制 如何实现我们指定一个主题名称时,页面自动切换为指定的颜色组合呢 我们可以使用html的自定义属性来控制我们的主题 比如下面这段代码 body { position: relative; transition: background-color 0.3s, color 0.3s; html[data-dark='light'][data-theme='red'] & { background-color: red; color: #000; } }当data-dark='light'和data-theme='red'同时成立时,背景颜色设置成红色 那如果我们需要设置多组主题和模式时,代码就会变成下面这个样子 body { position: relative; transition: background-color 0.3s, color 0.3s; html[data-dark='light'][data-theme='red'] & { background-color: red; color: #000; } html[data-dark='light'][data-theme='orange'] & { background-color: orange; color: #000; } html[data-dark='light'][data-theme='yellow'] & { background-color: yellow; color: #000; } html[data-dark='light'][data-theme='cyan'] & { background-color: cyan; color: #000; } ... } 因此,我们需要使用sass来帮我们减少重复的代码,使用@mixin和@each可以批量生成上面重复的片段 $modes: ( light: ( bgColor: #fff, infoColor: #000 ), dark: ( bgColor: #000, infoColor: #fff ) ); @mixin useTheme() { @each $key, $value in $modes { html[data-dark='#{$key}'] & { @content; } } }下面这段代码 body { position: relative; transition: background-color 0.3s, color 0.3s; @include useTheme { } }相当于 body { position: relative; transition: background-color 0.3s, color 0.3s; html[data-dark='light'] & { } html[data-dark='dark'] & { } ... }同样的,因为我们使用了主题色和亮暗模式的组合,所以也需要使用到两层@each循环遍历 @mixin useTheme() { @each $key1, $value1 in $modes { @each $key2, $value2 in $colors { html[data-dark='#{$key1}'][data-theme='#{$key2}'] & { @content; } } } }接下来,就是根据当前的主题和模式返回对应的颜色了,这里我们需要一个全局变量存储当前的颜色和模式 $curMode: light; $curTheme: red; @mixin useTheme() { @each $key1, $value1 in $modes { $curMode: $key1 !global; @each $key2, $value2 in $colors { $curTheme: $key2 !global; html[data-dark='#{$key1}'][data-theme='#{$key2}'] & { @content; } } } }并完成颜色的定义 $colors: ( red: ( primary: $red, info: $red, ), orange: ( primary: $orange, info: $orange, ), yellow: ( primary: $yellow, info: $yellow, ), cyan: ( primary: $cyan, info: $cyan, ), green: ( primary: $green, info: $green, ), blue: ( primary: $blue, info: $blue, ), purple: ( primary: $purple, info: $purple, ) );然后,写一个根据$curMode和$curTheme返回对应值的函数 @function getModeVar($key) { $modeMap: map-get($modes, $curMode); @return map-get($modeMap, $key); } @function getColor($key) { $themeMap: map-get($colors, $curTheme); @return map-get($themeMap, $key); }然后在混合里面就可以使用函数获取当前主题或模式对应的颜色值了 body { position: relative; transition: background-color 0.3s, color 0.3s; @include useTheme { background-color: getModeVar('bgColor'); color: getModeVar('infoColor'); } }使用theme.scss test @import "@/styles/theme"; .test { @include useTheme { background: getColor('primary'); } } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |