如何用 Vue3 + Vite + SCSS 轻松实现换肤功能

<template>
  <div class="theme-container">
    <button @click="changeTheme('light')">Light Theme</button>
    <button @click="changeTheme('dark')">Dark Theme</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { usePreferDark } from '@vueuse/core';
 
const theme = ref('light');
const preferDark = usePreferDark();
 
const changeTheme = (newTheme) => {
  theme.value = newTheme;
};
 
// 如果用户偏好未知，则自动应用暗色主题
if (preferDark.value) {
  changeTheme('dark');
}
</script>
 
<style lang="scss">
:root {
  --primary-bg-color: #fff;
  --primary-text-color: #333;
}
 
.theme-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
 
  button {
    padding: 8px 16px;
    border: none;
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
    cursor: pointer;
  }
}
 
body.dark {
  --primary-bg-color: #333;
  --primary-text-color: #f8f8f2;
}
</style>

这个简单的示例展示了如何使用 Vue3、Vite 和 SCSS 来实现一个换肤功能。我们定义了两个按钮，允许用户在亮色和暗色主题之间切换。通过监听用户的偏好设置（如果可用），我们可以自动应用暗色主题。CSS 变量被用来动态更改页面的背景色和文本颜色，使得主题切换非常简单。