feat(usePreferredContrast): new function (#2040)

packages/components/index.ts

@@ -38,6 +38,7 @@ export * from '../core/useOnline/component'
 export * from '../core/usePageLeave/component'
 export * from '../core/usePointer/component'
 export * from '../core/usePreferredColorScheme/component'
+export * from '../core/usePreferredContrast/component'
 export * from '../core/usePreferredDark/component'
 export * from '../core/usePreferredLanguages/component'
 export * from '../core/usePreferredReducedMotion/component'

packages/core/index.ts

@@ -81,6 +81,7 @@ export * from './usePermission'
 export * from './usePointer'
 export * from './usePointerSwipe'
 export * from './usePreferredColorScheme'
+export * from './usePreferredContrast'
 export * from './usePreferredDark'
 export * from './usePreferredLanguages'
 export * from './usePreferredReducedMotion'

packages/core/usePreferredContrast/component.ts

@@ -0,0 +1,16 @@
+import { defineComponent, reactive } from 'vue-demi'
+import { usePreferredContrast } from '@vueuse/core'
+
+export const UsePreferredContrast = defineComponent({
+  name: 'UsePreferredContrast',
+  setup(props, { slots }) {
+    const data = reactive({
+      contrast: usePreferredContrast(),
+    })
+
+    return () => {
+      if (slots.default)
+        return slots.default(data)
+    }
+  },
+})

packages/core/usePreferredContrast/demo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { usePreferredContrast } from '@vueuse/core'
+
+const contrast = usePreferredContrast()
+</script>
+
+<template>
+  <note class="mb-2">
+    Preferred contrast:
+  </note>
+  <code>{{ contrast }}</code>
+</template>

packages/core/usePreferredContrast/index.md

@@ -0,0 +1,23 @@
+---
+category: Browser
+---
+
+# usePreferredContrast
+
+Reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query.
+
+## Usage
+
+```js
+import { usePreferredContrast } from '@vueuse/core'
+
+const preferredContrast = usePreferredContrast()
+```
+
+## Component Usage
+
+```html
+<UsePreferredContrast v-slot="{ contrast }">
+  Preferred Color Scheme: {{ contrast }}
+<UsePreferredContrast>
+```

packages/core/usePreferredContrast/index.ts

@@ -0,0 +1,27 @@
+import { computed } from 'vue-demi'
+import { useMediaQuery } from '../useMediaQuery'
+import type { ConfigurableWindow } from '../_configurable'
+
+export type ContrastType = 'more' | 'less' | 'custom' | 'no-preference'
+
+/**
+ * Reactive prefers-contrast media query.
+ *
+ * @see https://vueuse.org/usePreferredContrast
+ * @param [options]
+ */
+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'
+  })
+}