User:Isy/Sandbox/DarkMode-Experiment.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

$(function() {
    // Only run on pages with our experiment
    const experimentPage = document.querySelector('.dark-mode-experiment');
    if (!experimentPage) return;

    // Create and add toggle button
    const toggleBtn = document.createElement('button');
    toggleBtn.className = 'dark-mode-toggle';
    toggleBtn.innerHTML = '🌙';
    document.body.appendChild(toggleBtn);

    // Theme management
    function setTheme(theme) {
        experimentPage.setAttribute('data-theme', theme);
        localStorage.setItem('darkModeExperiment', theme);
        toggleBtn.innerHTML = theme === 'dark' ? '☀️' : '🌙';
    }

    // Initialize theme
    const savedTheme = localStorage.getItem('darkModeExperiment');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    setTheme(savedTheme || (prefersDark ? 'dark' : 'light'));

    // Toggle on click
    toggleBtn.addEventListener('click', () => {
        const current = experimentPage.getAttribute('data-theme') || 'light';
        setTheme(current === 'dark' ? 'light' : 'dark');
    });
});