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) {
+
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",