Zurück an Land. Verwandle deinen Blog von Tag zu Nacht – ganz ohne Island!

Jetzt, da du interaktive Astro-Islands erstellen kannst, vergiss nicht: Du kannst auch mit reinem JavaScript und CSS schon sehr weit kommen!

Lass uns ein klickbares Symbol bauen, mit dem deine Nutzer zwischen Hell- und Dunkelmodus umschalten können – mithilfe eines weiteren <script>-Tags für Interaktivität … ganz ohne Framework-JavaScript im Browser.

Mach dich bereit, …

einen interaktiven Theme-Toggle nur mit JavaScript und CSS zu erstellen
so wenig JavaScript wie möglich an den Browser zu senden!

Füge ein Symbol zum Umschalten des Themes hinzu und style es

Erstelle eine neue Datei unter src/components/ThemeIcon.astro und füge folgenden Code ein:

---
---
<button id="themeToggle" aria-label="Theme umschalten">
  <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
    <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
  </svg>
</button>

<style>
  #themeToggle {
    border: 0;
    background: none;
  }
  .sun { fill: black; }
  .moon { fill: transparent; }

  :global(.dark) .sun { fill: transparent; }
  :global(.dark) .moon { fill: white; }
</style>

Importiere die <ThemeIcon />-Komponente in Header.astro, damit sie auf allen Seiten angezeigt wird. Wickle <ThemeIcon /> und <Menu /> in ein gemeinsames <div>-Element, um sie gemeinsam zu stylen, und füge ein <style>-Tag hinzu, wie unten gezeigt, um das Layout zu verbessern.

---
import Menu from './Menu.astro';
import Navigation from './Navigation.astro';
import ThemeIcon from './ThemeIcon.astro';
---
<header>
  <nav>
    <div>
      <ThemeIcon />
      <Menu />
    </div>
    <Navigation />
  </nav>
</header>

<style>
  div {
    display: flex;
    justify-content: space-between;
  }
</style>

Öffne deine Browser-Vorschau unter http://localhost:4321, um das Symbol jetzt auf allen Seiten zu sehen. Du kannst es anklicken, aber das Skript für die Interaktivität fehlt noch.

Füge CSS-Styles für den Dunkelmodus hinzu

Wähle alternative Farben für den Dunkelmodus.

Definiere in global.css einige dunkle Styles. Du kannst eigene wählen oder diese übernehmen:

html.dark {
  background-color: #0d0950;
  color: #fff;
}

.dark .menu {
  background-color: #fff;
  color: #000;
}

.dark .nav-links a:hover,
.dark .nav-links a:focus {
  color: #0d0950;
}

.dark .nav-links a {
  color: #fff;
}

.dark a {
  color: #ff9776;
}

Füge clientseitige Interaktivität hinzu

Um Interaktivität in einer Astro-Komponente zu ermöglichen, kannst du ein <script>-Tag verwenden. Dieses Skript kann das aktuelle Theme aus localStorage prüfen und setzen sowie das Theme beim Klicken auf das Symbol umschalten.

Füge nach dem <style>-Tag in src/components/ThemeIcon.astro folgendes <script>-Tag hinzu:

<style>
  .sun { fill: black; }
  .moon { fill: transparent; }

  :global(.dark) .sun { fill: transparent; }
  :global(.dark) .moon { fill: white; }
</style>

<script is:inline>
  const theme = (() => {
    const localStorageTheme = localStorage?.getItem("theme") ?? "";
    if (["dark", "light"].includes(localStorageTheme)) {
      return localStorageTheme;
    }
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      return "dark";
    }
      return "light";
  })();

  if (theme === "light") {
    document.documentElement.classList.remove("dark");
  } else {
    document.documentElement.classList.add("dark");
  }

  window.localStorage.setItem("theme", theme);

  const handleToggleClick = () => {
    const element = document.documentElement;
    element.classList.toggle("dark");

    const isDark = element.classList.contains("dark");
    localStorage.setItem("theme", isDark ? "dark" : "light");
  }

  document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
</script>

Öffne wieder deine Browser-Vorschau unter http://localhost:4321 und klicke auf das Theme-Symbol. Überprüfe, ob du zwischen Hell- und Dunkelmodus wechseln kannst.

Checkliste

Ich kann JavaScript für Interaktivität verwenden, ohne ein Framework hinzuzufügen.

Ressourcen

Clientseitige <script>-Tags in Astro (EN)

Wirke mit Community Sponsor