点击按钮切换主题样式表时如何添加过渡效果？

主题切换添加过渡效果实现方案 #

直接切换<link>标签href的方式会导致样式瞬间替换，无过渡动画，可通过以下两种方案实现：

方案一：适配现有逻辑（保留切换外部样式表的写法） #

1. 在light-theme.css、dark-theme.css两个主题文件开头添加全局过渡规则：

* {
  /* 可自行调整过渡时长和缓动效果 */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

2. 新增公共CSS规则，避免页面首次加载触发不必要的过渡：

.disable-transition * {
  transition: none !important;
}

3. 修改JS代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const themeStylesheet = document.getElementById('theme');
  const themeToggle = document.getElementById('theme-toggley');
  const storedTheme = localStorage.getItem('theme');

  if (storedTheme) {
    document.body.classList.add('disable-transition');
    themeStylesheet.href = storedTheme;
    setTimeout(() => {
      document.body.classList.remove('disable-transition');
    }, 100);
  }

  themeToggle.addEventListener('click', () => {
    const newHref = themeStylesheet.href.includes('light') 
      ? 'css/dark-theme.css' 
      : 'css/light-theme.css';
    themeToggle.textContent = themeStylesheet.href.includes('light') ? 'Dark' : 'Light';
    
    // 预加载样式表避免切换时出现空白
    const preloadLink = document.createElement('link');
    preloadLink.rel = 'preload';
    preloadLink.as = 'style';
    preloadLink.href = newHref;
    preloadLink.onload = () => {
      themeStylesheet.href = newHref;
      localStorage.setItem('theme', newHref);
    };
    document.head.appendChild(preloadLink);
  });
});

方案二：CSS变量实现（更推荐，性能更高、过渡更丝滑） #

无需拆分两个独立主题CSS文件，通过切换根类名控制主题变量：

1. 公共CSS文件定义主题变量和过渡规则：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  /* 其余浅色主题相关变量 */
}
:root.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  /* 其余深色主题相关变量 */
}
* {
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: var(--bg-color);
  color: var(--text-color);
  /* 其余全局样式统一引用变量即可 */
}

2. 修改JS代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const themeToggle = document.getElementById('theme-toggley');
  const storedTheme = localStorage.getItem('theme');

  if (storedTheme === 'dark') {
    document.documentElement.classList.add('dark-theme');
    themeToggle.textContent = 'Dark';
  }

  themeToggle.addEventListener('click', () => {
    const isDark = document.documentElement.classList.toggle('dark-theme');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    themeToggle.textContent = isDark ? 'Dark' : 'Light';
  });
});

3. HTML部分调整为仅引入公共CSS文件即可：

<link rel="stylesheet" type="text/css" href="css/common.css" />
<button id="theme-toggley">Light</button>

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