fix: theme switcher toggling incorrectly (#553)

Timothée Andres

19.07.2025 3683a0f2b6a0750f858afd4dd3e65bb9caf3ef5b

fix: theme switcher toggling incorrectly (#553)

Currently, when the theme is set to be either light or dark, and the browser's option is changed, it results in the theme being inverted with what is wanted (i.e. setting light theme results in dark theme, and vice versa).
With this change, the theme switcher works as expected.

 assets/js/anatole-theme-switcher.js

@@ -1,29 +1,33 @@
const getStoredThemeStyle = () => localStorage.getItem('theme');

const setThemeClass = (style) => {
const setThemeStyle = (style) => {
  localStorage.setItem('theme', style);
  const html = document.documentElement;
  const prevTheme = [...html.classList].find((c) => c.match(/theme--(light|dark)/));
  if (!prevTheme) return;
  html.classList.remove(prevTheme);
  if (prevTheme) {
    html.classList.remove(prevTheme);
  }
  html.classList.add(`theme--${style}`);
};

const setThemeStyle = (style) => {
  localStorage.setItem('theme', style);
  setThemeClass(style);
const setDarkTheme = () => {
  setThemeStyle('dark');
};
const setLightTheme = () => {
  setThemeStyle('light');
};

const switchTheme = () => {
  const currThemeStyle = getStoredThemeStyle();
  switch (currThemeStyle) {
    case 'light':
      setThemeStyle('dark');
      setDarkTheme();
      break;
    case 'dark':
      setThemeStyle('light');
      setLightTheme();
      break;
    default:
      setThemeStyle('light');
      setLightTheme();
      break;
  }
};
@@ -37,14 +41,15 @@
  false,
);

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => (e.matches ? setDarkTheme() : setLightTheme()), false);

const currThemeStyle = getStoredThemeStyle();
if (currThemeStyle) {
  setThemeStyle(currThemeStyle);
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  setDarkTheme();
} else {
  const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  if (userPrefersDark) {
    setThemeStyle('dark');
  }
  setLightTheme();
}