vue实现一键换肤效果（白天晚上模式切换）_黑天白夜灯切换vue

1、创建src/assets/style/_themes.css

2、将themes.css在main.js全局引入

 

 3、在_themes.css定义主题  （可以自行定义更多的主题）

:root[theme='light']{  /*白天主题*/
    --bgColor:#fff;  /*白天大的背景颜色*/ 
    --textColor:#000;  /*白天文本颜色*/ 
    --titleColor:blue;  /*白天标题颜色*/ 
} 
 
:root[theme='dark']{   /*晚上主题*/
    --bgColor:#000;   /*晚上大的背景颜色*/
    --textColor:#fff;  /*晚上文本颜色*/
    --titleColor:yellow;  /*晚上标题颜色*/ 
}

4、在组件中使用主题颜色

5、根据条件来切换主题（我这里是定义了两个按钮进行主题的切换）

6、每次切换以后将当前主题名称保存至本地  避免下次打开页面主题丢失  初次加载的时候设置一个默认主题

 7、看看效果吧

8、完整代码

_themes.css

:root[theme='light']{  /*白天主题*/
    --bgColor:#fff;  /*白天大的背景颜色*/ 
    --textColor:#000;  /*白天文本颜色*/ 
    --titleColor:blue;  /*白天标题颜色*/ 
} 
 
:root[theme='dark']{   /*晚上主题*/
    --bgColor:#000;   /*晚上大的背景颜色*/
    --textColor:#fff;  /*晚上文本颜色*/
    --titleColor:yellow;  /*晚上标题颜色*/ 
}

 组件中使用

<template>
  <div class="daytime">
    <div class="btn"
      @click="changeLight">点击切换白天主题</div>
    <div class="btn"
      @click="changeDark">点击切换晚上主题</div>
    <div class="poetry">
      <h1>沁园春·雪</h1>
      <p>北国风光，千里冰封，万里雪飘。</p>
      <p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>
      <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
      <p>须晴日，看红装素裹，分外妖娆。</p>
      <p>江山如此多娇，引无数英雄竞折腰。</p>
      <p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
      <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
      <p>俱往矣，数风流人物，还看今朝。</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  created() {
    let theme = localStorage.getItem('theme') ? JSON.parse(localStorage.getItem('theme')) : 'light'
    document.documentElement.setAttribute('theme', theme)
  },
  computed: {},
  methods: {
    changeLight() {
      document.documentElement.setAttribute('theme', 'light')
      localStorage.setItem('theme', JSON.stringify('light'))
    },
    changeDark() {
      document.documentElement.setAttribute('theme', 'dark')
      localStorage.setItem('theme', JSON.stringify('dark'))
    }
  }
}
</script>
<style lang="scss" scoped>
.daytime {
  width: 100%;
  height: 1000px;
  background-color: var(--bgColor);
  .btn {
    color: red;
    width: 200px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
  .poetry {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    h1 {
      color: var(--titleColor);
    }
    p {
      color: var(--textColor);
    }
  }
}
</style>