color-scheme-toggle/color-scheme-toggle.js

A simple javascript to toggle your website between [ 🖥 system theme | 🌙 dark mode | ☀️ light mode ]

const toggleButton = document.getElementById('color-scheme-toggle');
const themeTextMap = {
  'dark': '☾  Dark Mode',
  'light': '☀  Light Mode',
  'system': '🖥  System Theme',
}
let currentTheme = null;

initTheme();
toggleButton.addEventListener('click', () => {
  doToggle();
});

function doToggle() {
  const themeKeys = Object.keys(themeTextMap)
  currentTheme = themeKeys[(themeKeys.indexOf(currentTheme) + 1) % themeKeys.length];
  localStorage.setItem('savedColorScheme', currentTheme)
  applyTheme();
}

function initTheme() {
  currentTheme = localStorage.getItem('savedColorScheme') || 'system';
  applyTheme()
}

function applyTheme() {
  let dataTheme = currentTheme
  if (dataTheme === 'system') {
    dataTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
  }
  document.documentElement.setAttribute('data-theme', dataTheme);
  toggleButton.innerHTML = themeTextMap[currentTheme];
}