⬅️ Back to Table of Contents

📄 useDark

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	5
🟢 Vue Composition API	2
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useDark/index.ts

📦 Imports

Name	Source
WritableComputedRef	vue
BasicColorSchema	../useColorMode
UseColorModeOptions	../useColorMode
computed	vue
useColorMode	../useColorMode

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
computed	computed	none	none

---

Functions

useDark(options: UseDarkOptions): UseDarkReturn

Reactive dark mode with auto data persistence.

Parameters:

• options any: No description

See: https://vueuse.org/useDark

Raw JSDoc

/**
 * Reactive dark mode with auto data persistence.
 *
 * @see https://vueuse.org/useDark
 * @param options
 */

Calls:

• useColorMode (from ../useColorMode)
• options.onChanged
• defaultHandler
• computed (from vue)

Code

export function useDark(options: UseDarkOptions = {}): UseDarkReturn {
  const {
    valueDark = 'dark',
    valueLight = '',
  } = options

  const mode = useColorMode({
    ...options,
    onChanged: (mode, defaultHandler) => {
      if (options.onChanged)
        options.onChanged?.(mode === 'dark', defaultHandler, mode)
      else
        defaultHandler(mode)
    },
    modes: {
      dark: valueDark,
      light: valueLight,
    },
  })

  const system = computed(() => mode.system.value)

  const isDark = computed<boolean>({
    get() {
      return mode.value === 'dark'
    },
    set(v) {
      const modeVal = v ? 'dark' : 'light'
      if (system.value === modeVal)
        mode.value = 'auto'
      else
        mode.value = modeVal
    },
  })

  return isDark
}

Internal helpers

Declared inside another function in this file.

onChanged(mode: BasicColorMode | "auto", defaultHandler: (mode: BasicColorMode | "auto") => void): void

Parameters:

• mode BasicColorMode | "auto"
• defaultHandler (mode: BasicColorMode | "auto") => void

Returns: void

Calls:

• options.onChanged
• defaultHandler

Code

(mode, defaultHandler) => {
      if (options.onChanged)
        options.onChanged?.(mode === 'dark', defaultHandler, mode)
      else
        defaultHandler(mode)
    }

---

Interfaces

UseDarkOptions

Interface Code

export interface UseDarkOptions extends Omit<UseColorModeOptions<BasicColorSchema>, 'modes' | 'onChanged'> {
  /**
   * Value applying to the target element when isDark=true
   *
   * @default 'dark'
   */
  valueDark?: string

  /**
   * Value applying to the target element when isDark=false
   *
   * @default ''
   */
  valueLight?: string

  /**
   * A custom handler for handle the updates.
   * When specified, the default behavior will be overridden.
   *
   * @default undefined
   */
  onChanged?: (isDark: boolean, defaultHandler: ((mode: BasicColorSchema) => void), mode: BasicColorSchema) => void
}

Properties

Name	Type	Optional	Description
valueDark	string	✓	not shown
valueLight	string	✓	not shown
onChanged	(isDark: boolean, defaultHandler: ((mode: BasicColorSchema) => void), mode: B...	✓	not shown

---

Type Aliases

UseDarkReturn

type UseDarkReturn = WritableComputedRef<boolean>;

---

Generated by Syntax Scribe