<script type="module">
    import * as DarkModeToggle from '/static/js/darkmode.js';

    const toggle = document.querySelector('dark-mode-toggle');
    const body = document.body;

    // Set or remove the `dark` class the first time.
    body.classList.remove('dark');
    body.classList.remove('light');
    if (toggle.mode === 'dark') {
        body.classList.add('dark')
    } else {
        body.classList.add('light')
    }

    // Listen for toggle changes (which includes `prefers-color-scheme` changes)
    // and toggle the `dark` class accordingly.
    toggle.addEventListener('colorschemechange', () => {
        body.classList.toggle('dark', toggle.mode === 'dark');
        body.classList.toggle('light', toggle.mode !== 'dark');
    });
</script>