关于前端css 多主题系统的设计
关于前端css 多主题系统的设计
参考案例 https://codepen.io/liar0320/pen/jObExYP
文章目录
- 关于前端css 多主题系统的设计
- 目前主流的换肤方式
- 1.通过加载不同的css来替换样式
- 2.通过data-theme属性来替换样式
- ElementUI 的实现
- 基于 *CSS自定义变量* 的实现
- 参考文章
目前主流的换肤方式
1.通过加载不同的css来替换样式
定义两个css文件
1.theme-dark.css
2.theme-light.css
两个文件里除了 关于主题的颜色等不同 其他的内容都是一模一样的。
// 在项目运行过程中
//采用函数的方式来替换
var currentTheme = 'dark';
function changeTheme(){
var currentTheme = 'light'
var getCurrentUrl = `/content/theme-${currentTheme}.css`;
document.getElementById('projectCss').href = getCurrentUrl;
}
2.通过data-theme属性来替换样式
这个方式和1其实雷同，只是他的结构比方式1简单。可以借助scss，或者其他预编译工具，定义好基本的主题，来直接生成主题颜色。
A. 方案一
制作一个Mixin Directives 接收 $name，$key参数
循环主题集合
从主题集合中获取，当前主题对应的values
参考案例 https://codepen.io/liar0320/pen/jObExYP
$dark-theme: (
font-color: #fff,
);
$light-theme: (
font-color: #303133,
);
$themes: (
light: $light-theme,
dark: $dark-theme
);
@mixin data-theme($name, $key) {
@each $themename, $theme in $themes {
[data-theme="#{$themename}"] & {
#{$name}: map-get($theme, $key);
}
}
}
.test{
@include data-theme("color","font-color")
}
//compiled
[data-theme="light"] .test {
color: #303133; }
[data-theme="dark"] .test {
color: #fff; }
B. 方案二
// 默认主题
$light-theme : (
base-color: #ddd,
border-color: #000
);
$dark-theme : (
base-color: #ff0000,
border-color: #000
);
$themes : (
light: $light-theme,
dark: $dark-theme,
);
//基础的多主体背景色
@mixin base-background(){
@each $themename , $theme in $themes {
[data-theme = '#{$themename}'] & {
background-color: map-get($theme,base-color);
}
}
}
//基础的多主体边框色
...
等等
.bgc {
@include base-background();
}
最后生成的结果
[data-theme='light'] .bgc {
background-color: #ddd; }
[data-theme='dark'] .bgc {
background-color: #ff0000; }
<body ng-app="BlankApp" ng-cloak data-theme='dark'>
<div ui-view class="height">div>
<script>
//通过改变data-theme值来切换主题
//$('body').attr('data-theme',currentThemes.shift() || 'dark');
script>
<script src="main.js">script>
<script src="templates.js">script>
body>
//也可采用mixin来色织当前主题的颜色
[data-theme='dark'] &{
background-image: $darkGradient , url($bgImage--dark);
.sidebar__logo__link {
color:f-font-color();
}
@include set-nav-background-color(
$nav__color--dark,
$nav__activeColor--dark,
$nav__activeBGC--dark,
$nav__leftborder--dark,
);
}
@mixin set-nav-
background-color($color,$activeColor,$activeBGC,$leftborder){
.navMenus{
&__content__item{
&.menuSelected {
border-left-color: $leftborder;
}
&__href{
color:$color;
&:hover{
background-color: $activeBGC;
color: $activeColor;
}
}
&.menuSelected > a {
color: $activeColor;
}
}
&__dropDown{
&.menuExpanded{
background-color: $activeBGC;
}
&::after{
border-color: $leftborder transparent transparent transparent;
}
}
}
}
ElementUI 的实现
@TODO:
基于 CSS自定义变量 的实现
@TODO:
参考文章
聊一聊前端换肤 https://github.com/jyzwf/blog/issues/70