Tauri应用暗黑模式切换标签页闪屏及Sidebar异常问题解决咨询

一、修复Sidebar意外关闭再打开的问题 #

你的代码存在重复设置暗黑模式类的冗余逻辑：初始化阶段已经根据isDarkMode给body添加/移除dark类，但代码末尾又重复执行了一次if (isDarkMode) { body.classList.add('dark'); }，这会导致样式反复触发，间接引发sidebar状态异常。同时要确保sidebar的状态初始化逻辑只执行一次，避免重复操作DOM。

修改点：

• 删除代码末尾重复的暗黑模式类添加逻辑
• 保证sidebar状态初始化仅在页面加载时执行一次

二、缓解暗黑模式切换标签页闪屏问题 #

闪屏多因webview标签切换时样式切换不及时、无过渡动画导致，可从以下几点优化：

1. 提前注入暗黑模式状态（避免JS加载延迟闪屏） #

不要等JavaScript执行完毕再设置样式，在<head>中提前通过内联脚本设置初始状态，让页面渲染时直接应用对应模式：

<head>
  <script>
    // 优先在HTML渲染前设置根元素类
    document.documentElement.classList.toggle('dark', localStorage.getItem('darkMode') === 'true');
  </script>
  <!-- 其他head内容 -->
</head>

2. 添加CSS过渡动画（平滑样式切换） #

给body和sidebar的核心样式添加过渡动画，避免突然切换引发的视觉闪屏：

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

nav {
  transition: width 0.3s ease, transform 0.3s ease;
}

3. 优化JavaScript逻辑（精简DOM操作） #

修改后的完整代码：

const body = document.querySelector('body');
const sidebar = body.querySelector('nav');
const toggle = body.querySelector('.toggle');
const modeSwitch = body.querySelector('.toggle-switch');
const modeText = body.querySelector('.mode-text');

// 读取本地存储的偏好设置
const isDarkMode = localStorage.getItem('darkMode') === 'true';
const isSidebarClosed = localStorage.getItem('sidebarClosed') === 'true';

// 初始化状态（仅执行一次）
if (isDarkMode) {
  body.classList.add('dark');
  modeText.textContent = 'Light mode';
} else {
  body.classList.remove('dark');
  modeText.textContent = 'Dark mode';
}

if (isSidebarClosed) {
  sidebar.classList.add('close');
} else {
  sidebar.classList.remove('close');
}

// 侧边栏切换事件
toggle.addEventListener('click', () => {
  sidebar.classList.toggle('close');
  localStorage.setItem('sidebarClosed', sidebar.classList.contains('close'));
});

// 暗黑模式切换事件
modeSwitch.addEventListener('click', () => {
  const isDark = body.classList.toggle('dark');
  localStorage.setItem('darkMode', isDark);
  modeText.textContent = isDark ? 'Light mode' : 'Dark mode';
});

4. Tauri专属优化（提升渲染性能） #

在tauri.conf.json中启用硬件加速，减少webview渲染卡顿：

{
  "tauri": {
    "windows": [
      {
        "webview": {
          "hardwareAcceleration": true
        }
      }
    ]
  }
}

三、效果验证 #

修改完成后：

• Sidebar会严格保留本地存储的状态，不会出现关闭后自动重新打开的异常
• 暗黑模式切换及标签页切换时，样式过渡更平滑，闪屏问题会大幅缓解

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