Vue3 + 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">
$color: var(--color, #fff);
.box {
width: 200px;
height: 200px;
background-color: $color;
transition: all 0.3s;
}
</style>
该方式适合应用于简单的切换场景,如果页面比较复杂,使用该方式会导致使用大量的 css
变量,而且写法也会很麻烦
这时候推荐使用下面这种方式
样式文件切换
该方式核心思想就是定义两套样式,通过 js
控制两套样式的切换从而实现该效果
动态加载局部样式
// light.scss
.container{
background-color: #fff;
}
// dark.scss
.container{
background-color: #000;
}
- 然后在
App.vue
中引入
<script setup lang="ts">
import Theme from '@/view/Theme.vue'
</script>
<template>
<Theme />
</template>
<style lang="scss">
.light {
@import "@/styles/light.scss";
}
.dark {
@import "@/styles/dark.scss";
}
</style>
<script setup lang="ts">
import { ref } from 'vue';
const is = ref(false)
</script>
<template>
<div :class="is ? 'light' : 'dark'">
<div class="container"></div>
</div>
<button @click="is = !is">切换主题</button>
</template>
<style scoped lang="scss">
.container {
width: 300px;
height: 300px;
transition: all 0.3s;
}
</style>
修改link标签样式路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<!-- 在这里先定义一个默认的样式 -->
<link rel="stylesheet" href="./src/styles/light.scss" title="light">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
<script setup lang="ts">
import { ref } from 'vue';
// 获取link标签
const links = document.querySelectorAll("link")
const is = ref<boolean>(false)
const btn = () => {
is.value = !is.value
// 目前只有两个link标签,所以这里直接写死,只展示核心代码
is.value ? links[1].href = "./src/styles/dark.scss" : links[1].href = "./src/styles/light.scss"
}
</script>
<template>
<div class="container"></div>
<button @click="btn">按钮</button>
</template>
<style scoped lang="scss">
.container {
width: 300px;
height: 300px;
transition: all 0.3s;
}
</style>
原文地址:https://blog.csdn.net/haodian666/article/details/134639288
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_2027.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。