@ussebastian/kitdigital/src/js/components/utils/autosetDarkmode.js

Kit Digital de la Universidad San Sebastián

export default () => {
  const setDarkmodeToLight = () => {
    document.documentElement.classList.remove('dark');
    localStorage.theme = 'light';
  };

  const setDarkmodeToDark = () => {
    document.documentElement.classList.add('dark');
    localStorage.theme = 'dark';
  };

  const toggleTheme = () => {
    if (
      window.preventThemeToggle && (window.preventThemeToggle === true || window.preventThemeToggle === 'true')
    ) {
      return;
    }
    if (localStorage.theme === 'dark') {
      setDarkmodeToLight();
    } else {
      setDarkmodeToDark();
    }
    window.parent.postMessage(
      {
        type: 'toggleTheme',
        theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
      },
      '*',
    );
  };

  if (
    localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
  ) {
    setDarkmodeToDark();
  } else {
    setDarkmodeToLight();
  }

  document.addEventListener('keydown', (event) => {
    if (event.target.tagName === 'BODY' && (event.key === 't' || event.key === 'T')) {
      toggleTheme();
    }
  });

  window.setDarkmodeToDark = setDarkmodeToDark;
  window.setDarkmodeToLight = setDarkmodeToLight;
  window.toggleTheme = toggleTheme;
  window.preventThemeToggle = false;
};