Usage

How to Enable Dark Mode

Name: rocketicons
Author: rocketclimb

Using rocketicons to style icons on dark mode.

You can style icons differently when dark mode is enabled.

Light mode

Dark mode

<divclassName="text-slate-400 bg-slate-800 ... shadow-xl">
<p>
{modeLabel}
</p>
<FaBatteryEmptyclassName="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.