Usage

How to Enable Dark Mode

Using rocketicons to style icons on dark mode.

You can style icons differently when dark mode is enabled.

Light mode

Dark mode

<div
className="text-slate-400 bg-slate-800 ... shadow-xl"
>
<p>
{modeLabel}
</p>
<RcRocketIcon
className="icon-sky-900-6xl dark:icon-sky-500-6xl"
 />
</div>

In action

Use dark mode variation

Use the variant dark: to define styles for dark mode.

Change the page theme and see it working.

You can find a complete reference of the dark mode use on the Tailwind documentation.