Light/Dark mode switcher

Jak możemy w Astro zaimplementować coś, co wymaga Javascriptu?

Założenia

• W Navbarze umieścimy 2 Buttony, "Light" oraz "Dark"
• Po kliknięciu w button motyw strony ma się zmienić zgodnie z podpisem przyciksu

Implementacja

• /src/components/ThemeSwitcher.astro

<script>
  // Ten kod wykona się w przeglądarce przy każdym przeładowaniu strony
  const lightModeBtn = document.getElementById('light');
  const darkModeBtn = document.getElementById('dark');
  const bodyElement = document.getElementsByTagName('body')[0];

  lightModeBtn?.addEventListener('click', () =>
    bodyElement?.setAttribute('data-bs-theme', 'light'));

  darkModeBtn?.addEventListener('click', () =>
    bodyElement?.setAttribute('data-bs-theme', 'dark'));
</script>

<div class="btn-group float-end">
  <button class="btn btn-light" id="light">
    light
  </button>
  <button class="btn btn-dark" id="dark">
    dark
  </button>
</div>

• /src/components/Navbar.astro

---
import ThemeSwitcher from "./ThemeSwitcher.astro";
const links = [
  { url: "/", label: "Home" },
  { url: "/about", label: "About" },
  { url: "/contact", label: "Contact" },
];
---

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Cool website</a>
    <button class="navbar-toggler" type="button">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse w-100" id="navbarNav">
      <ul class="navbar-nav w-100">
        {
          links.map(({ url, label }) => (
            <li class="nav-item">
              <a class="nav-link" href={url}>
                {label}
              </a>
            </li>
          ))
        }
      </ul>
      <ThemeSwitcher />
    </div>
  </div>
</nav>