Rules let you override the shade map for specific utilities, shades, or colours. The first
matching enabled rule wins.
Make all text lighter in dark mode
Match any text-* class and force shade 300
in dark mode, regardless of the shade map.
- Utilities
- text
- Shade
- —
- In dark mode
- 300
Before
<h1 class="text-gray-900">Title</h1>
<p class="text-gray-600">Subtitle</p>
After
<h1 class="text-gray-900 dark:text-gray-300">Title</h1>
<p class="text-gray-600 dark:text-gray-300">Subtitle</p>
Invert heavy backgrounds, skip buttons
Match bg-* at shade 900 and map it to 100
in dark mode, but skip <button> elements.
- Utilities
- bg
- Shade
- 900
- In dark mode
- 100
- Skip elements
- button
Before
<div class="bg-gray-900 p-4">Panel</div>
<button class="bg-gray-900 px-4 py-2">Save</button>
After
<div class="bg-gray-900 dark:bg-gray-100 p-4">Panel</div>
<button class="bg-gray-900 px-4 py-2">Save</button>
Map white/black to a colour in dark mode
Match bg-white and replace it with a specific
colour and shade in dark mode instead of the default black inversion.
- Utilities
- bg
- Colours
- white
- Dark colour
- gray
- Dark shade
- 900
Before
<div class="bg-white p-4">Card</div>
After
<div class="bg-white dark:bg-gray-900 p-4">Card</div>
Keep brand colours untouched
Match any utility but exclude indigo and violet so brand colours pass through without
modification.
- Utilities
- —
- Shade
- —
- In dark mode
- —
- Skip colours
- indigo, violet
Before
<p class="text-gray-900">Text</p>
<span class="text-indigo-600">Brand</span>
After
<p class="text-gray-900 dark:text-gray-300">Text</p>
<span class="text-indigo-600">Brand</span>