Building a dark/light theme toggle in Astro

A dark/light toggle is one of those features that sounds trivial and isn’t. Get it wrong and you ship the flash of wrong theme: the page loads light, then flickers dark if that was the user’s stored preference. Or you ship a toggle that forgets its state on every page load.

This blog’s implementation avoids all of those. There’s also a third option that most implementations skip: a “System” mode that tracks the OS preference in real time, without touching localStorage.

Wireframe mockup of the navbar with the theme toggle icon in the social icon group, and the page body below showing where the inline script fires before first paint

The colour system

All colours are defined as CSS custom properties on :root and overridden under [data-theme='dark']. There’s no separate dark-mode stylesheet, no class-swapping on individual elements. Just two variable sets, one attribute:

1
:root {
2
  --color-pink: #e8006a;
3
  --color-ink: #0f0f0f;
4
  --color-paper: #ffffff;
5
  --color-muted: #6b6b6b;
6
  --color-surface: #ffffff;
7
  --color-border: rgba(0, 0, 0, 0.1);
8
}
9

10
[data-theme='dark'] {
11
  --color-ink: #f0f0f0;
12
  --color-paper: #111111;
13
  --color-muted: #999999;
14
  --color-surface: #1c1c1c;
15
  --color-border: rgba(255, 255, 255, 0.1);
16
}

Switching between themes is a single setAttribute call on document.documentElement. Every element on the page that uses a custom property updates instantly.

The pink accent (--color-pink) doesn’t change between themes: it’s a fixed identity colour, not a semantic one.

The toggle component

The toggle lives in the navbar’s social icon group inside a dedicated ThemeToggle.astro component. It’s a single icon button that opens a small dropdown menu with System, Light, and Dark options:

1
<div class="theme-toggle">
2
  <button
3
    class="theme-toggle__trigger social-icon"
4
    aria-label="Theme preference"
5
    aria-expanded="false"
6
    aria-haspopup="true"
7
  >
8
    <span class="theme-toggle__trigger-icon theme-toggle__trigger-icon--system">
9
      <!-- half-stroke circle icon -->
10
    </span>
11
    <span class="theme-toggle__trigger-icon theme-toggle__trigger-icon--light">
12
      <!-- sun icon -->
13
    </span>
14
    <span class="theme-toggle__trigger-icon theme-toggle__trigger-icon--dark">
15
      <!-- moon icon -->
16
    </span>
17
  </button>
18

19
  <div class="theme-toggle__dropdown" role="menu" aria-label="Theme preference" hidden>
20
    <button class="theme-toggle__option" data-theme-select="system"
21
            role="menuitem" aria-pressed="true">
22
      <!-- half-stroke circle --> System
23
    </button>
24
    <button class="theme-toggle__option" data-theme-select="light"
25
            role="menuitem" aria-pressed="false">
26
      <!-- sun --> Light
27
    </button>
28
    <button class="theme-toggle__option" data-theme-select="dark"
29
            role="menuitem" aria-pressed="false">
30
      <!-- moon --> Dark
31
    </button>
32
  </div>
33
</div>

The trigger carries aria-haspopup="true" and aria-expanded (toggled by the script). The dropdown starts hidden; the script removes that attribute to reveal it.

Three icon spans live inside the trigger. Only one is visible at a time. CSS targets data-theme-current on the wrapper div (set by the script) to show the right icon:

1
.theme-toggle__trigger-icon { display: none; }
2

3
.theme-toggle[data-theme-current="system"] .theme-toggle__trigger-icon--system,
4
.theme-toggle[data-theme-current="light"]  .theme-toggle__trigger-icon--light,
5
.theme-toggle[data-theme-current="dark"]   .theme-toggle__trigger-icon--dark {
6
  display: flex;
7
}

This makes the trigger reflect the user’s chosen preference, not the resolved OS theme. If someone selects System and their OS is dark, the trigger shows the half-stroke circle, not the moon.

The script

The toggle script handles two concerns: dropdown open/close state, and theme selection. Both live inside the <script> block in ThemeToggle.astro. Astro bundles component scripts automatically:

1
const wrapper = document.querySelector<HTMLElement>(".theme-toggle")!;
2
const trigger = wrapper.querySelector<HTMLButtonElement>(".theme-toggle__trigger")!;
3
const dropdown = wrapper.querySelector<HTMLElement>(".theme-toggle__dropdown")!;
4
const options = wrapper.querySelectorAll<HTMLButtonElement>("[data-theme-select]");
5
const html = document.documentElement;
6

