Jocs · Oct 14, 2026 · Oct 13, 2026 · Oct 14, 2026
diff --git a/packages/desktop/src/renderer/src/prefComponents/common/separator/index.vue b/packages/desktop/src/renderer/src/prefComponents/common/separator/index.vue
@@ -5,7 +5,7 @@
 <style>
 .pref-separator {
   margin: 12px 0;
-  height: 2px;
-  background: var(--editorColor04);
+  height: 1px;
+  background: var(--tableBorderColor);
 }
 </style>
diff --git a/packages/desktop/src/renderer/src/prefComponents/theme/index.vue b/packages/desktop/src/renderer/src/prefComponents/theme/index.vue
@@ -1,6 +1,41 @@
 <template>
   <div class="pref-theme">
     <h4>{{ t('preferences.theme.title') }}</h4>
+    <Bool
+      class="follow-system-theme"
+      :description="t('preferences.theme.followSystemTheme')"
+      :bool="followSystemTheme"
+      :on-change="(value) => onSelectChange('followSystemTheme', value)"
+    />
+
+    <div
+      v-if="followSystemTheme"
+      class="notes"
+    >
+      <!-- The marker is punctuation, not prose, so it stays out of the locale files. -->
+      <span aria-hidden="true">*</span> {{ t('preferences.theme.followSystemNote') }}
+    </div>
+
+    <div
+      v-if="followSystemTheme"
+      class="mode-themes-row"
+    >
+      <cur-select
+        :description="t('preferences.theme.lightModeTheme')"
+        :value="lightModeTheme"
+        :options="lightThemeOptions"
+        :on-change="(value) => onSelectChange('lightModeTheme', value)"
+      />
+      <cur-select
+        :description="t('preferences.theme.darkModeTheme')"
+        :value="darkModeTheme"
+        :options="darkThemeOptions"
+        :on-change="(value) => onSelectChange('darkModeTheme', value)"
+      />
+    </div>
+
+    <separator />
+
     <section class="offcial-themes">
       <div
         v-for="themeItem of themes"
@@ -19,36 +54,6 @@
         <div v-html="themeItem.html" />
       </div>
     </section>
-    <separator />
-
-    <Bool
-      :description="t('preferences.theme.followSystemTheme')"
-      :bool="followSystemTheme"
-      :on-change="(value) => onSelectChange('followSystemTheme', value)"
-    />
-
-    <compound v-if="followSystemTheme">
-      <template #head>
-        <h6 class="title">
-          {{ t('preferences.theme.modeThemes') }}
-        </h6>
-      </template>
-      <template #children>
-        <cur-select
-          :description="t('preferences.theme.lightModeTheme')"
-          :value="lightModeTheme"
-          :options="themeOptions"
-          :on-change="(value) => onSelectChange('lightModeTheme', value)"
-        />
-
-        <cur-select
-          :description="t('preferences.theme.darkModeTheme')"
-          :value="darkModeTheme"
-          :options="themeOptions"
-          :on-change="(value) => onSelectChange('darkModeTheme', value)"
-        />
-      </template>
-    </compound>
 
     <div class="custom-css">
       <div class="description">
@@ -91,14 +96,14 @@ import { ref, onMounted } from 'vue'
 import { usePreferencesStore } from '@/store/preferences'
 import type { PreferencesState } from '@/store/preferences'
 import { storeToRefs } from 'pinia'
+import { isDarkThemeId } from 'common/theme'
 import { useI18n } from 'vue-i18n'
 import themeMd from './theme.md?raw'
 import { themes as configThemes } from './config'
 import markdownToHtml from '@/util/markdownToHtml'
 import Bool from '../common/bool/index.vue'
 import CurSelect from '../common/select/index.vue'
 import Separator from '../common/separator/index.vue'
