CSS引入方式在多主题切换中的应用_不同主题样式切换实践

.theme-light {
  background-color: #fff;
  color: #000;
}

.theme-dark {
  background-color: #1a1a1a;
  color: #fff;
}

document.body.className = 'theme-dark'; // 切换为深色
document.body.className = 'theme-light'; // 切换为浅色
</font>
</p>
<p><strong>优点：</strong>简单直观，适合小型项目。<br>
<strong>缺点：</strong>样式分散，不利于大规模主题管理。</p>

<H3>2. 外部CSS文件按需加载</H3>
<p>为每个主题创建独立的CSS文件，如 <strong>light.css</strong> 和 <strong>dark.css</strong>，然后根据用户选择动态插入或替换link标签。</p>
<p>示例代码：</p>
<font face="Courier New">
<pre class="brush:php;toolbar:false;">
function loadTheme(theme) {
  let link = document.getElementById('theme-style') || document.createElement('link');
  link.id = 'theme-style';
  link.rel = 'stylesheet';
  link.href = `${theme}.css`;
  document.head.appendChild(link);
}

:root, .theme-light {
  --bg-color: #fff;
  --text-color: #000;
}

.theme-dark {
  --bg-color: #1a1a1a;
  --text-color: #fff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

document.documentElement.className = 'theme-dark';

const themes = {
  light: {
    background: '#fff',
    color: '#000'
  },
  dark: {
    background: '#1a1a1a',
    color: '#fff'
  }
};