darkModePlugin() — tailwindcss Function Reference

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

Function typescript Oxide PreProcessors called by 1

Entity Profile

Oxide→ PreProcessors→ darkModePlugin() — tailwindcss Function Reference

Dependency Diagram

graph TD
  123b2f50_f029_34ef_b875_ea5cfbf14ec8["darkModePlugin()"]
  4c8bb5d7_9845_fe79_ed7d_c561197c3471["dark-mode.ts"]
  123b2f50_f029_34ef_b875_ea5cfbf14ec8 -->|defined in| 4c8bb5d7_9845_fe79_ed7d_c561197c3471
  f801b865_ef5a_08da_7238_161aad3ec371["migrateDarkMode()"]
  f801b865_ef5a_08da_7238_161aad3ec371 -->|calls| 123b2f50_f029_34ef_b875_ea5cfbf14ec8
  style 123b2f50_f029_34ef_b875_ea5cfbf14ec8 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} *)`)
  }
}