refactor(useColorMode): invert meaning from omitAuto to emitAuto

packages/core/useColorMode/component.ts

@@ -4,7 +4,7 @@ import { useColorMode } from '.'
 
 export const UseColorMode = defineComponent<UseColorModeOptions>({
   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({

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'

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')
   })

packages/core/useColorMode/index.ts

@@ -62,13 +62,14 @@ export interface UseColorModeOptions<T extends string = BasicColorSchema> 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<T extends string = BasicColorSchema>(options: UseCo
     storageKey = 'vueuse-color-scheme',
     listenToStorageChanges = true,
     storageRef,
-    omitAuto = true,
+    emitAuto = false,
   } = options
 
   const modes = {
@@ -105,7 +106,7 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
 
   const state = computed<T | BasicColorSchema>({
     get() {
-      return store.value === 'auto' && omitAuto
+      return store.value === 'auto' && !emitAuto
         ? preferredMode.value
         : store.value
     },