Theme Toggling

This page adapts to your system theme using @media (prefers-color-scheme). Use the button below to manually toggle themes.

Code Example


    /* Manual override: dark mode class */
    body.dark {
      background: black !important;
      color: white !important;
    }

    /* Manual override: light mode class */
    body.light {
      background: white !important;
      color: black !important;
    }

----------------------------------------------

    const btn = document.getElementById('toggleTheme');
    btn.onclick = function() {
      if (document.body.classList.contains('dark')) {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
      } else if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
      } else {
        // If no manual class yet, start with dark
        document.body.classList.add('dark');
      }
    };