feat: add option to follow system color setting (#1012)

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

@@ -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"
+      :tabindex="colorMode.preference === 'dark' ? 0 : -1"
-      :class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
+      :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"
+      :tabindex="colorMode.preference === 'light' ? 0 : -1"
-      :class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
+      :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>

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

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",

locales/en-US.json

@@ -267,7 +267,8 @@
         "sm": "Small",
         "xl": "Extra large",
         "xs": "Extra small"
-      }
+      },
+      "system_mode": "System"
     },
     "language": {
       "display_language": "Display Language",