-import Compound from '../common/compound/index.vue'
 import type { PrefSelectOption } from '../common/types'
 
 interface ThemePreview {
@@ -123,6 +128,9 @@ const themeOptions: PrefSelectOption<string>[] = configThemes.map((theme) => ({
   value: theme.name
 }))
 
+const lightThemeOptions = themeOptions.filter((option) => !isDarkThemeId(option.value))
+const darkThemeOptions = themeOptions.filter((option) => isDarkThemeId(option.value))
+
 onMounted(async () => {
   const newThemes: ThemePreview[] = []
   for (const theme of configThemes) {
@@ -141,6 +149,23 @@ const onSelectChange = (type: keyof PreferencesState, value: unknown): void => {
 </script>
 
 <style>
+/* The toggle leads the panel now, so give its label a little more weight — this
+   instance only; `Bool` is shared by every preferences panel. */
+.pref-theme .follow-system-theme .description > span {
+  font-weight: 600;
+}
+
+/* The light/dark mode pickers sit on one row under the "follow system" toggle. */
+.pref-theme .mode-themes-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+.pref-theme .mode-themes-row > * {
+  flex: 1;
+  min-width: 0;
+}
+
 .offcial-themes {
   margin-top: 12px;
   display: grid;

diff --git a/packages/desktop/static/locales/de.json b/packages/desktop/static/locales/de.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "Design",
       "followSystemTheme": "Systemdesign folgen",
+      "followSystemNote": "Wenn Sie dem Systemthema folgen, ist die Themenliste unten gesperrt. Deaktivieren Sie dies, um Themen frei zu wechseln.",
       "modeThemes": "Design-Auswahl",
       "lightModeTheme": "Helles Modus-Design",
       "darkModeTheme": "Dunkles Modus-Design",

diff --git a/packages/desktop/static/locales/en.json b/packages/desktop/static/locales/en.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "Theme",
       "followSystemTheme": "Follow System Theme",
+      "followSystemNote": "Following the system locks the theme list below. Turn this off to switch themes freely.",
       "modeThemes": "Theme Selection",
       "lightModeTheme": "Light mode theme",
       "darkModeTheme": "Dark mode theme",

diff --git a/packages/desktop/static/locales/es.json b/packages/desktop/static/locales/es.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "Tema",
       "followSystemTheme": "Seguir tema del sistema",
+      "followSystemNote": "Seguir el tema del sistema bloquea la lista de temas de abajo. Desactívalo para cambiar de tema libremente.",
       "modeThemes": "Selección de Tema",
       "lightModeTheme": "Tema de modo claro",
       "darkModeTheme": "Tema de modo oscuro",

diff --git a/packages/desktop/static/locales/fr.json b/packages/desktop/static/locales/fr.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "Thème",
       "followSystemTheme": "Suivre le thème du système",
+      "followSystemNote": "Suivre le thème du système verrouille la liste des thèmes ci-dessous. Désactivez cette option pour changer librement de thème.",
       "modeThemes": "Sélection du thème",
       "lightModeTheme": "Thème en mode clair",
       "darkModeTheme": "Thème en mode sombre",

diff --git a/packages/desktop/static/locales/ja.json b/packages/desktop/static/locales/ja.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "テーマ",
       "followSystemTheme": "システムのテーマに従う",
+      "followSystemNote": "システムテーマに従っている間は、下のテーマ一覧を切り替えられません。オフにすると自由に切り替えられます。",
       "modeThemes": "テーマの選択",
       "lightModeTheme": "ライトモードのテーマ",
       "darkModeTheme": "ダークモードのテーマ",

diff --git a/packages/desktop/static/locales/ko.json b/packages/desktop/static/locales/ko.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "테마",
       "followSystemTheme": "시스템 테마 따르기",
+      "followSystemNote": "시스템 테마를 따르는 동안에는 아래 테마 목록을 전환할 수 없습니다. 끄면 자유롭게 전환할 수 있습니다.",
       "modeThemes": "테마 선택",
       "lightModeTheme": "라이트 모드 테마",
       "darkModeTheme": "다크 모드 테마",

diff --git a/packages/desktop/static/locales/nl.json b/packages/desktop/static/locales/nl.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "Thema",
       "followSystemTheme": "Systeemthema volgen",
+      "followSystemNote": "Het systeemthema volgen vergrendelt de themalijst hieronder. Schakel dit uit om vrij van thema te wisselen.",
       "modeThemes": "Themaselectie",
       "lightModeTheme": "Thema lichte modus",
       "darkModeTheme": "Thema donkere modus",

diff --git a/packages/desktop/static/locales/pt.json b/packages/desktop/static/locales/pt.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "Tema",
       "followSystemTheme": "Seguir tema do sistema",
+      "followSystemNote": "Seguir o tema do sistema bloqueia a lista de temas abaixo. Desative esta opção para trocar de tema livremente.",
       "modeThemes": "Seleção de Tema",
       "lightModeTheme": "Tema do modo claro",
       "darkModeTheme": "Tema do modo escuro",

diff --git a/packages/desktop/static/locales/ru.json b/packages/desktop/static/locales/ru.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "Тема",
       "followSystemTheme": "Следовать системной теме",
+      "followSystemNote": "Следование системной теме блокирует список тем ниже. Отключите это, чтобы свободно менять тему.",
       "modeThemes": "Выбор темы",
       "lightModeTheme": "Тема светлого режима",
       "darkModeTheme": "Тема тёмного режима",

diff --git a/packages/desktop/static/locales/tr.json b/packages/desktop/static/locales/tr.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "Tema",
       "followSystemTheme": "Sistem Temasını Takip Et",
+      "followSystemNote": "Sistem temasını izlemek aşağıdaki tema listesini kilitler. Serbestçe tema değiştirmek için bunu kapatın.",
       "modeThemes": "Tema Seçimi",
       "lightModeTheme": "Açık mod teması",
       "darkModeTheme": "Koyu mod teması",

diff --git a/packages/desktop/static/locales/zh-CN.json b/packages/desktop/static/locales/zh-CN.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "主题",
       "followSystemTheme": "跟随系统主题",
+      "followSystemNote": "跟随系统主题时，下方主题列表不可切换。关闭后即可自由切换。",
       "modeThemes": "主题选择",
       "lightModeTheme": "浅色模式主题",
       "darkModeTheme": "深色模式主题",

diff --git a/packages/desktop/static/locales/zh-TW.json b/packages/desktop/static/locales/zh-TW.json
@@ -713,6 +713,7 @@
     "theme": {
       "title": "主題",
       "followSystemTheme": "跟隨系統主題",
+      "followSystemNote": "跟隨系統主題時，下方主題列表無法切換。關閉後即可自由切換。",
       "modeThemes": "主題選擇",
       "lightModeTheme": "淺色模式主題",
       "darkModeTheme": "深色模式主題",