Vite项目深色主题实现抉择：改主题逻辑还是输出双CSS文件？

一、优先推荐：改主题实现逻辑（不用双CSS文件） #

这是当前前端主题切换的主流玩法，核心靠**CSS自定义属性（CSS变量）**配合类切换实现，无需再维护两套独立CSS文件：

1. 重构Sass代码，将两套主题的差异值定义为CSS变量：

   // 浅色主题默认变量
   :root {
     --text-color: #333;
     --bg-color: #fff;
     --border-color: #eee;
   }
   // 深色主题重写变量
   .dark-theme {
     --text-color: #fff;
     --bg-color: #1a1a1a;
     --border-color: #333;
   }
   // 业务样式统一使用变量
   .container {
     color: var(--text-color);
     background-color: var(--bg-color);
     border: 1px solid var(--border-color);
   }
   

2. 主题切换逻辑简化为给根元素（如<html>）添加/移除类：

   // 切换深色主题
   function toggleDarkTheme() {
     document.documentElement.classList.toggle('dark-theme');
     // 存储用户主题偏好到本地
     localStorage.setItem('theme', document.documentElement.classList.contains('dark-theme') ? 'dark' : 'light');
   }
   

3. 还能自动适配系统主题偏好：

   // 页面加载时根据本地存储或系统偏好设置主题
   const savedTheme = localStorage.getItem('theme');
   const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
   if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
     document.documentElement.classList.add('dark-theme');
   }
   

优势：

• 无需维护两套样式文件，新增样式只需写一次，降低出错概率
• 主题切换无网络请求，瞬间生效，不会出现样式闪烁
• 兼容性覆盖绝大多数现代浏览器（IE除外），符合前端最佳实践

二、备选方案：配置Vite输出两个CSS文件 #

如果项目规模大、重构样式成本过高，可以通过Vite多入口配置生成两套CSS文件，沿用原有切换逻辑：

具体配置修改 #

在vite.config.js中添加Rollup多入口配置，将两套主题样式设为独立入口：

import { defineConfig } from "vite";
export default defineConfig({
    root: "src",
    assetsInclude: ["./assets/**/*.*"],
    build: {
        sourcemap: true,
        manifest: true,
        cssCodeSplit: true,
        emptyOutDir: true,
        outDir: "../dist",
        // 新增Rollup多入口配置
        rollupOptions: {
            input: {
                main: './src/main.js', // 主业务入口
                lightTheme: './src/styles/light-theme.scss', // 浅色主题样式路径
                darkTheme: './src/styles/dark-theme.scss' // 深色主题样式路径
            }
        }
    }
})

打包后dist目录会生成lightTheme.css和darkTheme.css，继续使用原有切换逻辑即可（如动态修改<link>标签的href）：

function switchTheme(isDark) {
    const themeLink = document.getElementById('theme-link');
    themeLink.href = isDark ? '/dist/darkTheme.css' : '/dist/lightTheme.css';
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

注意事项：

• 避免两套主题样式出现重复基础代码，防止加载冲突
• 切换时需加载新CSS文件，可能出现短暂样式闪烁，可通过过渡动画或预加载缓解
• 后续维护需同步修改两套样式文件，容易出现遗漏，长期成本较高

方案选择建议 #

• 若项目处于迭代初期或重构成本低，优先选择CSS变量方案，长期维护更省心，用户体验更好
• 若项目已稳定、重构风险高，可先用双CSS文件作为过渡方案，后续逐步重构为变量模式

内容的提问来源于stack exchange，提问作者Stevo Es