前端实现多主题

文章发布于2020年08月02日 16:20, 归类于: 前端

前端实现多主题,实现思路:

  • 定义好主题,在主题下按属性分类定义css属性。各个主题下都需要定义相同名称的属性,属性值可以不相同。
  • 使用css预处理,封装方法,设置某个css的类时,以主题类名作为此类的父类。
  • 在body上添加主题类名,切换主题时切换body的类名。

定义与封装

这里使用scss做css的预处理。

$themeList: (
  "daytime-theme": (
    // 主要颜色
      "primary-color": #ffffff,
    // 主要颜色-暗
      "primary-color-dark": #f8f8f8
  ),
  "night-theme": (
    // 主要颜色
      "primary-color": #2d2e36,
    // 主要颜色-暗
      "primary-color-dark": #23242b
  )
);

// $property:css属性名称,$name:对象元素的key
@mixin setThemes($property, $name) {
  @each $key, $value in $themeList {
    .#{$key} & {
      #{$property}: map-get($value, $name);
    }
  }
}

使用

.eo-bg {
  @include setThemes("background", "primary-color");
}

结果

.daytime-theme .eo-bg {
  background: #ffffff;
}

.night-theme .eo-bg {
  background: #2d2e36;
}

安装主题

<body class="daytime-theme"></div>

转载请注明来源:《 前端实现多主题》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1596356438.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:web性能优化,使用preload和prefetch预加载资源 下一篇:同域名不同目录路径下的cookie无法修改解决方法