From b28e4d932775383005f357be0834616176a23a4c Mon Sep 17 00:00:00 2001
From: dfreier <stone_stabiler.0x@icloud.com>
Date: Sun, 22 May 2022 17:02:06 +0200
Subject: [PATCH 1/5] feat(useColorMode): add option to return `auto` mode

---
 packages/core/useColorMode/component.ts |  2 +-
 packages/core/useColorMode/index.ts     | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/core/useColorMode/component.ts b/packages/core/useColorMode/component.ts
index 13e54b25f75..c45ec52be64 100644
--- a/packages/core/useColorMode/component.ts
+++ b/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'] as unknown as undefined,
+  props: ['selector', 'attribute', 'modes', 'onChanged', 'storageKey', 'storage', 'omitAuto'] as unknown as undefined,
   setup(props, { slots }) {
     const mode = useColorMode(props)
     const data = reactive({
diff --git a/packages/core/useColorMode/index.ts b/packages/core/useColorMode/index.ts
index 9fde2d75d2a..1007466b94a 100644
--- a/packages/core/useColorMode/index.ts
+++ b/packages/core/useColorMode/index.ts
@@ -60,6 +60,15 @@ export interface UseColorModeOptions<T extends string = BasicColorSchema> extend
    * @default localStorage
    */
   storage?: StorageLike
+
+  /**
+   * Omit `auto` mode from state
+   *
+   * When set to `true`, preferred mode is translated into `light` or `dark`
+   *
+   * @default true
+   */
+  omitAuto?: boolean
 }
 
 /**
@@ -77,6 +86,7 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
     storageKey = 'vueuse-color-scheme',
     listenToStorageChanges = true,
     storageRef,
+    omitAuto = true,
   } = options
 
   const modes = {
@@ -95,7 +105,7 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
 
   const state = computed<T | BasicColorSchema>({
     get() {
-      return store.value === 'auto'
+      return store.value === 'auto' && omitAuto
         ? preferredMode.value
         : store.value
     },

From bc31ca63b84ebea8dc0d0c6e5d08f71b0461464f Mon Sep 17 00:00:00 2001
From: dfreier <stone_stabiler.0x@icloud.com>
Date: Sun, 22 May 2022 17:03:14 +0200
Subject: [PATCH 2/5] docs(useColorMode): document new `omitAuto` option

---
 packages/core/useColorMode/demo.vue | 4 +++-
 packages/core/useColorMode/index.md | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/core/useColorMode/demo.vue b/packages/core/useColorMode/demo.vue
index a8ce85ec26b..e4d808114a1 100644
--- a/packages/core/useColorMode/demo.vue
+++ b/packages/core/useColorMode/demo.vue
@@ -2,13 +2,14 @@
 import { useColorMode, useCycleList } from '@vueuse/core'
 
 const mode = useColorMode({
+  omitAuto: false,
   modes: {
     contrast: 'dark contrast',
     cafe: 'cafe',
   },
 })
 
-const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialValue: mode })
+const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast', 'auto'], { initialValue: mode })
 </script>
 
 <template>
@@ -17,6 +18,7 @@ const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialVa
     <i v-if="mode === 'light'" i-carbon-sun inline-block align-middle class="align-middle" />
     <i v-if="mode === 'cafe'" i-carbon-cafe inline-block align-middle class="align-middle" />
     <i v-if="mode === 'contrast'" i-carbon-contrast inline-block align-middle class="align-middle" />
+    <i v-if="mode === 'auto'" i-carbon-laptop inline-block align-middle class="align-middle" />
 
     <span class="ml-2 capitalize">{{ mode }}</span>
   </button>
diff --git a/packages/core/useColorMode/index.md b/packages/core/useColorMode/index.md
index 1aca8ac0dd5..5a80a4ea385 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 always return the current color mode (`dark`, `light` or your custom modes). 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 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.
 
 ```ts
 mode.value // 'dark' | 'light'

From 87656e2f2a2bd9d3b93e4bdc79902f1949aec720 Mon Sep 17 00:00:00 2001
From: dfreier <stone_stabiler.0x@icloud.com>
Date: Sun, 22 May 2022 17:30:56 +0200
Subject: [PATCH 3/5] test(useColorMode): test new `omitAuto` option

---
 packages/core/useColorMode/index.test.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 packages/core/useColorMode/index.test.ts

diff --git a/packages/core/useColorMode/index.test.ts b/packages/core/useColorMode/index.test.ts
new file mode 100644
index 00000000000..53baf43727c
--- /dev/null
+++ b/packages/core/useColorMode/index.test.ts
@@ -0,0 +1,16 @@
+import { expect } from 'vitest'
+import { useColorMode } from '.'
+
+describe('useColorMode', () => {
+  it('should omit auto mode', () => {
+    const mode = useColorMode()
+    mode.value = 'auto'
+    expect(mode.value).toBe('light')
+  })
+
+  it('should include auto mode', () => {
+    const mode = useColorMode({ omitAuto: false })
+    mode.value = 'auto'
+    expect(mode.value).toBe('auto')
+  })
+})

From 85f8bb9893960a78d62c9579105bf8b18c9dd494 Mon Sep 17 00:00:00 2001
From: dfreier <stone_stabiler.0x@icloud.com>
Date: Mon, 20 Jun 2022 17:39:45 +0200
Subject: [PATCH 4/5] refactor(useColorMode): invert meaning from `omitAuto` to
 `emitAuto`

---
 packages/core/useColorMode/component.ts  |  2 +-
 packages/core/useColorMode/demo.vue      |  2 +-
 packages/core/useColorMode/index.md      |  2 +-
 packages/core/useColorMode/index.test.ts |  4 ++--
 packages/core/useColorMode/index.ts      | 13 +++++++------
 5 files changed, 12 insertions(+), 11 deletions(-)

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<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({
diff --git a/packages/core/useColorMode/demo.vue b/packages/core/useColorMode/demo.vue
index e4d808114a1..a571692f8ef 100644
--- a/packages/core/useColorMode/demo.vue
+++ b/packages/core/useColorMode/demo.vue
@@ -2,7 +2,7 @@
 import { useColorMode, useCycleList } from '@vueuse/core'
 
 const mode = useColorMode({
-  omitAuto: false,
+  emitAuto: true,
   modes: {
     contrast: 'dark contrast',
     cafe: 'cafe',
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<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
     },

From 84d2db3598480a6608a724c24b67f339d347d8a6 Mon Sep 17 00:00:00 2001
From: Dominik Freier <dfreier@users.noreply.github.com>
Date: Tue, 21 Jun 2022 13:03:39 +0200
Subject: [PATCH 5/5] refactor(useColorMode): remove unnecessary default value

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/core/useColorMode/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/useColorMode/index.ts b/packages/core/useColorMode/index.ts
index fdc13841142..61a64bdcbb7 100644
--- a/packages/core/useColorMode/index.ts
+++ b/packages/core/useColorMode/index.ts
@@ -67,7 +67,7 @@ export interface UseColorModeOptions<T extends string = BasicColorSchema> extend
    * 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 false
+   * @default undefined
    */
   emitAuto?: boolean
 }
@@ -87,7 +87,7 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
     storageKey = 'vueuse-color-scheme',
     listenToStorageChanges = true,
     storageRef,
-    emitAuto = false,
+    emitAuto,
   } = options
 
   const modes = {