如何解决语言切换时暗黑模式被重置的问题？

问题根源 #

你当前的语言切换逻辑是直接替换body的整个className（比如document.body.className='en'），这会把之前添加的dark-mode类一起清空，导致切换语言时暗黑模式被重置。

修复方案 #

核心思路是：用classList的add()/remove()/toggle()来单独管理语言类，不要覆盖整个className，这样就能保留暗黑模式的类。

步骤1：修改语言切换按钮的点击事件

把原来直接赋值className的代码，改成只切换en和it类：

• 去掉按钮上的onclick="document.body.className='en'"这类代码
• 统一用事件监听处理语言切换，确保只操作语言相关的类

步骤2：优化语言切换逻辑

切换语言时，仅移除另一种语言的类，添加目标语言的类，完全保留其他类（比如dark-mode）

可选：添加本地存储（刷新页面也能保留状态）

如果需要刷新页面后仍保留语言和暗黑模式状态，可以用localStorage存储当前状态，页面加载时自动恢复。

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <style>
      body.en [lang='it'] {
        display: none;
      }
      body.it [lang='en'] {
        display: none;
      }
      body {
        padding: 25px;
        background-color: white;
        color: black;
        font-size: 25px;
        transition: background-color 0.3s, color 0.3s;
      }
      .dark-mode {
        background-color: black;
        color: white;
      }
    </style>
  </head>
  <body class="it">
    <p><span lang="en">English Content 1</span><span lang="it">Contenuto Italiano 1</span></p>
    <p><span lang="en">English Content 2</span><span lang="it">Contenuto Italiano 2</span></p>

    <button class="lang-btn" data-lang="en">English</button>
    <button class="lang-btn" data-lang="it">Italiano</button>
    <button id="dark-mode-btn">Toggle Dark Mode</button>

    <script>
      // 暗黑模式切换
      const darkModeBtn = document.getElementById('dark-mode-btn');
      darkModeBtn.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        // 可选：保存暗黑模式状态到本地存储
        localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
      });

      // 语言切换逻辑
      const langBtns = document.querySelectorAll('.lang-btn');
      langBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          const targetLang = btn.dataset.lang;
          // 移除另一种语言的类，添加目标语言的类
          document.body.classList.remove(targetLang === 'en' ? 'it' : 'en');
          document.body.classList.add(targetLang);
          // 可选：保存语言状态到本地存储
          localStorage.setItem('currentLang', targetLang);
        });
      });

      // 可选：页面加载时恢复保存的状态
      window.addEventListener('load', () => {
        // 恢复暗黑模式
        const savedDarkMode = localStorage.getItem('darkMode') === 'true';
        if (savedDarkMode) {
          document.body.classList.add('dark-mode');
        }
        // 恢复语言
        const savedLang = localStorage.getItem('currentLang') || 'it';
        document.body.classList.remove(savedLang === 'en' ? 'it' : 'en');
        document.body.classList.add(savedLang);
      });
    </script>
  </body>
</html>

关键改进点 #

• 语言切换时只操作en和it类，完全不影响dark-mode类
• 用data-lang属性统一管理语言按钮，代码更简洁可维护
• 可选添加本地存储，解决页面刷新后状态丢失的问题
• 给body添加过渡动画，切换模式时更流畅

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