css变量实现页面换肤

逆风优雅

已于 2022-06-13 19:10:49 修改

阅读量649

点赞数

分类专栏： CSS 文章标签：前端

于 2022-04-08 13:13:32 首次发布

本文链接：https://blog.csdn.net/qq_44603011/article/details/124038979

版权

CSS 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

方案一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: var(--bgc,black); /*背景颜色,第二个参数是默认值*/
            color: var(--col,white);/*文字颜色，第二个参数是默认值*/
        }
    </style>
</head>
<body>

    <div class="toolbar">
        <button value="dark">dark</button>
        <button value="calm">calm</button>
        <button value="light">light</button>
    </div>
    <h2>hello world</h2>
            to see if some particular variable is available before calling an init() or whatever function.
</body>
    <script>
        var body = document.querySelector('body')  // 获取body元素
        console.log(body);
        var colorBtn = document.querySelectorAll(".toolbar > button") // 获取dom元素
        colorBtn.forEach(item=>{ // 编辑dom元素，给每个元素注册点击事件
            item.addEventListener('click',handleThemeChange)
        })
        function handleThemeChange(e){
            switch (e.target.value) {
                // setProperty用于修改css变量的值
                case 'dark':
                    body.style.setProperty('--bgc','black')
                    body.style.setProperty('--col','#fff')
                    break;
                case 'calm':
                    body.style.setProperty('--bgc','pink')
                    body.style.setProperty('--col','skyblue')
                    break
                case 'light':
                    body.style.setProperty('--bgc','#fff')
                    body.style.setProperty('--col','#000')
                    break
            }
        }
    </script>
</html>

效果如下：

方案二：（该方案为：提前布置好两套css,一套暗色，一套亮色，然后通过setAttribute控制展示哪个css，个人感觉这套方案比较好）

<template>
  <div class="hello">
    <button type="text" @click="black"> 暗黑</button>
    <button @click="light">亮色</button>
    <div class="img"></div>
    <span class="abc">66666666666666666666666666666666666666666666666</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
     black(){ //点击暗黑时 样式
      document.body.setAttribute('theme','dark')
      document.querySelector('.abc').setAttribute('myColor','light')
       document.querySelector('.img').setAttribute('theme','dark')

    },
    light(){ //点击亮色时 样式
      document.body.setAttribute('theme','light')
      document.querySelector('.img').setAttribute('theme','light')
      document.querySelector('.abc').setAttribute('myColor','dark')
    },
  },
  }
</script>
<style scoped lang="less">
@import '@/assets/css/default.css';
.img{
  width: 50px;
  height: 50px;
  background:var(--img-1) ;
}
.hello{
  background: var(--bgc-color-1);
}
.abc{
  color: var(--color-1);
}
.content{
  display: flex;
  justify-content: center;
}
</style>

其中引入的css为：

body[theme=light]{
    --bgc-color-1:#ccc;
    --img-1:url('@/assets/cwnb_02.png')
}
body[theme=dark]{
    --bgc-color-1:#000;
    --img-1:url('@/assets/fzqs_up.png')
}
.abc[myColor=light]{
    --color-1:red
}
.abc[myColor=dark]{
    --color-1:pink
}

效果如下：