7
function setTheme(mode: string) {
8
  wrapper.dataset.themeCurrent = mode;
9
  options.forEach((btn) =>
10
    btn.setAttribute("aria-pressed", btn.dataset.themeSelect === mode ? "true" : "false"),
11
  );
12
  if (mode === "system") {
13
    localStorage.removeItem("theme");
14
    html.setAttribute(
15
      "data-theme",
16
      window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
17
    );
18
  } else {
19
    localStorage.setItem("theme", mode);
20
    html.setAttribute("data-theme", mode);
21
  }
22
}
23

24
function openMenu() {
25
  dropdown.removeAttribute("hidden");
26
  trigger.setAttribute("aria-expanded", "true");
27
}
28

29
function closeMenu() {
30
  dropdown.setAttribute("hidden", "");
31
  trigger.setAttribute("aria-expanded", "false");
32
}
33

34
trigger.addEventListener("click", () => {
35
  if (dropdown.hasAttribute("hidden")) openMenu();
36
  else closeMenu();
37
});
38

39
document.addEventListener("click", (e) => {
40
  if (!wrapper.contains(e.target as Node)) closeMenu();
41
});
42

43
document.addEventListener("keydown", (e) => {
44
  if (e.key === "Escape") closeMenu();
45
});
46

47
options.forEach((btn) =>
48
  btn.addEventListener("click", () => {
49
    setTheme(btn.dataset.themeSelect!);
50
    closeMenu();
51
  }),
52
);
53

54
const stored = localStorage.getItem("theme");
55
setTheme(stored === "dark" || stored === "light" ? stored : "system");
56

57
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
58
  if (!localStorage.getItem("theme")) {
59
    html.setAttribute("data-theme", e.matches ? "dark" : "light");
60
  }
61
});

A few things worth noting:

setTheme is the single source of truth: it updates data-theme-current on the wrapper (for trigger icon visibility), aria-pressed on each option, and localStorage and data-theme on <html>.
openMenu/closeMenu keep the hidden attribute and aria-expanded in sync. Using the HTML hidden attribute (rather than a CSS class) means the closed state works even before styles load.
Clicking outside the wrapper or pressing Escape closes the menu, the standard dropdown behaviour users expect.
System mode removes the localStorage key rather than storing "system". Only "dark" or "light" are ever written.
The matchMedia change listener fires when the OS theme switches while the page is open. It only acts when no explicit preference is stored, i.e. when the user is in System mode.

Preventing the flash of wrong theme

If you read localStorage in a script that loads after the page renders, you’ll see the default theme briefly before the script applies the stored preference. The fix is to run the theme-reading code synchronously in <head>, before the body is parsed. In BaseLayout.astro:

1
<html lang="en" data-theme="light">
2
  <head>
3
    <!-- ... meta, links ... -->
4
    <script is:inline>
5
      const stored = localStorage.getItem("theme");
6
      if (stored === "dark") {
7
        document.documentElement.setAttribute("data-theme", "dark");
8
      } else if (stored === "light") {
9
        document.documentElement.setAttribute("data-theme", "light");
10
      } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
11
        document.documentElement.setAttribute("data-theme", "dark");
12
      }
13
    </script>

The priority order is:

Stored explicit preference ("dark" or "light")
OS prefers-color-scheme: dark
Fallback: the data-theme="light" already on the <html> tag

The is:inline directive tells Astro not to bundle or defer this script: it stays as a literal inline <script> tag and runs immediately, before the browser paints anything.

Expressive Code alignment

Expressive Code (the syntax highlighting library) needs to know to follow the data-theme attribute rather than the OS prefers-color-scheme media query. Without this, code blocks would follow the system preference even when the user has picked an explicit theme. They’d be out of sync:

1
expressiveCode({
2
  useDarkModeMediaQuery: false,
3
  themeCssSelector: (theme) =>
4
    theme.type === "dark"
5
      ? '[data-theme="dark"]'
6
      : ':root:not([data-theme="dark"])',
7
})

useDarkModeMediaQuery: false disables the default @media (prefers-color-scheme) approach. themeCssSelector maps each Expressive Code theme variant to a CSS selector that matches the data-theme attribute instead.

Building a dark/light theme toggle in Astro

The colour system

The toggle component

The script

Preventing the flash of wrong theme

Expressive Code alignment

Need help raising the bar?

Comments

Leave a comment

Get practical engineering notes