Dark mode

  1. Read user preference from localStorage.theme.
  2. If not set, check for a system preference using a media query.
  3. Apply a light or dark class to the html element.
  4. Suppress NextJS's warnings about attribute mismatch between server-side rendered markup and client-side markup found during hydration. The warning is only logged during development but it floods the console.
  5. Import color variables from @radix-ui/colors. The scales are tested for accessibility and flip automatically to match the class applied.

Class setting is handled in a script inlined in <head> so the that the class is present during initial render and user doesn't see a flash of the default theme if it happens to differ from their selected theme.