Drizzle UI
Docs
Drizzle Next
Docs
Components

Dark Mode

Description

A versatile dark mode component that seamlessly integrates into your application, providing users with an eye-friendly dark theme. It ensures a smooth transition between light and dark modes, enhancing the overall user experience.

This dark mode component requires no additional third-party dependencies. The DarkModeScript is only needed if you want to get rid of the flash of unstyled content. A good place to put the DarkModeScript component is just under the closing body tag, although it can go almost anywhere like in the demo below.

Preview

Installation

Add component:

Usage
Code
components/ui/dark-mode.tsx