▌creating a comprehensive dark mode using tailwind and javacscript

it prioritizes the user's system theme. if the system theme changes, the site theme changes accordingly. if the user changes the theme from the site, that takes precedence. there is synchronization between tabs.

 
	<button class='text-neutral-500 dark:text-neutral-400 hover:bg-gneutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-800 rounded-lg text-sm p-2.5' id='theme-toggle' type='button'>
        <svg class='hidden w-5 h-5' fill='currentColor' id='theme-toggle-dark-icon' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z'/></svg>
        <svg class='hidden w-5 h-5' fill='currentColor' id='theme-toggle-light-icon' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' fill-rule='evenodd'/></svg>
    </button>
    
 

    const themeToggle = document.getElementById('theme-toggle');
    const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
    const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
    const themeChangeChannel = new BroadcastChannel('themeChangeChannel');

    const setTheme = (theme, source) => {
        const isDark = theme === 'dark';
        document.documentElement.classList.toggle('dark', isDark);
        themeToggleLightIcon.classList.toggle('hidden', isDark);
        themeToggleDarkIcon.classList.toggle('hidden', !isDark);
        localStorage.setItem('color-theme', theme);

        // Eğer tema değişikliği manuel olarak yapıldıysa veya sistem tarafından yapıldıysa, bu değişikliği diğer sekmelere yayınlarız
        if (source === 'manual' || source === 'system') {
            themeChangeChannel.postMessage({ theme });
        }
    };

    const toggleTheme = () => {
        const newTheme = document.documentElement.classList.contains('dark') ? 'light' : 'dark';
        setTheme(newTheme, 'manual');
        localStorage.setItem('manual-theme-change', 'true'); // Kullanıcının temayı manuel olarak değiştirdiğini belirten bayrağı ekliyoruz
    };

    themeChangeChannel.onmessage = ({ data: { theme } }) => {
        setTheme(theme);
    };

    themeToggle.addEventListener('click', toggleTheme);

    // İlk yüklenmede temayı kontrol ederiz
    const savedTheme = localStorage.getItem('color-theme');
    if (savedTheme) {
        setTheme(savedTheme, 'init');
    } else {
        setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light', 'init');
    }

    // Eğer kullanıcı manuel olarak temayı ayarlamadıysa sistem temasını takip ederiz
    window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
        const manualChange = localStorage.getItem('manual-theme-change');
        if (!manualChange) {
            const newTheme = e.matches ? 'dark' : 'light';
            setTheme(newTheme, 'system');
        }
    });