vue3+vite的前端项目，怎样实现切换整个系统的样式风格

在 Vue3 和 Vite 的前端项目中，要实现实现整个系统的样式风格切换，你可以采用以下步骤：

1. **预设主题**：
- 创建一个包含不同主题的 CSS 文件，例如 `light-theme.css`, `dark-theme.css` 等。
- 在这些文件中，分别定义对应的主题样式。

2. **状态管理**：
- 使用 Vuex 或者 Vue 自带的响应式实例（如 `ref`）来管理当前选中的主题状态。可以创建一个变量来存储主题，比如 `themeMode`。

3. **CSS 按需引入**：
- 使用 Vite 的动态导入特性 (`import()` 动态加载），在需要的地方引入对应的主题 CSS。在组件内，你可以这样操作：

     import({ default as lightStyles } from '@/styles/light-theme.css');
     import({ default as darkStyles } from '@/styles/dark-theme.css');

     const currentTheme = ref('light'); // 或者 'dark'
     computed: {
       activeStyles() {
         return currentTheme.value === 'light' ? lightStyles : darkStyles;
       },
     },
     mounted() {
       this.$watch(currentTheme, () => {
         document.head.replaceChild(
           this.activeStyles(),
           document.querySelector(`link[href*="${currentTheme.value}"]`)
         );
       });
     },
     methods: {
       toggleTheme() {
         currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
       },
     },

这段代码会根据 `currentTheme` 的值，在页面加载时动态插入对应的 CSS 样式，并在主题切换时更新。

4. **全局样式应用**：
- 如果你想在所有组件都生效，可以在 `vite.config.js` 或者 `main.js` 中，通过 `<style>` 标签引用动态引入的 CSS。

5. **UI 组件化支持**：
- 对于需要响应主题变化的 UI 组件，提供一个 props 来接收当前的主题状态，以便它们可以根据当前主题显示相应的样式。

**相关问题--:**
1. 怎么样才能保证切换过程的平滑过渡？
2. 如果不想每次都刷新页面，有没有其他方式实时更新样式？
3. 如果用户手动修改了浏览器的夜间模式设置，如何保持系统样式的一致性？