vue基于scss的动态切换主题颜色

根据预设的配色方案，在前端动态切换系统主题颜色

大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。

具体实现

新建themes.scss文件

这里只是做示例就写两个样式参考，更多的自己补充一下

$themes: (Red: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态mainColor: #D6000F, //主题色titleColor: #5f95cc, //默认字体色/二级信息字体色),Blue: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态mainColor: #409EFF, //菜单选中背景色/点击状态/文字,按钮按下titleColor: #d64e18, //列表背景色),
);

新建handle.scss文件操作

themeify方法用于获取HTML的 data-theme值。
themed方法用于根据HTML的 data-theme值及调用者传过来的key去 themes.scss里获取相应的颜色。

@import "./themes.scss";
//切换主题时 获取不同的主题色值
@mixin themeify {@each $theme-name,$theme-map in $themes {//!global 把局部变量强升为全局变量$theme-map: $theme-map !global;//判断html的data-theme的属性值  #{}是sass的插值表达式//& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot[data-theme="#{$theme-name}"] & {@content;}}
}//从主题色map中取出对应颜色
@function themed($key) {@return map-get($theme-map, $key);
}//获取背景颜色
@mixin background_color($color) {@include themeify {background-color: themed($color)!important;}
}//获取字体颜色
@mixin font_color($color) {@include themeify {color: themed($color)!important;}
}

在vue页面中使用


```html
<template><div class="my--demo"><Dropdown><Button type="primary">主题切换<i class="el-icon-arrow-down el-icon--right"></i></Button><DropdownMenu slot="dropdown"><DropdownItem @click.native="theme('normal')">默认</DropdownItem><DropdownItem @click.native="theme('Red')">红色</DropdownItem><DropdownItem @click.native="theme('Blue')">蓝色</DropdownItem></DropdownMenu></Dropdown><div class="common-util">测试主题变化</div></div>
</template>
<script>
export default {name: 'themeDemo',methods: {//换主题theme(type) {window.document.documentElement.setAttribute('data-theme', type)},},
}
</script>
<style lang="scss" scoped>
@import '@/styles/base/_handle.scss';
.common-util {font-size: 18px;height: 100px;margin-top: 20px;@include font_color('titleColor');@include background_color('mainColor');@include border_color('mainColor');
}
</style>

vue基于scss的动态切换主题颜色相关推荐

elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
vue动态发布到线上_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css,具体实现步骤如下: 1.添加webpack插件,新建文件we ...
vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
element如何动态切换主题(vite+vue+ts+elementPlus)
前言提示:动态切换主题使用的是css3的var函数现实示例:切换--main-bg-color的值,使用<div style="--main-bg-color:red"& ...
ECharts实现动态切换主题样式
ECharts是百度开源的一个JS数据可视化库.通过颜色主题可以轻松实现不同颜色样式的修改,也可以通过调色盘.直接样式设置.高亮样式等方法实现. ECharts4 开始,除了一贯的默认主题外,新内置了 ...
Metal之简单渲染动态切换屏幕颜色
渲染循环一.功能管理metal的初始化以及metal中的视图委托 initWithMetalKitView函数:初始化,需要传入MTKView对象view获取GPU的使用权限等 makeFancy ...
Android动态切换主题
软件换肤从功能上可以划分三种: 1) 软件内置多个皮肤,不可由用户增加或修改: 最低的自由度,软件实现相对于后两种最容易. 2) 官方提供皮肤供下载,用户可以使用下载的皮肤: 用户可选择下载自己喜欢的 ...
antd动态换主题颜色
1.下载插件 npm add antd-theme-generator && yarn add antd-theme-generator 2.根目录添加color.js const p ...

vue基于scss的动态切换主题颜色

根据预设的配色方案，在前端动态切换系统主题颜色

具体实现

vue基于scss的动态切换主题颜色相关推荐

最新文章

热门文章