Getting Started

Dark Mode

Enable dark mode support for your app.

Setup

Ensure the following Tailwind Variant is added to your entry style file styles/globals.css:

/** Dark Mode Variant **/
@custom-variant dark (&:where(.dark, .dark *));

To enable dark mode, toggle the dark class on the <html> element.

export default () => (
  <html lang="en" className="dark">
    <body>{/* Your app */}</body>
  </html>
);

For Next.js projects we recommend using next-themes package for easy dark mode toggle support in your app.

On This Page