Get Started

Dark Mode

Dark mode is driven by a single attribute, data-theme="dark", plus the matching .dark class on the root element.

Toggle programmatically

tsx

document.documentElement.dataset.theme = 'dark';
document.documentElement.classList.toggle('dark', true);
localStorage.setItem('theme', 'dark');

Avoid flicker on first paint

tsx

<html>
  <head>
    <script dangerouslySetInnerHTML={{__html: `
      (function() {
        const t = localStorage.getItem('theme') ||
          (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
        document.documentElement.dataset.theme = t;
        document.documentElement.classList.toggle('dark', t === 'dark');
      })();
    `}} />
  </head>
  <body>{children}</body>
</html>