如何通过Vite与Lit实现全站CSS动态修改及明暗主题切换

针对Vite+Lit的场景，推荐以下几种方案，按需选择：

一、CSS自定义属性（变量）+ 根元素属性切换（最推荐） #

这是目前最主流的主题切换方案，性能优异且实现简单，通过全局变量统一控制样式，切换时只需修改根元素的属性即可。

实现步骤： #

1. 定义全局主题变量
   创建全局样式文件（如src/global.css），用:root[data-theme]区分不同主题的变量值：

   :root[data-theme="light"] {
     --bg-primary: #ffffff;
     --text-primary: #2d3748;
     --border-color: #e2e8f0;
   }
   
   :root[data-theme="dark"] {
     --bg-primary: #1a202c;
     --text-primary: #f7fafc;
     --border-color: #4a5568;
   }
   
   /* 全局样式应用变量 */
   body {
     margin: 0;
     padding: 0;
     background-color: var(--bg-primary);
     color: var(--text-primary);
     transition: all 0.3s ease;
   }
   

   在Vite入口文件（如src/main.js）导入该全局样式：

   import './global.css';
   

2. Lit组件中使用变量
   组件内直接通过var(--变量名)引用全局主题变量：

   import { LitElement, html, css } from 'lit';
   
   class UserCard extends LitElement {
     static styles = css`
       .card {
         padding: 1.5rem;
         border: 1px solid var(--border-color);
         border-radius: 8px;
         background-color: var(--bg-primary);
       }
     `;
   
     render() {
       return html`
         <div class="card">
           <h3>用户卡片</h3>
           <p>这是使用全局主题变量的组件</p>
         </div>
       `;
     }
   }
   customElements.define('user-card', UserCard);
   

3. 编写主题切换逻辑
   通过修改根元素的data-theme属性切换主题，同时可保存到localStorage实现持久化：

   // 切换主题函数
   function toggleTheme() {
     const root = document.documentElement;
     const currentTheme = root.getAttribute('data-theme') || 'light';
     const newTheme = currentTheme === 'light' ? 'dark' : 'light';
     root.setAttribute('data-theme', newTheme);
     localStorage.setItem('active-theme', newTheme);
   }
   
   // 初始化主题
   const savedTheme = localStorage.getItem('active-theme') || 'light';
   document.documentElement.setAttribute('data-theme', savedTheme);
   
   // 绑定切换按钮事件
   document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
   

二、动态加载主题CSS文件（适合样式差异极大的场景） #

如果不同主题的样式差异巨大，无法通过变量覆盖实现，可以用动态import()加载对应主题的CSS文件，同时管理已加载的样式避免重复。

实现步骤： #

1. 创建独立主题文件
   在src/themes/下创建light.css和dark.css，分别写入对应主题的全局样式：

   /* src/themes/light.css */
   body {
     background: #fff;
     color: #2d3748;
   }
   .card {
     background: #f7fafc;
     border-color: #e2e8f0;
   }
   

   /* src/themes/dark.css */
   body {
     background: #1a202c;
     color: #f7fafc;
   }
   .card {
     background: #2d3748;
     border-color: #4a5568;
   }
   

2. 动态加载与管理样式
   使用Vite的?inline后缀获取CSS文本，手动创建并管理style元素：

   let activeThemeStyle = null;
   
   async function loadTheme(theme) {
     // 移除当前主题的样式元素
     if (activeThemeStyle) {
       activeThemeStyle.remove();
     }
   
     // 动态导入主题CSS（?inline让Vite返回CSS文本而非自动注入）
     const module = await import(`./themes/${theme}.css?inline`);
     const styleEl = document.createElement('style');
     styleEl.textContent = module.default;
     document.head.appendChild(styleEl);
     activeThemeStyle = styleEl;
   
     // 保存主题状态
     localStorage.setItem('active-theme', theme);
   }
   
   // 初始化加载主题
   const savedTheme = localStorage.getItem('active-theme') || 'light';
   loadTheme(savedTheme);
   
   // 绑定切换事件
   document.getElementById('theme-toggle').addEventListener('click', async () => {
     const currentTheme = localStorage.getItem('active-theme') || 'light';
     await loadTheme(currentTheme === 'light' ? 'dark' : 'light');
   });
   

三、Lit上下文+ThemeProvider（适合大型应用） #

如果应用组件层级复杂，需要统一管理主题状态，可以用Lit的上下文API创建ThemeProvider，让子组件自动感知主题变化。

核心代码示例： #

// src/ThemeProvider.js
import { LitElement, html, provide } from 'lit';
import { createContext, consume } from '@lit/context';

// 创建主题上下文
const themeContext = createContext('app-theme');

export class ThemeProvider extends LitElement {
  static properties = {
    theme: { type: String },
  };

  constructor() {
    super();
    this.theme = localStorage.getItem('active-theme') || 'light';
    this.syncThemeToRoot();
  }

  syncThemeToRoot() {
    document.documentElement.setAttribute('data-theme', this.theme);
  }

  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
    this.syncThemeToRoot();
    localStorage.setItem('active-theme', this.theme);
  }

  render() {
    // 向子组件提供主题上下文
    provide(themeContext, this.theme);
    return html`
      <slot></slot>
      <button @click=${this.toggleTheme}>切换主题</button>
    `;
  }
}
customElements.define('theme-provider', ThemeProvider);

// 子组件中消费上下文
import { LitElement, html, css } from 'lit';
import { consume } from '@lit/context';
import { themeContext } from './ThemeProvider.js';

export class ProfileCard extends LitElement {
  @consume({ context: themeContext })
  theme;

  static styles = css`
    .card {
      padding: 1rem;
      background: var(--bg-primary);
      color: var(--text-primary);
    }
  `;

  render() {
    return html`
      <div class="card">
        <p>当前主题：${this.theme}</p>
      </div>
    `;
  }
}
customElements.define('profile-card', ProfileCard);

使用方式： #

在入口HTML中用theme-provider包裹整个应用：

<theme-provider>
  <profile-card></profile-card>
</theme-provider>

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