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

Getting Started

Enable dark mode support for your app.

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