Vue中快速实现主题切换

主题切换实际上就是改变项目的主题色,所以我们从css 入手。 在使用到主题色的地方,就不能写固定值(譬如#fff)了,应该用css变量 替换固定值

原生的css是支持定义变量的,不像sass和less中定义的变量,它无需编译、支持继承和重叠

css变量写法如下:

js 复制代码
:root {
  --background-color: white; // 主题色
  --font-color: black; // 字体颜色
}

// 等同于上面
html {
  --background-color: white; // 主题色
  --font-color: black; // 字体颜色
}

:root,它是css中的一个伪类选择器,代表文档的根元素,等同于html,但是优先级比html高

定义好主题色的css变量后在需要的地方使用它

js 复制代码
<style>
#app {
  background: var(--background-color);
}
</style>

当切换主题时需要更新css变量的值,我们可以利用css样式优先级的特性来实现,在:root后定义如下样式

js 复制代码
:root {
  --background-color: white;
  --font-color: black;
}

/* [data-theme='dark']代表含有data-theme属性并且值为'dark'的标签。此处dark代表深色主题,默认:root浅色主题 */
[data-theme='dark'] {
  --background-color: black;
  --font-color: white;
}

接下来我们只需要在使用了主题色的标签或上级标签 中添加data-theme属性并动态更改它的值,就能实现主题切换。

完整代码如下

js 复制代码
<template>
  <div id="app" :data-theme="curTheme">
    <button class="btn" @click="ToggleTheme">切换主题</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      curTheme: 'light'
    }
  },
  methods: {
    ToggleTheme() {
      this.curTheme = this.curTheme === 'light' ? 'dark' : 'light'
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
:root {
  --background-color: white;
  --font-color: black;
}
[data-theme='dark'] {
  --background-color: black;
  --font-color: white;
}
.btn {
  width: 100px;
  height: 30px;
  background-color: var(--background-color);
  color: var(--font-color);
  border: 1px solid var(--font-color);
}
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: var(--background-color);
}
</style>
相关推荐
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding10 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景11 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘11 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)12 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中12 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi13 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X13 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123414 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js