tailwind-mode-aware-colors

Adds dynamic colors to TailwindCSS with light and dark shades that are shown based on the user's color scheme.

With this plugin, bg-primary can be used instead of bg-primary-light dark:bg-primary-dark.

Installation & Usage

npm install --save-dev tailwind-mode-aware-colors

tailwind.config.js

1
2module.exports = require('tailwind-mode-aware-colors')({
3  // your usual config
4  theme: {
5    colors: {
6      primary: {
7        // colors defined with light and dark keys will be dynamic
8        light: '#bbffa3',
9        dark: '#144b00'
10      }
11      ...
12    }
13  }
14  ...
15});

Any pair of colors X-light and X-dark will yield a new color X that automatically adapts to the color scheme. You can also have light- and dark- as prefixes or even -light- and -dark- in the middle of it.

• Works with both media and selector dark mode strategies.

• Works with nested structures. For example, if you had primary-surface-variant-light and primary-surface-variant-dark, the plugin would generate primary-surface-variant.

• Works with theme.extend.colors.

• Works with dark:, md:, hover: and any other Tailwind variants.

• Works with scoped color configurations such as textColor, backgroundColor, borderColor or outlineColor.

• Works with opacity. You can set default opacity to colors with hex or rgba syntax.

• Works with light- and dark- prefixes instead of suffixes too.

• You can still use the static shades.

Options

If for some reason -light and -dark are not right for your use case, you can pass an options object as a second parameter and customize those. Just replace "light" and "dark" with any other string.

1module.exports = require("tailwind-mode-aware-colors")(config, {
2  lightId: "light",
3  darkId: "dark",
4});

Limitations

• Colors must be defined as an object (not a function) for the plugin to work.

Why isn't the plugin called in the plugins array of tailwind.config.js?

tailwind-mode-aware-colors modifies your theme to add the new dynamic colors. The Tailwind engine and any other plugins you may be using will then pick those up. Because of that, it needs to wrap your Tailwind configuration and cannot be called in the plugins array.