From 1b6646dccb736c97d11e20cd4c6267734c685370 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Tue, 9 Jun 2026 04:38:01 +0530
Subject: [PATCH 1/2] feat: add UColorModeButton component for add system theme
 selection

---
 docs/app/components/UColorModeButton.vue | 55 ++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 docs/app/components/UColorModeButton.vue

diff --git a/docs/app/components/UColorModeButton.vue b/docs/app/components/UColorModeButton.vue
new file mode 100644
index 0000000000..feb92b35f4
--- /dev/null
+++ b/docs/app/components/UColorModeButton.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const appConfig = useAppConfig()
+
+const modes = computed(() => [
+  {
+    label: 'System',
+    value: 'system',
+    icon: appConfig.ui.icons.system,
+  },
+  {
+    label: 'Light',
+    value: 'light',
+    icon: appConfig.ui.icons.light,
+  },
+  {
+    label: 'Dark',
+    value: 'dark',
+    icon: appConfig.ui.icons.dark,
+  },
+])
+
+const activeMode = computed(() => {
+  return modes.value.find(mode => mode.value === colorMode.preference) || modes.value[0]
+})
+
+const items = computed(() => [
+  modes.value.map(mode => ({
+    ...mode,
+    type: 'checkbox' as const,
+    checked: colorMode.preference === mode.value,
+    onSelect() {
+      colorMode.preference = mode.value
+    },
+  })),
+])
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="items"
+    :content="{
+      align: 'end',
+      side: 'bottom',
+      sideOffset: 8,
+    }"
+  >
+    <UButton
+      color="neutral"
+      variant="ghost"
+      :icon="activeMode?.icon"
+      :aria-label="`Color mode: ${activeMode?.label}`"
+    />
+  </UDropdownMenu>
+</template>

From 46e7e9129cc1985e39e7f379ccb4b3a99b53abf6 Mon Sep 17 00:00:00 2001
From: Your Name <your@email.com>
Date: Wed, 10 Jun 2026 02:08:26 +0530
Subject: [PATCH 2/2] fix: update theme labels to use translation function

---
 docs/app/components/UColorModeButton.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/UColorModeButton.vue b/docs/app/components/UColorModeButton.vue
index feb92b35f4..a01ba19584 100644
--- a/docs/app/components/UColorModeButton.vue
+++ b/docs/app/components/UColorModeButton.vue
@@ -1,20 +1,26 @@
 <script setup lang="ts">
 const colorMode = useColorMode()
 const appConfig = useAppConfig()
+const { t } = useDocusI18n()
+
+function themeLabel(key: string, fallback: string) {
+  const label = t(key)
+  return label && label !== key ? label : fallback
+}
 
 const modes = computed(() => [
   {
-    label: 'System',
+    label: themeLabel('settings.theme_system', 'System'),
     value: 'system',
     icon: appConfig.ui.icons.system,
   },
   {
-    label: 'Light',
+    label: themeLabel('settings.theme_light', 'Light'),
     value: 'light',
     icon: appConfig.ui.icons.light,
   },
   {
-    label: 'Dark',
+    label: themeLabel('settings.theme_dark', 'Dark'),
     value: 'dark',
     icon: appConfig.ui.icons.dark,
   },