diff --git a/packages/core/useColorMode/component.ts b/packages/core/useColorMode/component.ts index c45ec52be64..34f6845abc3 100644 --- a/packages/core/useColorMode/component.ts +++ b/packages/core/useColorMode/component.ts @@ -4,7 +4,7 @@ import { useColorMode } from '.' export const UseColorMode = defineComponent({ name: 'UseColorMode', - props: ['selector', 'attribute', 'modes', 'onChanged', 'storageKey', 'storage', 'omitAuto'] as unknown as undefined, + props: ['selector', 'attribute', 'modes', 'onChanged', 'storageKey', 'storage', 'emitAuto'] as unknown as undefined, setup(props, { slots }) { const mode = useColorMode(props) const data = reactive({ diff --git a/packages/core/useColorMode/index.md b/packages/core/useColorMode/index.md index 5a80a4ea385..d9b7f93a4f6 100644 --- a/packages/core/useColorMode/index.md +++ b/packages/core/useColorMode/index.md @@ -18,7 +18,7 @@ import { useColorMode } from '@vueuse/core' const mode = useColorMode() // Ref<'dark' | 'light'> ``` -By default, it will match with users' browser preference using `usePreferredDark` (a.k.a `auto` mode). When reading the ref, it will by default return the current color mode (`dark`, `light` or your custom modes). The `auto` mode can be included in the returned modes by disabling the `omitAuto` option. When writing to the ref, it will trigger DOM updates and persist the color mode to local storage (or your custom storage). You can pass `auto` to set back to auto mode. +By default, it will match with users' browser preference using `usePreferredDark` (a.k.a `auto` mode). When reading the ref, it will by default return the current color mode (`dark`, `light` or your custom modes). The `auto` mode can be included in the returned modes by enabling the `emitAuto` option. When writing to the ref, it will trigger DOM updates and persist the color mode to local storage (or your custom storage). You can pass `auto` to set back to auto mode. ```ts mode.value // 'dark' | 'light' diff --git a/packages/core/useColorMode/index.test.ts b/packages/core/useColorMode/index.test.ts index 53baf43727c..549e5050f66 100644 --- a/packages/core/useColorMode/index.test.ts +++ b/packages/core/useColorMode/index.test.ts @@ -2,14 +2,14 @@ import { expect } from 'vitest' import { useColorMode } from '.' describe('useColorMode', () => { - it('should omit auto mode', () => { + it('should translate auto mode', () => { const mode = useColorMode() mode.value = 'auto' expect(mode.value).toBe('light') }) it('should include auto mode', () => { - const mode = useColorMode({ omitAuto: false }) + const mode = useColorMode({ emitAuto: true }) mode.value = 'auto' expect(mode.value).toBe('auto') }) diff --git a/packages/core/useColorMode/index.ts b/packages/core/useColorMode/index.ts index 1007466b94a..fdc13841142 100644 --- a/packages/core/useColorMode/index.ts +++ b/packages/core/useColorMode/index.ts @@ -62,13 +62,14 @@ export interface UseColorModeOptions extend storage?: StorageLike /** - * Omit `auto` mode from state + * Emit `auto` mode from state * - * When set to `true`, preferred mode is translated into `light` or `dark` + * When set to `true`, preferred mode won't be translated into `light` or `dark`. + * This is useful when the fact that `auto` mode was selected needs to be known. * - * @default true + * @default false */ - omitAuto?: boolean + emitAuto?: boolean } /** @@ -86,7 +87,7 @@ export function useColorMode(options: UseCo storageKey = 'vueuse-color-scheme', listenToStorageChanges = true, storageRef, - omitAuto = true, + emitAuto = false, } = options const modes = { @@ -105,7 +106,7 @@ export function useColorMode(options: UseCo const state = computed({ get() { - return store.value === 'auto' && omitAuto + return store.value === 'auto' && !emitAuto ? preferredMode.value : store.value },