← All notes

Dark mode without the flash

To avoid a white flash, toss the following inline script in BaseHead.

src/BaseHead.astro
<script is:inline>
  const stored = localStorage.getItem('theme');
  const dark = stored
    ? stored === 'dark'
    : window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.classList.toggle('dark', dark);
</script>