Flashing Issue When Switching Tabs in Dark Mode: How to Solve this Problem?

I’m encountering a flashing problem randomly when switching between tabs in dark mode on my Tauri web app. The flash might be caused by the browser rendering or the operating system’s handling of tab switching. I suspect that the JavaScript code responsible for toggling between dark and light modes might be contributing to this issue. Secondly, the sidebar unexpectedly closes and opens again, during this weird bug.

Here’s an overview of the relevant Javascript:

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');

// Check if dark mode preference is stored in localStorage
const isDarkMode = localStorage.getItem('darkMode') === 'true';
// Check if sidebar preference is stored in localStorage
const isSidebarClosed = localStorage.getItem('sidebarClosed') === 'true';

// Set initial state based on stored preferences
if (isDarkMode) {
  body.classList.add('dark');
  modeText.innerText = 'Light mode';
} else {
  body.classList.remove('dark');
  modeText.innerText = 'Dark mode';
}

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

toggle.addEventListener('click', () => {
  sidebar.classList.toggle('close');
  // Store sidebar state in localStorage
  const isClosed = sidebar.classList.contains('close');
  localStorage.setItem('sidebarClosed', isClosed);
});

modeSwitch.addEventListener('click', () => {
  body.classList.toggle('dark');
  // Store dark mode state in localStorage
  const isDark = body.classList.contains('dark');
  localStorage.setItem('darkMode', isDark);

  if (isDark) {
    modeText.innerText = 'Light mode';
  } else {
    modeText.innerText = 'Dark mode';
  }
});

// Add the 'dark' class to the body element if dark mode preference is stored
if (isDarkMode) {
  body.classList.add('dark');
}

I would like to know if there’s a way to modify the JavaScript code or make any necessary adjustments to the CSS to mitigate the flashing issue and to ensure that the sidebar remains in its current state without closing and reopening. I want to ensure a smooth transition between tabs when in dark mode. Any insights or suggestions would be greatly appreciated and if you need any additional information or further clarification, please don’t hesitate to ask. Thank you!