All color and opacity related properties such as
color-opacity can be applied conditionally based on dark mode.
Dark mode is disabled by default, to enable, pass
true to the
dark-mode-support setting in your configuration.
@use "uniform" as * with (
To apply conditional dark mode colors, prepend the
dark pseudo to the beginning of each class. When you assign the class
dark to your body or parent container, the dark styling will be applied.
<div class="bg-white dark.bg-black ...">
You can combine the dark mode with other pseudos such as
hover by prepending the
dark class to the beginning of any pseudo conditional class.
<button class="hover.bg-white dark.hover.bg-black ...">