Dark Mode

Adding dark mode to your Astro project.

Create an inline theme script

1
---
2
import "../styles/globals.css";
3
---
4

5
<script is:inline>
6
  const getThemePreference = () => {
7
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
8
      return localStorage.getItem("theme");
9
    }
10
    return window.matchMedia("(prefers-color-scheme: dark)").matches
11
      ? "dark"
12
      : "light";
13
  };
14
  const isDark = getThemePreference() === "dark";
15
  document.documentElement.classList[isDark ? "add" : "remove"]("dark");
16

17
  if (typeof localStorage !== "undefined") {
18
    const observer = new MutationObserver(() => {
19
      const isDark = document.documentElement.classList.contains("dark");
20
      localStorage.setItem("theme", isDark ? "dark" : "light");
21
    });
22
    observer.observe(document.documentElement, {
23
      attributes: true,
24
      attributeFilter: ["class"],
25
    });
26
  }
27
</script>
28

29
<html lang="en">
30
  <body>
31
    <h1>Astro</h1>
32
  </body>
33
</html>

Add a mode toggle

1
---
2
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@bejamas/ui/components/select";
3
import { SunIcon, MoonIcon, LaptopIcon } from "@lucide/astro";
4
---
5

6
<div class="relative text-sm">
7
  <div class="absolute z-10 left-3 top-2.5 pointer-events-none">
8
    <SunIcon class="size-4 dark:hidden" />
9
    <MoonIcon class="size-4 hidden dark:block" />
10
  </div>
11
  <Select id="theme-select" class="w-28">
12
    <SelectTrigger class="pl-9">
13
      <SelectValue placeholder="Theme" />
14
    </SelectTrigger>
15
    <SelectContent>
16
      <SelectItem value="light">Light</SelectItem>
17
      <SelectItem value="dark">Dark</SelectItem>
18
      <SelectItem value="auto">Auto</SelectItem>
19
    </SelectContent>
20
  </Select>
21
</div>
22

23
<script is:inline>
24
  // @ts-nocheck
25
  const storageKey = "starlight-theme";
26
  const themeMetaMedias = [
27
    "(prefers-color-scheme: light)",
28
    "(prefers-color-scheme: dark)",
29
  ];
30
  const themeColors = {
31
    light: "#ffffff",
32
    dark: "#0f171f",
33
  };
34

35
  const parseTheme = (theme) =>
36
    theme === "auto" || theme === "dark" || theme === "light" ? theme : "auto";
37

38
  const loadTheme = () => {
39
    try {
40
      if (typeof localStorage !== "undefined") {
41
        return parseTheme(localStorage.getItem(storageKey));
42
      }
43
    } catch {}
44
    return "auto";
45
  };
46

47
  function storeTheme(theme) {
48
    try {
49
      if (typeof localStorage !== "undefined") {
50
        localStorage.setItem(
51
          storageKey,
52
          theme === "light" || theme === "dark" ? theme : "",
53
        );
54
      }
55
    } catch {}
56
  }
57

58
  function ensureThemeMeta(head, media) {
59
    const baseSelector = `meta[name="theme-color"][media="${media}"]`;
60

61
    let meta = head.querySelector(`${baseSelector}[data-theme-managed]`);
62
    if (meta instanceof HTMLMetaElement) return meta;
63

64
    meta = head.querySelector(baseSelector);
65
    if (meta instanceof HTMLMetaElement) {
66
      meta.setAttribute("data-theme-managed", "");
67
      return meta;
68
    }
69

70
    meta = document.createElement("meta");
71
    meta.setAttribute("name", "theme-color");
72
    meta.setAttribute("media", media);
73
    meta.setAttribute("data-theme-managed", "");
74
    head.appendChild(meta);
75
    return meta;
76
  }
77

78
  function syncThemeColor(theme) {
79
    const color = themeColors[theme];
80
    const head = document.head;
81
    if (!color || !head) return;
82

83
    themeMetaMedias.forEach((media) => {
84
      const meta = ensureThemeMeta(head, media);
85
      meta.setAttribute("content", color);
86
    });
87
  }
88

89
  const getPreferredColorScheme = () =>
90
    matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
91

92
  function applyTheme(theme) {
93
    const effective = theme === "auto" ? getPreferredColorScheme() : theme;
94
    document.documentElement.dataset.theme = effective;
95
    document.documentElement.classList.remove("light", "dark");
96
    document.documentElement.classList.add(effective);
97
    syncThemeColor(effective);
98
    storeTheme(theme);
99
    const select = document.getElementById("theme-select");
100
    if (select instanceof HTMLSelectElement) select.value = theme;
101
  }
102

103
  // Initialize
104
  applyTheme(loadTheme());
105

106
  // UI: select changes
107
  const select = document.getElementById("theme-select");
108
  if (select) {
109
    select.addEventListener("select:change", (e) => {
110
      const { value } = e.detail;
111
      applyTheme(parseTheme(value));
112
    });
113
  }
114

115
  window.toggleTheme = (theme) => applyTheme(parseTheme(theme));
116

117
  // React to system scheme changes while in 'auto'
118
  matchMedia("(prefers-color-scheme: light)").addEventListener("change", () => {
119
    if (loadTheme() === "auto") applyTheme("auto");
120
  });
121
</script>

Display the mode toggle

Place a mode toggle on your site to toggle between light and dark mode.

1
---
2
import "../styles/globals.css";
3
import ThemeSwitcher from "@/components/ThemeSwitcher.astro";
4
---
5

6
<!-- Inline script -->
7
<html lang="en">
8
  <body>
9
    <h1>Astro</h1>
10
    <ThemeSwitcher client:load />
11
  </body>
12
</html>