Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled.
For example:
<html>
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
The background color of page will be white in light mode while being black in dark mode.
Let's show another example from the official:
<p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
</p>
The text color will be slate-500 in light mode while being slate-400 in dark mode.
But you will find it's what a boring work soon:
-
whitevsblack -
slate-500vsslate-400 - ...
uh-huh? The color is opposite? interesting.
Let's take a look at tailwind's color palette:
Have you found how to find the reverse color? It's obviously:
-
50to900 -
100to800 -
200to700 - ... and vise versa
Why not create a variant to auto handle this for us?
This is why tailwind-bicolor, and it's super easy to integrate to your project.
// tailwind.config.js
const { bicolor } = require('tailwind-bicolor');
module.exports = {
// ...
plugins: [bicolor()],
};
<div class="bg-white dark:bg-black"></div>
<!-- Replace with below ↓↓↓ -->
<div class="bi:bg-white"></div>
and that's it! Go to Online Demo.
<div class="bi:bg-green-400"></div>
will generate:
.bi\:bg-green-400 {
--tw-bg-opacity: 1;
/* green-400 */
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
.dark .bi\:bg-green-400 {
/* green-500 */
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
It will auto handle reverse color by default, but it's also customizable even if you want to use green in light while using blue in dark.
Top comments (0)