Vue3 + Scss 实现主题切换效果
在现代的Web应用程序中,主题切换是一种常见的需求。本文将介绍如何使用Vue 3和Scss实现主题切换效果。
先给大家看一下主题切换的效果:
像这样的效果实现起来并不难,只是比较麻烦,目前我知道的有两种方式可以实现,分别是 CSS
变量、样式文件切换,下面是该效果的核心实现方法
CSS变量
给需要变化的样式设置 css
变量,然后可以通过 js
的 document.documentElement.style.setProperty
方法来修改 css
变量的值,从而实现主题切换的效果
<script setup lang="ts">
import {
ref } from 'vue';
const $css = document.documentElement.style
const is = ref<boolean>(false)
const btn = () => {
is.value = !is.value
is.value ? $css.setProperty("--color", "#000") : $css.setProperty("--color", "#fff")
}
</script>
<template>
<div class="box"></div>
<button @click="btn">按钮</button>
</template>
<style lang="scss">