⬅️ Back to Table of Contents

📄 usePreferredContrast

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	3
🟢 Vue Composition API	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Type Aliases

🛠️ File Location:

📂 packages/core/usePreferredContrast/index.ts

📦 Imports

Name	Source
ConfigurableWindow	../_configurable
computed	vue
useMediaQuery	../useMediaQuery

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none

---

Functions

usePreferredContrast(options: ConfigurableWindow): any

Reactive prefers-contrast media query.

Parameters:

• options any (optional): No description

See: https://vueuse.org/usePreferredContrast

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactive prefers-contrast media query.
 *
 * @see https://vueuse.org/usePreferredContrast
 * @param [options]
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• useMediaQuery (from ../useMediaQuery)
• computed (from vue)

Code

export function usePreferredContrast(options?: ConfigurableWindow) {
  const isMore = useMediaQuery('(prefers-contrast: more)', options)
  const isLess = useMediaQuery('(prefers-contrast: less)', options)
  const isCustom = useMediaQuery('(prefers-contrast: custom)', options)

  return computed<ContrastType>(() => {
    if (isMore.value)
      return 'more'
    if (isLess.value)
      return 'less'
    if (isCustom.value)
      return 'custom'
    return 'no-preference'
  })
}

---

Type Aliases

ContrastType

type ContrastType = 'more' | 'less' | 'custom' | 'no-preference';

---

Generated by Syntax Scribe