Add a color mode switch

Sat Apr 12 2025

Tucker McKnight

8f51d84fe7702f0880246237ff262dc872040deb

darcs pull https://repos.tuckerm.us/repos/eleventy-darcs/branches/main -h 8f51d84fe7702f0880246237ff262dc872040deb

Before

<html>

After

<!DOCTYPE html>

_includes/main.njk:3

Before

After

    <script>
      const htmlElem = document.querySelector('html')
      const preferred = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'
      const setMode = (mode) => {
        if (mode === preferred) {
          localStorage.setItem('theme', 'auto')
        }
        if (mode === 'dark') {
          htmlElem.setAttribute('data-bs-theme', mode)
          localStorage.setItem('theme', mode)
        }
        else if (mode === 'light') {
          htmlElem.setAttribute('data-bs-theme', mode)
          localStorage.setItem('theme', mode)
        }
        else if (mode === 'auto') {
          htmlElem.setAttribute('data-bs-theme', preferred)
          localStorage.setItem('theme', preferred)
        }
        currentTheme = mode
      }
      let currentTheme = localStorage.getItem("theme") || "auto"
      setMode(currentTheme)
      const toggleDarkMode = (e) => {
        setMode(e.checked ? 'dark' : 'light')
      }
      const setCheckbox = (isDark, element) => {
        element.checked = isDark
      }
    </script>

_includes/main.njk:39

Before

After

_includes/main.njk:51

Before

After

              <div class="col-auto d-flex align-items-center">
                <i class="bi bi-brightness-high"></i>
                <div class="form-check form-switch mx-1" style="padding-top: 1px;">
                  <input class="form-check-input" type="checkbox" id="darkModeSwitch" value="dark" onchange="toggleDarkMode(this)" aria-label="Toggle switch for light or dark site theme">
                </div>
                <i class="bi bi-moon"></i>
             </div>

_includes/main.njk:86

Before

After

    <script>
      setCheckbox(currentTheme === 'dark', document.getElementById('darkModeSwitch'))
    </script>