From e9dccc9ef5b51c49cfec2af62e13277393f270b0 Mon Sep 17 00:00:00 2001
From: Tom Sherman <the.tomsherman@gmail.com>
Date: Thu, 12 Jan 2023 18:29:10 +0000
Subject: [PATCH] feat: add option to follow system color setting (#1012)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Closes https://github.com/elk-zone/elk/issues/1007
---
 components/settings/SettingsColorMode.vue | 17 +++++++++++++----
 composables/settings/definition.ts        |  2 +-
 locales/en-GB.json                        |  3 ++-
 locales/en-US.json                        |  3 ++-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/components/settings/SettingsColorMode.vue b/components/settings/SettingsColorMode.vue
index 86649723..70b20e32 100644
--- a/components/settings/SettingsColorMode.vue
+++ b/components/settings/SettingsColorMode.vue
@@ -12,8 +12,8 @@ function setColorMode(mode: ColorMode) {
   <div flex="~ gap4" w-full>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
-      :tabindex="colorMode.value === 'dark' ? 0 : -1"
-      :class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
+      :tabindex="colorMode.preference === 'dark' ? 0 : -1"
+      :class="colorMode.preference === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
       @click="setColorMode('dark')"
     >
       <div i-ri:moon-line />
@@ -21,12 +21,21 @@ function setColorMode(mode: ColorMode) {
     </button>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
-      :tabindex="colorMode.value === 'light' ? 0 : -1"
-      :class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
+      :tabindex="colorMode.preference === 'light' ? 0 : -1"
+      :class="colorMode.preference === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
       @click="setColorMode('light')"
     >
       <div i-ri:sun-line />
       {{ $t('settings.interface.light_mode') }}
     </button>
+    <button
+      btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
+      :tabindex="colorMode.preference === 'system' ? 0 : -1"
+      :class="colorMode.preference === 'system' ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setColorMode('system')"
+    >
+      <div i-ri:computer-line />
+      {{ $t('settings.interface.system_mode') }}
+    </button>
   </div>
 </template>
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 951be211..6a90c65d 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -1,7 +1,7 @@
 import { DEFAULT_FONT_SIZE, DEFAULT_LANGUAGE } from '~/constants'
 
 export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type ColorMode = 'light' | 'dark'
+export type ColorMode = 'light' | 'dark' | 'system'
 
 export interface FeatureFlags {
   experimentalVirtualScroller: boolean
diff --git a/locales/en-GB.json b/locales/en-GB.json
index 7484b973..5ee578fd 100644
--- a/locales/en-GB.json
+++ b/locales/en-GB.json
@@ -202,7 +202,8 @@
       "default": " (default)",
       "font_size": "Font Size",
       "label": "Interface",
-      "light_mode": "Light Mode"
+      "light_mode": "Light Mode",
+      "system_mode": "System"
     },
     "language": {
       "display_language": "Display Language",
diff --git a/locales/en-US.json b/locales/en-US.json
index 1dc8d113..942f46dd 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -267,7 +267,8 @@
         "sm": "Small",
         "xl": "Extra large",
         "xs": "Extra small"
-      }
+      },
+      "system_mode": "System"
     },
     "language": {
       "display_language": "Display Language",