From c6da1b4974b7e60a456eed651fdadb9b8bdc3387 Mon Sep 17 00:00:00 2001
From: bowenliang123 <liang.bowen.123@qq.com>
Date: Tue, 28 Jul 2026 18:14:03 +0800
Subject: [PATCH] feat(web): highlight selected settings options with the
 accent color

---
 .changeset/web-settings-accent-highlight.md                 | 5 +++++
 apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue | 1 +
 apps/kimi-web/src/components/settings/LanguageSwitcher.vue  | 2 +-
 apps/kimi-web/src/components/settings/SettingsDialog.vue    | 3 +++
 apps/kimi-web/src/components/ui/SegmentedControl.vue        | 5 ++++-
 5 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/web-settings-accent-highlight.md

diff --git a/.changeset/web-settings-accent-highlight.md b/.changeset/web-settings-accent-highlight.md
new file mode 100644
index 0000000000..c2ef73228e
--- /dev/null
+++ b/.changeset/web-settings-accent-highlight.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Highlight selected settings options (theme, language, default permission) with the current accent color.
diff --git a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
index 229c933558..f96ca08f39 100644
--- a/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
+++ b/apps/kimi-web/src/components/mobile/MobileSettingsSheet.vue
@@ -338,6 +338,7 @@ watch(
           { value: 'dark', label: t('theme.dark') },
           { value: 'system', label: t('theme.system') },
         ]"
+        variant="tinted"
         @update:model-value="onColorScheme"
       />
     </div>
diff --git a/apps/kimi-web/src/components/settings/LanguageSwitcher.vue b/apps/kimi-web/src/components/settings/LanguageSwitcher.vue
index 974228ceb4..20a85e92af 100644
--- a/apps/kimi-web/src/components/settings/LanguageSwitcher.vue
+++ b/apps/kimi-web/src/components/settings/LanguageSwitcher.vue
@@ -15,5 +15,5 @@ function choose(code: string): void {
 </script>
 
 <template>
-  <SegmentedControl :model-value="locale" :options="options" @update:model-value="choose" />
+  <SegmentedControl :model-value="locale" :options="options" variant="tinted" @update:model-value="choose" />
 </template>
diff --git a/apps/kimi-web/src/components/settings/SettingsDialog.vue b/apps/kimi-web/src/components/settings/SettingsDialog.vue
index 181e4197eb..9bb75072c2 100644
--- a/apps/kimi-web/src/components/settings/SettingsDialog.vue
+++ b/apps/kimi-web/src/components/settings/SettingsDialog.vue
@@ -352,6 +352,7 @@ function archiveTime(iso: string): string {
                   { value: 'dark', label: t('theme.dark') },
                   { value: 'system', label: t('theme.system') },
                 ]"
+                variant="tinted"
                 @update:model-value="emit('setColorScheme', $event as ColorScheme)"
               />
             </div>
@@ -363,6 +364,7 @@ function archiveTime(iso: string): string {
                   { value: 'blue', label: t('theme.accentBlue') },
                   { value: 'mono', label: t('theme.accentBlack') },
                 ]"
+                variant="tinted"
                 @update:model-value="emit('setAccent', $event as Accent)"
               />
             </div>
@@ -506,6 +508,7 @@ function archiveTime(iso: string): string {
                 <SegmentedControl
                   :model-value="defaultPermissionMode"
                   :options="permissionModes.map((m) => ({ value: m, label: t(permissionLabelKey[m]) }))"
+                  variant="tinted"
                   @update:model-value="setDefaultPermissionMode($event as 'manual' | 'auto' | 'yolo')"
                 />
               </div>
diff --git a/apps/kimi-web/src/components/ui/SegmentedControl.vue b/apps/kimi-web/src/components/ui/SegmentedControl.vue
index dbb3f66f00..09fd90414e 100644
--- a/apps/kimi-web/src/components/ui/SegmentedControl.vue
+++ b/apps/kimi-web/src/components/ui/SegmentedControl.vue
@@ -5,13 +5,15 @@ defineProps<{
   modelValue: string;
   options: { value: string; label: string }[];
   size?: 'sm' | 'md';
+  /** `tinted` highlights the selected item with the accent color (settings option pickers). */
+  variant?: 'default' | 'tinted';
 }>();
 
 const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
 </script>
 
 <template>
-  <div class="ui-seg" :class="`ui-seg--${size ?? 'md'}`" role="tablist">
+  <div class="ui-seg" :class="[`ui-seg--${size ?? 'md'}`, { 'ui-seg--tinted': variant === 'tinted' }]" role="tablist">
     <button
       v-for="opt in options"
       :key="opt.value"
@@ -53,5 +55,6 @@ const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
 .ui-seg--sm .ui-seg__item { height: 24px; padding: 0 var(--space-2); font-size: var(--text-sm); }
 .ui-seg__item:hover:not(.is-on) { color: var(--color-text); }
 .ui-seg__item.is-on { background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-xs); }
+.ui-seg--tinted .ui-seg__item.is-on { background: var(--color-accent-soft); color: var(--color-accent); box-shadow: none; }
 .ui-seg__item:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }
 </style>