Dark mode

Using variants to style your site in dark mode.

Overview

Now that dark mode is a first-class feature of many operating systems, it's becoming more and more common to design a dark version of your website to go along with the default design.

<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
  <h3 class="text-gray-900 dark:text-white text-base font-medium tracking-tight">Writes upside-down</h3>
  <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm">
    The zero-gravity pen can be used to write in any orientation, including upside-down.
  </p>
</div>

By default this uses the prefers-color-scheme CSS media feature.

Toggling dark mode manually

To have dark mode driven by a CSS selector instead, override the dark variant:

app.css

@import "sprigcss";
@custom-variant dark (&:where(.dark, .dark *));

theme.js

document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);