说起换肤功能，前端肯定不陌生，其实就是颜色值的更换，实现方式有很多，也各有优缺点

一、可供选择的换肤

对于只提供几种主题方案,让用户来选择的,一般就简单粗暴的写多套主题

  • 一个全局class控制样式切换,直接更改全局class
<body class='dark'></body>
  • 使用js去修改 link 的 href
<link id='link_theme'  href="skin.css" rel="stylesheet" type="text/css"/>

<script>

    document.getElementById('link_theme').href='skin-dark.css'

</script>

二、动态色值换肤的实现

  • 全局替换颜色值

可以参看 Element-UI 的换肤实现,就是先把样式中颜色全部替换后在塞到<style>标签里面

  • 使用 less 的 modifyVars 动态修改

modifyVars方法是是基于 less 在浏览器中的编译来实现。所以在引入less文件的时候需要通过link方式引入，然后基于less.js中的方法来进行修改变量

// styles.less

@color: red;

.card {

    color: @color;

}


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet/less" type="text/css" href="styles.less" />

    <script src="//cdn.jsdelivr.net/npm/less"></script>

</head>

<body>

    <div class="card">

        card

    </div>

    <button id="themeBtn">更改颜色</button>

</body>

<script>

    document.getElementById("themeBtn").addEventListener('click', function () {

        let color = '#' + Math.floor(Math.random() * 256 * 1000000000).toString(16).slice(0, 6)

        less.modifyVars({

            '@color': color

        }).then(() => {

            console.log(`color: ${color}F`);

        });

    })

</script>
  • css 变量(var)

css 原生变量 兼容性,大部分主流浏览器还是支持的，而且主要是操作起来够简便。

定义变量

// 加上前缀 -- 就可以了

:root{

    --color:red;

}

//使用 当--color 不生效的时候会使用后面参数替代

body:{

    color:var(--color,#000)

}

使用 js 去修改

// 获取根

let root = document.documentElement;

root.style.setProperty('--color', '#f00');

三、总结

如果需要动态替换颜色主题,使用第二种比较合适也方便.如果每套主题有很大差异性不仅仅只是颜色的替换,第一种的方式就好了很多,使用第二种就不太合适了.如果都需要满足也可以两种相结合使用

css 实现换肤几种方式的更多相关文章

  1. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  2. css清除浮动的两种方式（clearfix和clear）

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  3. css清除浮动的几种方式，哪种最合适？

    细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...

  4. CSS颜色表示的几种方式

    在CSS中颜色有很多表示方式,今天列出一些常见的颜色表示方式及它们的用法. ①color:blue;  第一种,调用颜色属性,将颜色的英文输入在冒号后,以分号结束. 这种方法直接了当,但是能表示的颜色 ...

  5. HTML/css清除浮动的几种方式

    浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...

  6. 关于css垂直水平居中的几种方式

    css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...

  7. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  8. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

  9. css清除浮动的3种方式

    前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...

随机推荐

  1. 超好用的UnixLinux 命令技巧 大神为你详细解读

    1.删除一个大文件 我在生产服务器上有一个很大的200GB的日志文件需要删除.我的rm和ls命令已经崩溃,我担心这是由于巨大的磁盘IO造成的,要删除这个大文件,输入: > /path/to/fi ...

  2. MeteoInfoLab脚本示例：格点数据散点图

    绘制格点数据的散点图,用scaterm函数. 脚本程序: f = addfile('D:/Temp/GrADS/model.ctl') ps = f['PS'][0,(10,60),(60,140)] ...

  3. Java中字符串相关操作（判断，增删，转换）

    1:判断字符串中是否包含某个字符(字符串): startsWith(): 这个方法有两个变体并测试如果一个字符串开头的指定索引指定的前缀或在默认情况下从字符串开始位置 此方法定义的语法如下: publ ...

  4. day58 Pyhton 框架Django 01

    内容回顾 python基础    网路编程    并发编程    数据库    前端     osi7层           tcp/ip 5层模型    应用层    表示层             ...

  5. python中jsonpath模块运用

    原文链接:https://www.cnblogs.com/denise1108/p/10265911.html 1. jsonpath介绍用来解析多层嵌套的json数据;JsonPath 是一种信息抽 ...

  6. CTSC2010

    星际旅行 https://www.luogu.com.cn/problem/P4189 题目:且每个星球的\(H_i\)大于等于与该星球直接相连的星球数(即度数). 想到先从根到所有点都走一遍,然后贪 ...

  7. docker 启动redis/nginx

    1.docker 启动redis   # redis docker run -itd --name redis-test -p 16379:6379 redis   2.docker 启动nginx ...

  8. centos8平台用redis-cli对redis5监控和管理

    一,监控redis-server上正在执行的命令 1,打开a终端: [root@yjweb log]# /usr/local/soft/redis5/bin/redis-cli -h 127.0.0. ...

  9. Linux系统及第三方应用官方文档

    通过在线文档获取帮助 http://www.github.com https://www.kernel.org/doc/html/latest/ http://httpd.apache.org htt ...

  10. Java 中的 3 个双引号是什么语法？Java 15 刷新你的认知！

    Java 中的 3 个双引号 """ 是什么语法? 这是 Java 15 新出的,刷新你的认知! 一.前言 在 Java 15 的推出的时候,Text Blocks 正式 ...