noir-mode

Build-time dark mode CSS generation for Vite. Automatically transforms your CSS colors into dark mode variants using DarkReader's color algorithm.

Features

• Zero runtime overhead - Dark mode CSS is generated at build time
• PostCSS plugin - Works with any CSS, SCSS, or preprocessor
• Vite plugin - Easy integration with Vite projects
• Runtime transform - For dynamic inline styles (e.g., Vue/React components)
• DarkReader algorithm - Battle-tested color transformation

Installation

npm install noir-mode

Usage

Vite Plugin

The simplest way to use vite-noir is as a Vite plugin:

// vite.config.js
import noir from "noir-mode";

export default {
  plugins: [
    noir({
      darkModeSelector: ".dark-mode", // CSS selector for dark mode
      theme: {
        darkSchemeBackgroundColor: "#181a1b",
        darkSchemeTextColor: "#e8e6e3",
      },
    }),
  ],
};

PostCSS Plugin

You can also use it directly as a PostCSS plugin:

// vite.config.js
import { noirPostcss } from "noir-mode/postcss";

export default {
  css: {
    postcss: {
      plugins: [
        noirPostcss({
          darkModeSelector: ".dark-mode",
        }),
      ],
    },
  },
};

Ignoring Files and Selectors

You can exclude certain CSS files or selectors from being processed:

// vite.config.js
import { noirPostcss } from "noir-mode/postcss";

export default {
  css: {
    postcss: {
      plugins: [
        noirPostcss({
          // Skip files whose path contains these strings
          ignore: [
            "vendor",
            "third-party"
          ],
          // Skip rules whose selector contains these strings
          ignoreSelectors: [
            ".external-widget",
            ".third-party-component",
            "#legacy-module"
          ]
        }),
      ],
    },
  },
};

This is useful when you have third-party CSS that already handles its own dark mode, or legacy code that shouldn't be transformed.

Runtime Transform

For inline styles that can't be processed at build time (e.g., dynamic colors in Vue/React components):

import { transformColor, setDarkMode } from "noir-mode/transform";

// Call this when dark mode is toggled
setDarkMode(true);

// Transform a color (returns original if dark mode is off)
const darkColor = transformColor("#ffffff", "background-color");
// => "#181a1b" (when dark mode is on)
// => "#ffffff" (when dark mode is off)

Vue Example

<script>
import { transformColor } from "noir-mode/transform";

export default {
  props: {
    color: String,
  },
  computed: {
    isDarkMode() {
      return this.$store.getters["common/getDarkMode"];
    },
    transformedColor() {
      if (this.isDarkMode) {
        return transformColor(this.color, "color");
      }
      return this.color;
    },
  },
};
</script>

How It Works

vite-noir scans your CSS for color properties and generates corresponding dark mode rules:

Input:

.button {
  background-color: #ffffff;
  color: #000000;
}

Output:

.button {
  background-color: #ffffff;
  color: #000000;
}
.dark-mode .button {
  background-color: #181a1b;
  color: #e8e6e3;
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | darkModeSelector | string | ".dark-mode" | CSS selector to prefix dark mode rules | | ignore | string[] | [] | Skip files whose path contains any of these strings | | ignoreSelectors | string[] | [] | Skip rules whose selector contains any of these strings | | theme.darkSchemeBackgroundColor | string | "#181a1b" | Target background color for dark mode | | theme.darkSchemeTextColor | string | "#e8e6e3" | Target text color for dark mode | | theme.brightness | number | 100 | Brightness adjustment (0-200) | | theme.contrast | number | 90 | Contrast adjustment (0-200) | | theme.sepia | number | 10 | Sepia filter (0-100) | | theme.grayscale | number | 0 | Grayscale filter (0-100) |

API

noir-mode (default export)

Vite plugin that automatically configures PostCSS.

noir-mode/postcss

• noirPostcss(options) - PostCSS plugin

noir-mode/transform

• transformColor(color, property, theme?) - Transform color (respects dark mode state)
• transformColorRaw(color, property, theme?) - Always transform (for build-time use)
• setDarkMode(enabled) - Set global dark mode state
• getDarkMode() - Get current dark mode state
• parseColor(colorStr) - Parse CSS color to RGB
• rgbToString(rgb) - Convert RGB to CSS color string

Supported Color Formats

• Hex: #fff, #ffffff, #ffffffff
• RGB: rgb(255, 255, 255), rgba(255, 255, 255, 0.5)
• HSL: hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0.5)
• Modern syntax: rgb(255 255 255 / 50%)
• Named colors: white, black, transparent, etc.

Credits

Color transformation algorithm based on DarkReader.

License

MIT © Crisp IM SAS