https://blog.jonathanchannon.com/js/theme-toggle.js

1/**
2 * Theme Toggle - Dark/Light Mode
3 * Persists user preference in localStorage
4 */
5(function() {
6  const toggle = document.getElementById('theme-toggle');
7  
8  if (!toggle) return;
9  
10  // Get current theme
11  function getTheme() {
12    return document.documentElement.getAttribute('data-theme');
13  }
14  
15  // Set theme and persist to localStorage
16  function setTheme(theme) {
17    if (theme === 'dark') {
18      document.documentElement.setAttribute('data-theme', 'dark');
19      localStorage.setItem('theme', 'dark');
20    } else {
21      document.documentElement.removeAttribute('data-theme');
22      localStorage.setItem('theme', 'light');
23    }
24  }
25  
26  // Toggle between light and dark
27  function toggleTheme() {
28    const currentTheme = getTheme();
29    if (currentTheme === 'dark') {
30      setTheme('light');
31    } else {
32      setTheme('dark');
33    }
34  }
35  
36  // Handle click
37  toggle.addEventListener('click', toggleTheme);
38  
39  // Handle keyboard accessibility
40  toggle.addEventListener('keydown', function(e) {
41    if (e.key === 'Enter' || e.key === ' ') {
42      e.preventDefault();
43      toggleTheme();
44    }
45  });
46})();