scss 动态更换主题样式

//当HTML的data-theme为dark时，样式引用dark
//data-theme为其他值时，就采用组件库的默认样式
//这里我只定义了两套主题方案，想要再多只需在`$themes`里加就行了
//注意一点是，每套配色方案里的key可以自定义但必须一致，不然就会混乱$themes: (green: ( //字体font_color1: #07bc78,//背景background_color1: #07bc78,background_color2: #18b277,background_color3: #0aa170,// 主体颜色main-background_color1: #eff4ee,// 按钮颜色btn_color:#07bc78,//边框border_color1: #07bc78,// 阴影box_shadow_color:rgba(56,210,78,0.6)),pink: ( //字体//字体font_color1: #ff4b50,//背景background_color1: #ff4b50,background_color2: #ff4b50,background_color3: #ff4b50,// 主体颜色main-background_color1: #f4eef0,// 按钮颜色btn_color:#ff4b50,//边框border_color1: #ff4b50,// 阴影box_shadow_color:rgba(255, 75, 80,0.6)));//遍历主题map
@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;}}
}//声明一个根据Key获取颜色的function
@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;}
}//获取边框颜色
@mixin border_color($color) {@include themeify {border-color: themed($color) !important;}
}
//获取边框颜色
@mixin border_line_color($color,$num:1px) {@include themeify {border: $num  solid themed($color) !important;}
}
// 阴影
@mixin box-shadowr($shadows,$color) {@include themeify {box-shadow: $shadows themed($color) !important;}
}

.button {width: 132px;height: 36px;line-height: 34px;font-size: 16px;letter-spacing: 1px;color: #ffffff;//设置背景颜色@include background_color("background_color1");border-radius: 4px;//设置边框颜色@include border_line_color("border_color1");box-sizing: border-box;cursor: pointer;}

全局的地方使用方法

window.document.documentElement.setAttribute( "data-theme", 'pink' );

scss 动态更换主题样式相关推荐

一键换肤--动态更换主题颜色风格
基于前一段时间项目具有换肤需求的功能,几经预研学习换肤功能效果,网上的资源很多,最初看到是网易换肤的酷炫效果,今天得空打算写一篇关于换肤功能的文章,项目无需重启Activity的就可以实现无缝换肤切换 ...
动态更换主题色（换肤功能）
文章目录对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换 JS改变href属性值切换样式表,例如 HTML 的 rel 属性下的 alternate 实现: 对于制定动态色值换 ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
ECharts实现动态切换主题样式
ECharts是百度开源的一个JS数据可视化库.通过颜色主题可以轻松实现不同颜色样式的修改,也可以通过调色盘.直接样式设置.高亮样式等方法实现. ECharts4 开始,除了一贯的默认主题外,新内置了 ...
html积极向上的主题设计,css/less 实现动态更换主题色
固定主题色的切换思路:访问网页 => js读取缓存(判断是否有主题色的值,没有就默认皮肤,有则使用指定皮肤) => 用户点击换肤 => js切换对应的css样式文件即可 => ...
Ant design vue中实现动态更换主题色
一.创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能, 根据需求选择配置功能这里最好选择2.0版本, 可以 ...
vue scss 一键更换主题色，字体等页面等页面大体样式
主要采用scss 编程式思想实现以上文件从上到下进行说明 _variables.scss 文件主要写主题色字体边框等变量内容如下: ------------------------------- ...
Rstudio更换主题/样式
github项目地址:https://github.com/gadenbuie/rsthemes 安装在 rstudio 的控制台console中数据: install.packages(" ...
scss 动态切换主题解说
代码解说: 1.定义两个主题颜色:分别作字体颜色和背景颜色 $themes: ( red: (fontColor: red,bgColor:gold), yellow: (fontCo ...

scss 动态更换主题样式

scss 动态更换主题样式相关推荐

最新文章

热门文章