Colors

dark-mode-coverage

Require a dark: variant for every background color class.

Detects elements that ship a background color class without a corresponding dark: variant. Auto-fixes by inserting the inverted shade so the component visually flips correctly when the theme switches. The rule that matters most after an AI agent generates a new component: light mode looks great, dark mode is unreadable.

Behavior

• Fixable: Yes — adds the dark: variant with the inverted shade.
• Suggestions: Yes.

Options

["warn", {
  "ignoredPrefixes": ["bg-gradient"],
  "ignoredColors": ["bg-transparent"]
}]

Examples

Bad:

<div className="bg-white" />

Good:

<div className="bg-white dark:bg-gray-900" />

Related rules

• no-arbitrary-colorsDisallow arbitrary color values like bg-[#FF0000] in Tailwind classes.
• consistent-color-paletteCap the number of unique color families used in a single file.
• a11y-color-contrastFlag text/background color combinations below WCAG AA contrast.

Use it

Enable dark-mode-coverage in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/dark-mode-coverage': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules