darkModePlugin() — tailwindcss Function Reference

Architecture documentation for the darkModePlugin() function in dark-mode.ts from the tailwindcss codebase.

Function typescript CompilerEngine AstTransformation called by 1

Entity Profile

CompilerEngine→ AstTransformation→ darkModePlugin() — tailwindcss Function Reference

Dependency Diagram

graph TD
  db0c22c6_d281_c194_8626_77a3777ce5b8["darkModePlugin()"]
  2f11a653_1ddf_d37a_b002_85288f586aba["migrateDarkMode()"]
  2f11a653_1ddf_d37a_b002_85288f586aba -->|calls| db0c22c6_d281_c194_8626_77a3777ce5b8
  style db0c22c6_d281_c194_8626_77a3777ce5b8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/dark-mode.ts lines 4–51

export function darkModePlugin({ addVariant, config }: Pick<PluginAPI, 'addVariant' | 'config'>) {
  let darkMode = config('darkMode', null) as ResolvedConfig['darkMode']
  let [mode, selector = '.dark'] = Array.isArray(darkMode) ? darkMode : [darkMode]

  if (mode === 'variant') {
    let formats

    if (Array.isArray(selector)) {
      formats = selector
    } else if (typeof selector === 'function') {
      formats = selector
    } else if (typeof selector === 'string') {
      formats = [selector]
    }

    if (Array.isArray(formats)) {
      for (let format of formats) {
        if (format === '.dark') {
          mode = false
          console.warn(
            'When using `variant` for `darkMode`, you must provide a selector.\nExample: `darkMode: ["variant", ".your-selector &"]`',
          )
        } else if (!format.includes('&')) {
          mode = false
          console.warn(
            'When using `variant` for `darkMode`, your selector must contain `&`.\nExample `darkMode: ["variant", ".your-selector &"]`',
          )
        }
      }
    }

    selector = formats as any
  }

  if (mode === null) {
    // Do nothing
  } else if (mode === 'selector') {
    // New preferred behavior
    addVariant('dark', `&:where(${selector}, ${selector} *)`)
  } else if (mode === 'media') {
    addVariant('dark', '@media (prefers-color-scheme: dark)')
  } else if (mode === 'variant') {
    addVariant('dark', selector)
  } else if (mode === 'class') {
    // Old behavior
    addVariant('dark', `&:is(${selector} *)`)
  }
}