一文读懂vue+scss实现主题换肤功能
warning:
这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。
<template>
<div id="app">
<button @click="changeTheme('dark')">Dark Theme</button>
<button @click="changeTheme('light')">Light Theme</button>
</div>
</template>
<script>
export default {
methods: {
changeTheme(theme) {
document.body.className = theme;
}
}
}
</script>
<style lang="scss">
body {
&.dark {
background-color: #333;
color: #fff;
}
&.light {
background-color: #fff;
color: #333;
}
}
</style>这个简单的Vue应用程序演示了如何使用SCSS来定义不同主题的颜色，并通过点击按钮来切换页面的主题。通过改变body元素的class，我们可以应用对应主题的样式。这是一个实现换肤功能的简单例子，适合作为学习如何在Vue项目中使用SCSS和JavaScript来改变应用主题的教程。
评论已关闭