darkModePlugin() — tailwindcss Function Reference

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

Function typescript UpgradeToolkit Codemods called by 1

Entity Profile

UpgradeToolkit→ Codemods→ darkModePlugin() — tailwindcss Function Reference

Dependency Diagram

graph TD
  54520652_a882_0664_f2a1_5ea7cdd9fd2f["darkModePlugin()"]
  e89fb45a_8bfc_fa37_8fa2_d0dcfee110db["dark-mode.ts"]
  54520652_a882_0664_f2a1_5ea7cdd9fd2f -->|defined in| e89fb45a_8bfc_fa37_8fa2_d0dcfee110db
  450b80ee_7984_6c4f_fde3_a6c52f03baad["migrateDarkMode()"]
  450b80ee_7984_6c4f_fde3_a6c52f03baad -->|calls| 54520652_a882_0664_f2a1_5ea7cdd9fd2f
  style 54520652_a882_0664_f2a1_5ea7cdd9fd2f 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} *)`)
  }
}