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