diff --git a/apps/desktop/src/App.vue b/apps/desktop/src/App.vue
index 3961293c29..f3dc10aafe 100644
--- a/apps/desktop/src/App.vue
+++ b/apps/desktop/src/App.vue
@@ -122,7 +122,7 @@ const connectionDialogPrefill = ref<ConnectionDeepLinkDraft | null>(null);
 const connectionDialogInitialTab = ref<ConfigTab | undefined>(undefined);
 const settingsPageTabOpen = ref(false);
 const settingsPageActive = ref(false);
-const settingsInitialTab = ref("editor");
+const settingsInitialTab = ref("appearance");
 const settingsInitialSection = ref<string | undefined>(undefined);
 const showQueryEditorDdlDialog = ref(false);
 const driverStoreTabOpen = ref(false);
@@ -265,7 +265,7 @@ const appVersion = ref("");
 const isClassicLayout = computed(() => settingsStore.editorSettings.appLayout === "classic");
 const updateNotificationsEnabled = computed(() => settingsStore.editorSettings.updateNotificationsEnabled);
 
-function openSettings(initialTab = "editor", initialSection?: string) {
+function openSettings(initialTab = "appearance", initialSection?: string) {
   settingsInitialTab.value = initialTab;
   settingsInitialSection.value = initialSection;
   if (!settingsPageActive.value) {
diff --git a/apps/desktop/src/components/diff/SchemaDiffDeployStep.vue b/apps/desktop/src/components/diff/SchemaDiffDeployStep.vue
index 7af0d54bc6..26d3841a9c 100644
--- a/apps/desktop/src/components/diff/SchemaDiffDeployStep.vue
+++ b/apps/desktop/src/components/diff/SchemaDiffDeployStep.vue
@@ -15,7 +15,7 @@ import { ArrowLeft, Copy, Download, Play, Loader2, PlusCircle, XCircle, ArrowRig
 const { t } = useI18n();
 const { toast } = useToast();
 const settingsStore = useSettingsStore();
-const { isDark } = useTheme();
+const { isDark, themePalette } = useTheme();
 
 const props = defineProps<{
   deploySql: string;
@@ -120,7 +120,7 @@ async function initEditor() {
   const fontSize = settingsStore.editorSettings.fontSize;
   const fontFamily = settingsStore.editorSettings.fontFamily;
 
-  const themeExt = await loadEditorTheme(editorTheme, appAppearance);
+  const themeExt = await loadEditorTheme(editorTheme, appAppearance, undefined, themePalette.value);
   const fontExt = editorFontTheme(EditorView, fontSize, fontFamily, { fixedHeight: true, scrollable: true });
 
   const dialect = createDbxCodeMirrorSqlDialect(langSql, "postgres");
diff --git a/apps/desktop/src/components/editor/EditorSettingsDialog.vue b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
index 0b319e015d..e953e07fce 100644
--- a/apps/desktop/src/components/editor/EditorSettingsDialog.vue
+++ b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
@@ -81,7 +81,7 @@ import { DEFAULT_SQL_SNIPPETS } from "@/lib/sql/sqlCompletion";
 import AiProviderLogo from "@/components/icons/AiProviderLogo.vue";
 import AppLogo from "@/components/icons/AppLogo.vue";
 import SqlFormatterSettingsPanel from "./SqlFormatterSettingsPanel.vue";
-import type { AppThemeAppearance } from "@/lib/app/appTheme";
+import { APP_THEME_PALETTES, type AppThemeAppearance, type AppThemeMode, type AppThemePalette } from "@/lib/app/appTheme";
 import { useConnectionStore } from "@/stores/connectionStore";
 import { useSavedSqlStore } from "@/stores/savedSqlStore";
 import { currentLocale, setLocale, type Locale } from "@/i18n";
@@ -95,7 +95,23 @@ const { toast } = useToast();
 const settingsStore = useSettingsStore();
 const connectionStore = useConnectionStore();
 const savedSqlStore = useSavedSqlStore();
-const { isDark, themeMode, setThemeMode } = useTheme();
+const { isDark, themeMode, themePalette, setThemeMode, setThemePalette } = useTheme();
+
+const appThemePaletteOptions = computed(
+  (): Array<{ value: AppThemePalette; label: string; previewColor: string }> =>
+    APP_THEME_PALETTES.map((palette) => ({
+      value: palette.value,
+      label: t(palette.labelKey),
+      previewColor: palette.previewColor,
+    })),
+);
+const selectedThemePaletteOption = computed(() => appThemePaletteOptions.value.find((option) => option.value === themePalette.value) ?? appThemePaletteOptions.value[0]);
+const selectedLocaleOption = computed(() => LOCALE_OPTIONS.find((locale) => locale.value === currentLocale()) ?? LOCALE_OPTIONS[0]);
+const appThemeModeOptions = computed(() => [
+  { value: "light" as AppThemeMode, label: t("toolbar.themeLight"), icon: Sun },
+  { value: "dark" as AppThemeMode, label: t("toolbar.themeDark"), icon: Moon },
+  { value: "system" as AppThemeMode, label: t("toolbar.themeSystem"), icon: SunMoon },
+]);
 
 let cachedSystemFonts: string[] | null = null;
 let pendingSystemFonts: Promise<string[]> | null = null;
@@ -274,7 +290,9 @@ const systemFontsLoaded = ref(false);
 const uiScaleOptions = [0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
 const fontSearchTriggerClass =
   "h-8 w-full max-w-none justify-between gap-1.5 rounded-[6px] border border-input bg-transparent py-2 pl-2.5 pr-2 text-sm font-normal shadow-none hover:bg-transparent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-expanded:bg-transparent dark:bg-input/30 dark:hover:bg-input/50";
+const appearanceFontSearchTriggerClass = `${fontSearchTriggerClass} gap-0 pl-2 pr-1.5`;
 const fontSearchTriggerIconClass = "size-4 text-muted-foreground";
+const appearanceFontSearchTriggerIconClass = "size-2.5 text-muted-foreground";
 const disconnectTabHandlingModeDescriptionKey = computed(() => {
   switch (editDisconnectTabHandlingMode.value) {
     case "close-tabs":
@@ -1123,14 +1141,14 @@ function setSidebarActivation(value: "single" | "double") {
   editSidebarActivation.value = value;
 }
 
-const activeSettingsTab = ref("editor");
+const activeSettingsTab = ref("appearance");
 const isWeb = !isTauriRuntime();
 const displayedAppVersion = computed(() => (props.appVersion ? `v${props.appVersion}` : ""));
 type SettingsCategory = "editor" | "formatter" | "appearance" | "navigation" | "data" | "shortcuts" | "snippets" | "sync" | "ai" | "mcp" | "security" | "about";
 const settingsCategoryNav = computed<{ value: SettingsCategory; label: string }[]>(() => [
+  { value: "appearance", label: t("settings.appearanceTab") },
   { value: "editor", label: t("settings.editorTab") },
   { value: "formatter", label: t("settings.sqlFormatterTab") },
-  { value: "appearance", label: t("settings.appearanceTab") },
   { value: "navigation", label: t("settings.navigationTab") },
   { value: "data", label: t("settings.dataTab") },
   { value: "shortcuts", label: t("settings.shortcutsTab") },
@@ -1148,7 +1166,7 @@ function hasSettingsApplyFooter(value: SettingsCategory): boolean {
 }
 
 function settingsCategoryButton(value: SettingsCategory): string {
-  return ["w-full rounded-md px-3 py-2 text-left text-sm transition-colors", value === activeSettingsTab.value ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"].join(" ");
+  return ["w-auto shrink-0 whitespace-nowrap rounded-md px-3 py-2 text-left text-sm transition-colors lg:w-full", value === activeSettingsTab.value ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"].join(" ");
 }
 
 function openExternalUrl(url: string) {
@@ -1477,7 +1495,7 @@ watch(
   () => settingsVisible.value,
   async (open) => {
     if (open) {
-      activeSettingsTab.value = props.initialTab || "editor";
+      activeSettingsTab.value = props.initialTab || "appearance";
       passwordMessage.value = "";
       oldPassword.value = "";
       newPassword.value = "";
@@ -1962,12 +1980,14 @@ const previewSettings = computed<{
   fontSize: number;
   theme: EditorTheme;
   appAppearance: AppThemeAppearance;
+  appPalette: AppThemePalette;
   customColors?: CustomThemeColors;
 }>(() => ({
   fontFamily: editFontFamily.value,
   fontSize: editFontSize.value,
   theme: editTheme.value,
   appAppearance: isDark.value ? "dark" : "light",
+  appPalette: themePalette.value,
   customColors: getPreviewCustomThemeColors(),
 }));
 
@@ -2017,7 +2037,7 @@ watch(
   async ([ss]) => {
     if (!previewView.value || !fontThemeComp || !themeComp || !editorViewModule) return;
 
-    const themeExt = await loadEditorTheme(ss.theme, ss.appAppearance, ss.customColors);
+    const themeExt = await loadEditorTheme(ss.theme, ss.appAppearance, ss.customColors, ss.appPalette);
     previewView.value.dispatch({
       effects: [themeComp.reconfigure(themeExt), fontThemeComp.reconfigure(editorFontTheme(editorViewModule.EditorView, ss.fontSize, ss.fontFamily))],
     });
@@ -2065,7 +2085,7 @@ watch(previewRef, async (el) => {
   previewSqlDiagnostics = previewDiagnosticsForSql(currentPreviewSql());
 
   const ss = previewSettings.value;
-  const themeExt = await loadEditorTheme(ss.theme, ss.appAppearance, ss.customColors);
+  const themeExt = await loadEditorTheme(ss.theme, ss.appAppearance, ss.customColors, ss.appPalette);
   const diagnosticTheme = EditorView.baseTheme({
     ".cm-settings-preview-sql-error": {
       textDecoration: "underline wavy var(--destructive)",
@@ -2125,8 +2145,8 @@ onUnmounted(cleanupPreviewEditor);
         </component>
       </DialogHeader>
 
-      <div class="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden sm:flex-row">
-        <nav class="settingsCategoryNav flex min-h-0 shrink-0 gap-1 overflow-x-auto border-b pb-3 sm:w-40 sm:flex-col sm:overflow-x-hidden sm:overflow-y-auto sm:border-b-0 sm:border-r sm:pb-0 sm:pr-3">
+      <div class="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden lg:flex-row">
+        <nav class="settingsCategoryNav flex min-h-0 shrink-0 gap-1 overflow-x-auto border-b pb-3 lg:w-40 lg:flex-col lg:overflow-x-hidden lg:overflow-y-auto lg:border-b-0 lg:border-r lg:pb-0 lg:pr-3">
           <button v-for="category in settingsCategoryNav" :key="category.value" type="button" :class="settingsCategoryButton(category.value)" @click="activeSettingsTab = category.value">
             {{ category.label }}
           </button>
@@ -2374,16 +2394,25 @@ onUnmounted(cleanupPreviewEditor);
             </section>
 
             <section v-else-if="activeSettingsTab === 'appearance'" class="flex flex-col gap-5 py-2">
-              <div class="grid gap-4 md:grid-cols-[minmax(220px,280px)_minmax(260px,1fr)]">
+              <div class="grid gap-x-1.5 gap-y-4 sm:grid-cols-[minmax(0,127fr)_minmax(0,127fr)_minmax(0,191fr)_minmax(0,130fr)]">
                 <div class="space-y-2 min-w-0">
-                  <Label>{{ t("settings.languageTitle") }}</Label>
+                  <div class="flex h-9 items-end">
+                    <Label class="whitespace-normal leading-tight">{{ t("settings.languageTitle") }}</Label>
+                  </div>
                   <Select :model-value="currentLocale()" @update:model-value="onLocaleChange">
-                    <SelectTrigger class="h-8 w-full">
-                      <SelectValue />
+                    <SelectTrigger class="h-8 w-full gap-0.5 px-0.5">
+                      <SelectValue>
+                        <span v-if="selectedLocaleOption" class="flex min-w-0 items-center gap-0.5">
+                          <span class="inline-flex h-5 shrink-0 items-center justify-center text-sm font-medium leading-none">
+                            {{ selectedLocaleOption.flag }}
+                          </span>
+                          <span class="truncate">{{ selectedLocaleOption.label }}</span>
+                        </span>
+                      </SelectValue>
                     </SelectTrigger>
-                    <SelectContent>
+                    <SelectContent class="w-[150px]">
                       <SelectItem v-for="locale in LOCALE_OPTIONS" :key="locale.value" :value="locale.value">
-                        <div class="flex items-center gap-2">
+                        <div class="flex items-center gap-1">
                           <span class="inline-flex h-5 w-6 shrink-0 items-center justify-center text-sm font-medium leading-none">
                             {{ locale.flag }}
                           </span>
@@ -2395,7 +2424,36 @@ onUnmounted(cleanupPreviewEditor);
                 </div>
 
                 <div class="space-y-2 min-w-0">
-                  <Label>{{ t("settings.uiFontFamily") }}</Label>
+                  <div class="flex h-9 items-end">
+                    <Label class="whitespace-normal leading-tight">{{ t("settings.colorTheme") }}</Label>
+                  </div>
+                  <Select :model-value="themePalette" @update:model-value="(value) => setThemePalette(value as AppThemePalette)">
+                    <SelectTrigger class="h-8 w-full gap-1">
+                      <SelectValue :placeholder="t('settings.selectColorTheme')">
+                        <span v-if="selectedThemePaletteOption" class="flex min-w-0 items-center gap-1">
+                          <span class="h-3 w-3 shrink-0 rounded-full border border-border shadow-xs" :style="{ background: selectedThemePaletteOption.previewColor }" />
+                          <span class="truncate">{{ selectedThemePaletteOption.label }}</span>
+                        </span>
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="option in appThemePaletteOptions" :key="option.value" :value="option.value">
+                        <div class="flex items-center gap-2">
+                          <span class="h-3 w-3 rounded-full border border-border shadow-xs" :style="{ background: option.previewColor }" />
+                          {{ option.label }}
+                        </div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div class="space-y-2 min-w-0">
+                  <div class="flex h-9 items-end gap-1">
+                    <Label class="min-w-0 whitespace-normal leading-tight">{{ t("settings.uiFontFamily") }}</Label>
+                    <HelpTooltip :label="t('settings.uiFontFamily')" trigger-class="[&_svg]:h-3 [&_svg]:w-3" content-class="max-w-64">
+                      <p>{{ t("settings.uiFontFamilyDescription") }}</p>
+                    </HelpTooltip>
+                  </div>
                   <SearchableSelect
                     :model-value="editUiFontFamily"
                     :options="uiFontOptions"
@@ -2406,8 +2464,8 @@ onUnmounted(cleanupPreviewEditor);
                     allow-custom
                     :display-name="displayUiFontFamily"
                     :normalize-custom="normalizeCustomFontFamilyInput"
-                    :trigger-class="fontSearchTriggerClass"
-                    :trigger-icon-class="fontSearchTriggerIconClass"
+                    :trigger-class="appearanceFontSearchTriggerClass"
+                    :trigger-icon-class="appearanceFontSearchTriggerIconClass"
                     content-class="w-[var(--reka-popover-trigger-width)] min-w-[260px]"
                     @update:model-value="onUiFontFamilyChange"
                     @update:open="(open: boolean) => open && loadSystemFontOptions()"
@@ -2426,26 +2484,46 @@ onUnmounted(cleanupPreviewEditor);
                       </span>
                     </template>
                   </SearchableSelect>
-                  <p class="text-xs text-muted-foreground">{{ t("settings.uiFontFamilyDescription") }}</p>
+                </div>
+
+                <div class="space-y-2 min-w-0">
+                  <div class="flex h-9 items-end gap-1">
+                    <Label class="min-w-0 whitespace-normal leading-tight">{{ t("settings.uiScale") }}</Label>
+                    <HelpTooltip :label="t('settings.uiScale')" trigger-class="[&_svg]:h-3 [&_svg]:w-3" content-class="max-w-64">
+                      <p>{{ t("settings.uiScaleDescription") }}</p>
+                    </HelpTooltip>
+                  </div>
+                  <Select
+                    :model-value="String(editUiScale)"
+                    @update:model-value="
+                      (value: any) => {
+                        const next = Number(value);
+                        if (Number.isFinite(next)) editUiScale = next;
+                      }
+                    "
+                  >
+                    <SelectTrigger class="h-8 w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem v-for="scale in uiScaleOptions" :key="scale" :value="String(scale)" class="pl-2.5"> {{ Math.round(scale * 100) }}% </SelectItem>
+                    </SelectContent>
+                  </Select>
                 </div>
               </div>
 
               <div class="space-y-2">
                 <Label>{{ t("settings.theme") }}</Label>
-                <div class="flex gap-2">
+                <div class="flex flex-wrap gap-2">
                   <Button
-                    v-for="option in [
-                      { value: 'light', label: t('toolbar.themeLight'), icon: Sun },
-                      { value: 'dark', label: t('toolbar.themeDark'), icon: Moon },
-                      { value: 'system', label: t('toolbar.themeSystem'), icon: SunMoon },
-                    ]"
+                    v-for="option in appThemeModeOptions"
                     :key="option.value"
                     type="button"
                     variant="outline"
                     size="sm"
-                    class="h-auto gap-1.5 px-3 py-1.5"
-                    :class="themeMode === option.value ? 'border-blue-300 ring-2 ring-blue-300/50' : ''"
-                    @click="setThemeMode(option.value as 'light' | 'dark' | 'system')"
+                    class="h-8 gap-1.5 rounded-[6px] px-3"
+                    :class="themeMode === option.value ? 'border-primary/40 bg-primary/10 text-primary ring-1 ring-primary/30' : 'text-foreground'"
+                    @click="setThemeMode(option.value)"
                   >
                     <component :is="option.icon" class="h-3.5 w-3.5" />
                     {{ option.label }}
@@ -2455,29 +2533,6 @@ onUnmounted(cleanupPreviewEditor);
 
               <Separator />
 
-              <div class="space-y-2">
-                <Label>{{ t("settings.uiScale") }}</Label>
-                <Select
-                  :model-value="String(editUiScale)"
-                  @update:model-value="
-                    (value: any) => {
-                      const next = Number(value);
-                      if (Number.isFinite(next)) editUiScale = next;
-                    }
-                  "
-                >
-                  <SelectTrigger class="min-w-36">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem v-for="scale in uiScaleOptions" :key="scale" :value="String(scale)" class="pl-2.5"> {{ Math.round(scale * 100) }}% </SelectItem>
-                  </SelectContent>
-                </Select>
-                <p class="text-xs text-muted-foreground">{{ t("settings.uiScaleDescription") }}</p>
-              </div>
-
-              <Separator />
-
               <div class="space-y-2">
                 <Label>{{ t("settings.appLayout") }}</Label>
                 <div class="grid grid-cols-2 gap-2">
diff --git a/apps/desktop/src/components/editor/QueryEditor.vue b/apps/desktop/src/components/editor/QueryEditor.vue
index b37aa0eac4..17db614032 100644
--- a/apps/desktop/src/components/editor/QueryEditor.vue
+++ b/apps/desktop/src/components/editor/QueryEditor.vue
@@ -109,7 +109,7 @@ let latestViewport: { scrollTop: number; scrollLeft: number } | undefined = prop
 let latestSelection: { anchor: number; head: number } | undefined = props.initialSelection;
 const connectionStore = useConnectionStore();
 const settingsStore = useSettingsStore();
-const { isDark } = useTheme();
+const { isDark, themePalette } = useTheme();
 const { t } = useI18n();
 const { toast } = useToast();
 
@@ -2295,7 +2295,7 @@ onMounted(async () => {
   const dialect = createDbxCodeMirrorSqlDialect(langSql, props.dialect);
 
   const initialSettings = settingsStore.editorSettings;
-  const theme = await loadEditorTheme(initialSettings.theme, editorThemeAppearance(), getCurrentCustomThemeColors());
+  const theme = await loadEditorTheme(initialSettings.theme, editorThemeAppearance(), getCurrentCustomThemeColors(), themePalette.value);
   if (initialSettings.vimModeEnabled) {
     await ensureCodeMirrorVim();
   }
@@ -2643,7 +2643,7 @@ onMounted(async () => {
     if (!view.value || !codeMirrorTheme) return;
     const settings = settingsStore.editorSettings;
     const themeColors = settings.theme === "custom" ? getCurrentCustomThemeColors() : settings.customThemeColors;
-    const themeExt = await loadEditorTheme(settings.theme, editorThemeAppearance(), themeColors);
+    const themeExt = await loadEditorTheme(settings.theme, editorThemeAppearance(), themeColors, themePalette.value);
     view.value.dispatch({
       effects: [codeMirrorTheme.reconfigure(themeExt)],
     });
@@ -2724,7 +2724,7 @@ function getCurrentCustomThemeColors() {
 
 // Reactively apply editor settings changes
 watch(
-  [queryEditorAppearanceSettings, () => isDark.value],
+  [queryEditorAppearanceSettings, () => isDark.value, () => themePalette.value],
   async ([ss]) => {
     if (!view.value || !codeMirrorTheme || !fontThemeComp || !wordWrapComp || !vimModeComp || !runKeymapComp || !editorViewModule) {
       return;
@@ -2734,7 +2734,7 @@ watch(
     }
     syncEditorFontCssVars(liveFontSize.value, ss.fontFamily);
     const themeColors = getCurrentCustomThemeColors();
-    const [themeExt] = await Promise.all([loadEditorTheme(ss.theme, editorThemeAppearance(), themeColors), ss.vimModeEnabled ? ensureCodeMirrorVim() : Promise.resolve(false)]);
+    const [themeExt] = await Promise.all([loadEditorTheme(ss.theme, editorThemeAppearance(), themeColors, themePalette.value), ss.vimModeEnabled ? ensureCodeMirrorVim() : Promise.resolve(false)]);
     if (!view.value || !codeMirrorTheme || !wordWrapComp || !vimModeComp || !runKeymapComp || !editorViewModule) {
       return;
     }
diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index ed6079c7b2..6901ac5e9d 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -169,7 +169,7 @@ const connectionStore = useConnectionStore();
 const queryStore = useQueryStore();
 const settingsStore = useSettingsStore();
 const tableFontSize = computed(() => settingsStore.editorSettings.tableFontSize);
-const { isDark } = useTheme();
+const { isDark, themePalette } = useTheme();
 const { toast } = useToast();
 const { highlight } = useSqlHighlighter();
 const binaryCellDownloadMenuItems = computed(() =>
@@ -4655,6 +4655,7 @@ let dialogJsonPreviewEditor: UseCellDetailEditorReturn | null = null;
 
 const editorThemeAccessor = () => settingsStore.editorSettings.theme;
 const editorAppAppearance = () => (isDark.value ? "dark" : "light") as import("@/lib/app/appTheme").AppThemeAppearance;
+const editorAppPalette = () => themePalette.value;
 const editorFontSize = () => settingsStore.editorSettings.fontSize;
 const editorFontFamily = () => settingsStore.editorSettings.fontFamily;
 const SIDE_DETAIL_EDITOR_MIN_HEIGHT = 160;
@@ -4681,6 +4682,7 @@ watch(detailsEditorContainer, async (el) => {
       onEscape: () => cancelDetailEdit(),
       editorTheme: editorThemeAccessor,
       appAppearance: editorAppAppearance,
+      appPalette: editorAppPalette,
       fontSize: editorFontSize,
       fontFamily: editorFontFamily,
     });
@@ -4701,6 +4703,7 @@ watch(valueEditorContainer, async (el) => {
       onBlur: () => commitValueEditorEdit(),
       editorTheme: editorThemeAccessor,
       appAppearance: editorAppAppearance,
+      appPalette: editorAppPalette,
       fontSize: editorFontSize,
       fontFamily: editorFontFamily,
     });
@@ -4718,6 +4721,7 @@ watch(sideJsonPreviewContainer, async (el) => {
       readOnly: true,
       editorTheme: editorThemeAccessor,
       appAppearance: editorAppAppearance,
+      appPalette: editorAppPalette,
       fontSize: editorFontSize,
       fontFamily: editorFontFamily,
     });
@@ -4735,6 +4739,7 @@ watch(dialogJsonPreviewContainer, async (el) => {
       readOnly: true,
       editorTheme: editorThemeAccessor,
       appAppearance: editorAppAppearance,
+      appPalette: editorAppPalette,
       fontSize: editorFontSize,
       fontFamily: editorFontFamily,
     });
@@ -5180,7 +5185,7 @@ const canvasSurfaceWidth = computed(() => {
   if (vw <= 0) return total;
   return Math.min(vw, total);
 });
-const canvasRenderStyleKey = computed(() => `${settingsStore.editorSettings.theme}:${settingsStore.editorSettings.uiScale}:${canvasBackingPixelRatio.value}:${isDark.value}:${settingsStore.editorSettings.fontFamily}:${tableFontSize.value}`);
+const canvasRenderStyleKey = computed(() => `${settingsStore.editorSettings.theme}:${settingsStore.editorSettings.uiScale}:${canvasBackingPixelRatio.value}:${isDark.value}:${themePalette.value}:${settingsStore.editorSettings.fontFamily}:${tableFontSize.value}`);
 const CANVAS_MOUSE_WHEEL_SCROLL_MULTIPLIER = 1.5;
 const CANVAS_TRACKPAD_DELTA_THRESHOLD = 40;
 let canvasResizeObserver: ResizeObserver | null = null;
diff --git a/apps/desktop/src/components/layout/AppSidebar.vue b/apps/desktop/src/components/layout/AppSidebar.vue
index 829d5dcbfc..775104ace4 100644
--- a/apps/desktop/src/components/layout/AppSidebar.vue
+++ b/apps/desktop/src/components/layout/AppSidebar.vue
@@ -148,9 +148,9 @@ defineExpose({ focusSearch });
 </script>
 
 <template>
-  <div class="h-full shrink-0 relative select-none" :class="classicLayout ? '' : 'rounded-md border border-border/80 bg-background'" :style="{ width: sidebarWidth + 'px' }">
+  <div class="app-sidebar-panel h-full shrink-0 relative select-none" :class="classicLayout ? '' : 'rounded-md border border-border/80 bg-background'" :style="{ width: sidebarWidth + 'px' }">
     <div class="h-full flex flex-col overflow-hidden">
-      <div class="flex items-center gap-px px-3 text-xs font-medium text-muted-foreground border-b bg-muted/20" :class="classicLayout ? 'h-9' : 'h-10'">
+      <div class="app-sidebar-toolbar flex items-center gap-px px-3 text-xs font-medium text-muted-foreground border-b bg-muted/20" :class="classicLayout ? 'h-9' : 'h-10'">
         <span class="flex self-stretch items-center truncate" data-tauri-drag-region>{{ t("sidebar.connections") }}</span>
         <span class="flex-1 self-stretch" data-tauri-drag-region />
         <template v-if="showConnectionMultiSelectToolbar">
diff --git a/apps/desktop/src/components/layout/AppTabBar.vue b/apps/desktop/src/components/layout/AppTabBar.vue
index 21ddfe8329..fcb2f4142c 100644
--- a/apps/desktop/src/components/layout/AppTabBar.vue
+++ b/apps/desktop/src/components/layout/AppTabBar.vue
@@ -524,7 +524,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
 </script>
 
 <template>
-  <div v-if="queryStore.tabs.length > 0 || driverStoreOpen || settingsPageOpen" class="relative flex w-full min-w-0 shrink-0 overflow-hidden border-b" :class="[isClassicLayout ? 'bg-muted' : 'bg-background', hasFixedTabs ? 'flex-col' : '']">
+  <div v-if="queryStore.tabs.length > 0 || driverStoreOpen || settingsPageOpen" class="app-tab-bar relative flex w-full min-w-0 shrink-0 overflow-hidden border-b" :class="[isClassicLayout ? 'bg-muted' : 'bg-background', hasFixedTabs ? 'flex-col' : '']">
     <div class="flex w-full min-w-0 shrink-0 overflow-hidden" :class="isClassicLayout ? 'h-9 items-stretch' : 'h-10 items-center px-2'">
       <div class="app-tab-strip relative h-full min-w-0 flex-1 overflow-hidden">
         <div v-if="showRegularTabScrollbar" class="app-tab-scrollbar" :class="{ 'app-tab-scrollbar--dragging': isScrollbarDragging }" @pointerdown="startScrollbarDrag">
diff --git a/apps/desktop/src/components/layout/AppToolbar.vue b/apps/desktop/src/components/layout/AppToolbar.vue
index bd20b4e78a..e156cfe240 100644
--- a/apps/desktop/src/components/layout/AppToolbar.vue
+++ b/apps/desktop/src/components/layout/AppToolbar.vue
@@ -10,7 +10,7 @@ import ExportProgressPopover from "@/components/export/ExportProgressPopover.vue
 import { shouldReserveMacTrafficLightInset, useWindowControls } from "@/composables/useWindowControls";
 import { useToast } from "@/composables/useToast";
 import { useSettingsStore } from "@/stores/settingsStore";
-import type { AppThemeMode } from "@/lib/app/appTheme";
+import { isSystemAppThemeMode, type AppThemeMode } from "@/lib/app/appTheme";
 
 const GithubIcon = {
   render() {
@@ -61,14 +61,15 @@ const toolbarItems = computed(() => settingsStore.editorSettings.toolbarItems);
 const { isMac, isDesktop, showControls, isMaximized, isFullscreen, minimize, toggleMaximize, close } = useWindowControls();
 
 const themeTriggerIcon = computed(() => {
-  if (props.themeMode === "system") return SunMoon;
+  if (isSystemAppThemeMode(props.themeMode)) return SunMoon;
   return props.isDark ? Moon : Sun;
 });
 
+const themeCycle: AppThemeMode[] = ["light", "dark", "system"];
+
 function nextThemeMode(mode: AppThemeMode): AppThemeMode {
-  if (mode === "light") return "dark";
-  if (mode === "dark") return "system";
-  return "light";
+  const index = themeCycle.indexOf(mode);
+  return themeCycle[(index + 1) % themeCycle.length] ?? themeCycle[0];
 }
 
 function themeModeLabel(mode: AppThemeMode): string {
@@ -362,7 +363,7 @@ const toolbarDropdownTriggerClass = `inline-flex h-8 items-center gap-1 rounded-
 </script>
 
 <template>
-  <div ref="toolbarEl" class="h-10 flex items-center gap-1 px-2 border-b bg-muted/30 shrink-0 overflow-hidden" :class="{ 'pl-17.5': shouldReserveMacTrafficLightInset(isMac, isFullscreen, isDesktop) }" data-tauri-drag-region @dblclick="onToolbarDblClick">
+  <div ref="toolbarEl" class="app-toolbar h-10 flex items-center gap-1 px-2 border-b bg-muted/30 shrink-0 overflow-hidden" :class="{ 'pl-17.5': shouldReserveMacTrafficLightInset(isMac, isFullscreen, isDesktop) }" data-tauri-drag-region @dblclick="onToolbarDblClick">
     <Button variant="ghost" size="sm" :class="toolbarTextButtonClass" @click="emit('new-connection')">
       <DatabaseZap class="h-3.5 w-3.5" />
       <span :class="toolbarTextLabelClass">{{ t("toolbar.newConnection") }}</span>
diff --git a/apps/desktop/src/components/layout/EditorToolbar.vue b/apps/desktop/src/components/layout/EditorToolbar.vue
index db46d60d0f..baa8765249 100644
--- a/apps/desktop/src/components/layout/EditorToolbar.vue
+++ b/apps/desktop/src/components/layout/EditorToolbar.vue
@@ -145,7 +145,7 @@ function connectionById(connectionId: string): ConnectionConfig | undefined {
 </script>
 
 <template>
-  <div class="h-9 shrink-0 border-b bg-background/80 px-3 flex items-center gap-1 text-xs text-muted-foreground relative z-10" :style="toolbarStyle">
+  <div class="app-editor-toolbar h-9 shrink-0 border-b bg-background/80 px-3 flex items-center gap-1 text-xs text-muted-foreground relative z-10" :style="toolbarStyle">
     <div class="flex items-center gap-0.5">
       <Tooltip>
         <TooltipTrigger as-child>
diff --git a/apps/desktop/src/components/nacos/NacosAdminConsole.vue b/apps/desktop/src/components/nacos/NacosAdminConsole.vue
index c6e4635566..522689c24f 100644
--- a/apps/desktop/src/components/nacos/NacosAdminConsole.vue
+++ b/apps/desktop/src/components/nacos/NacosAdminConsole.vue
@@ -41,7 +41,7 @@ const { toast } = useToast();
 const { t } = useI18n();
 const settingsStore = useSettingsStore();
 const connectionStore = useConnectionStore();
-const { isDark } = useTheme();
+const { isDark, themePalette } = useTheme();
 const activeTab = ref<AdminTab>("configs");
 const connectionInfo = ref<NacosConnectionInfo | null>(null);
 const connectionError = ref("");
@@ -191,7 +191,7 @@ async function mountConfigEditor() {
     configLanguageExtension(configType.value),
   ]);
   const editorSettings = settingsStore.editorSettings;
-  const theme = await loadEditorTheme(editorSettings.theme, editorThemeAppearance(), currentCustomThemeColors());
+  const theme = await loadEditorTheme(editorSettings.theme, editorThemeAppearance(), currentCustomThemeColors(), themePalette.value);
   const view = new EditorView({
     parent: configEditorHost.value,
     state: EditorState.create({
@@ -819,11 +819,11 @@ watch(historyCompareOpen, (value) => {
 });
 
 watch(
-  [() => settingsStore.editorSettings, () => isDark.value],
+  [() => settingsStore.editorSettings, () => isDark.value, () => themePalette.value],
   async ([settings]) => {
     const view = configEditorView.value;
     if (!view) return;
-    const [{ EditorView }, theme] = await Promise.all([import("@codemirror/view"), loadEditorTheme(settings.theme, editorThemeAppearance(), currentCustomThemeColors())]);
+    const [{ EditorView }, theme] = await Promise.all([import("@codemirror/view"), loadEditorTheme(settings.theme, editorThemeAppearance(), currentCustomThemeColors(), themePalette.value)]);
     if (configEditorView.value !== view) return;
     view.dispatch({
       effects: [configEditorTheme.reconfigure(theme), configEditorFontTheme.reconfigure(editorFontTheme(EditorView, settings.fontSize, settings.fontFamily, { fixedHeight: true, scrollable: true }))],
diff --git a/apps/desktop/src/components/objects/DdlViewDialog.vue b/apps/desktop/src/components/objects/DdlViewDialog.vue
index a41f02f50a..f23fd44c05 100644
--- a/apps/desktop/src/components/objects/DdlViewDialog.vue
+++ b/apps/desktop/src/components/objects/DdlViewDialog.vue
@@ -36,7 +36,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 const { toast } = useToast();
-const { isDark } = useTheme();
+const { isDark, themePalette } = useTheme();
 const settingsStore = useSettingsStore();
 
 const ddlContent = ref("");
@@ -84,7 +84,7 @@ async function initDdlEditor(content: string) {
   const appAppearance = isDark.value ? "dark" : "light";
   const fontSize = settingsStore.editorSettings.fontSize;
   const fontFamily = settingsStore.editorSettings.fontFamily;
-  const themeExt = await loadEditorTheme(editorTheme, appAppearance);
+  const themeExt = await loadEditorTheme(editorTheme, appAppearance, undefined, themePalette.value);
   const fontExt = editorFontTheme(EditorView, fontSize, fontFamily, { fixedHeight: true, scrollable: true });
   const dialect = createDbxCodeMirrorSqlDialect(langSql, props.dialect);
   const state = EditorState.create({
diff --git a/apps/desktop/src/components/sidebar/ConnectionTree.vue b/apps/desktop/src/components/sidebar/ConnectionTree.vue
index eaef0c8ed7..6d90819bce 100644
--- a/apps/desktop/src/components/sidebar/ConnectionTree.vue
+++ b/apps/desktop/src/components/sidebar/ConnectionTree.vue
@@ -991,7 +991,7 @@ defineExpose({ focusSearch, createNewGroup, collapseAllTreeNodes });
 
 <template>
   <div ref="rootRef" class="h-full min-h-0 flex flex-col text-sm select-none" @pointerenter="pointerInsideTree = true" @pointerleave="pointerInsideTree = false">
-    <div class="sticky top-0 z-10 bg-background px-2 py-1">
+    <div class="connection-tree-search sticky top-0 z-10 bg-background px-2 py-1">
       <div class="relative flex items-center gap-1">
         <div class="relative flex-1">
           <Search class="absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" />
diff --git a/apps/desktop/src/composables/useCellDetailEditor.ts b/apps/desktop/src/composables/useCellDetailEditor.ts
index 36357754e0..a63ae1c5be 100644
--- a/apps/desktop/src/composables/useCellDetailEditor.ts
+++ b/apps/desktop/src/composables/useCellDetailEditor.ts
@@ -14,7 +14,7 @@ import { clampEditorFontSize, createEditorZoomCommitScheduler, fontSizeFromGestu
 import i18n from "@/i18n";
 import EditorSearchPanel from "@/components/editor/EditorSearchPanel.vue";
 import type { EditorTheme } from "@/stores/settingsStore";
-import type { AppThemeAppearance } from "@/lib/app/appTheme";
+import type { AppThemeAppearance, AppThemePalette } from "@/lib/app/appTheme";
 
 export interface UseCellDetailEditorOptions {
   onChange?: (value: string) => void;
@@ -24,6 +24,7 @@ export interface UseCellDetailEditorOptions {
   readOnly?: boolean;
   editorTheme: () => EditorTheme;
   appAppearance: () => AppThemeAppearance;
+  appPalette: () => AppThemePalette;
   fontSize: () => number;
   fontFamily: () => string;
 }
@@ -130,14 +131,14 @@ export function useCellDetailEditor(options: UseCellDetailEditorOptions): UseCel
     zoomCommitScheduler.flush(liveFontSize);
   }
 
-  watch([() => options.fontSize(), () => options.fontFamily(), () => options.editorTheme(), () => options.appAppearance()], async ([fontSize, fontFamily, editorTheme, appearance]) => {
+  watch([() => options.fontSize(), () => options.fontFamily(), () => options.editorTheme(), () => options.appAppearance(), () => options.appPalette()], async ([fontSize, fontFamily, editorTheme, appearance, palette]) => {
     const editor = view.value;
     if (!editor || destroyed) return;
     if (!isGestureZooming && !zoomCommitScheduler.hasPendingCommit()) {
       liveFontSize = clampEditorFontSize(fontSize);
     }
     syncEditorFontCssVars(liveFontSize, fontFamily);
-    const theme = await loadEditorTheme(editorTheme, appearance);
+    const theme = await loadEditorTheme(editorTheme, appearance, undefined, palette);
     if (!view.value || destroyed) return;
     view.value.dispatch({
       effects: [themeComp.reconfigure(theme), fontThemeComp.reconfigure(editorFontTheme(EditorView, liveFontSize, fontFamily, { fixedHeight: true, scrollable: true }))],
@@ -150,7 +151,7 @@ export function useCellDetailEditor(options: UseCellDetailEditorOptions): UseCel
     const doc = initialValue ?? "";
     currentIsJson = options.language === "json" || shouldUseJsonMode(columnType, doc);
 
-    const theme = await loadEditorTheme(options.editorTheme(), options.appAppearance());
+    const theme = await loadEditorTheme(options.editorTheme(), options.appAppearance(), undefined, options.appPalette());
     liveFontSize = clampEditorFontSize(options.fontSize());
     const fontTheme = editorFontTheme(EditorView, liveFontSize, options.fontFamily(), { fixedHeight: true, scrollable: true });
     const shortcuts = settingsStore.editorSettings.shortcuts;
diff --git a/apps/desktop/src/composables/useTheme.ts b/apps/desktop/src/composables/useTheme.ts
index ca973a01eb..42ceb48e72 100644
--- a/apps/desktop/src/composables/useTheme.ts
+++ b/apps/desktop/src/composables/useTheme.ts
@@ -1,9 +1,25 @@
 import { computed, ref } from "vue";
-import { APP_THEME_STORAGE_KEY, getTauriThemeForMode, normalizeAppThemeMode, resolveAppThemeAppearance, type AppThemeMode } from "@/lib/app/appTheme";
+import {
+  APP_THEME_PALETTE_CLASS_NAMES,
+  APP_THEME_PALETTE_STORAGE_KEY,
+  APP_THEME_STORAGE_KEY,
+  getAppThemePaletteClass,
+  getTauriThemeForMode,
+  isSystemAppThemeMode,
+  normalizeAppThemeMode,
+  normalizeAppThemePalette,
+  resolveAppThemeAppearance,
+  type AppThemeMode,
+  type AppThemePalette,
+} from "@/lib/app/appTheme";
 import { safeLocalStorageGet, safeLocalStorageSet } from "@/lib/backend/safeStorage";
 import { isTauriRuntime } from "@/lib/backend/tauriRuntime";
 
-const themeMode = ref<AppThemeMode>(normalizeAppThemeMode(safeLocalStorageGet(APP_THEME_STORAGE_KEY)));
+const savedThemeMode = safeLocalStorageGet(APP_THEME_STORAGE_KEY);
+const themeMode = ref<AppThemeMode>(normalizeAppThemeMode(savedThemeMode));
+const savedThemePalette = safeLocalStorageGet(APP_THEME_PALETTE_STORAGE_KEY);
+const themePalette = ref<AppThemePalette>(normalizeAppThemePalette(savedThemePalette));
+if (savedThemeMode && savedThemeMode !== themeMode.value) safeLocalStorageSet(APP_THEME_STORAGE_KEY, themeMode.value);
 const systemPrefersDark = ref(readSystemPrefersDark());
 const isDark = computed(() => resolveAppThemeAppearance(themeMode.value, systemPrefersDark.value) === "dark");
 
@@ -22,7 +38,7 @@ function setupSystemThemeListener() {
   systemPrefersDark.value = mediaQuery.matches;
   const onChange = (event: MediaQueryListEvent) => {
     systemPrefersDark.value = event.matches;
-    if (themeMode.value === "system") applyTheme();
+    if (isSystemAppThemeMode(themeMode.value)) applyTheme();
   };
   mediaQuery.addEventListener("change", onChange);
   isListeningForSystemTheme = true;
@@ -36,6 +52,9 @@ function applyTheme() {
 
   doc.classList.add("disable-transitions");
   doc.classList.toggle("dark", dark);
+  for (const className of APP_THEME_PALETTE_CLASS_NAMES) doc.classList.remove(className);
+  const paletteClass = getAppThemePaletteClass(themePalette.value);
+  if (paletteClass) doc.classList.add(paletteClass);
   doc.style.colorScheme = dark ? "dark" : "light";
 
   // force reflow so the class toggle takes effect before re-enabling transitions
@@ -65,6 +84,12 @@ function setThemeMode(mode: AppThemeMode) {
   applyTheme();
 }
 
+function setThemePalette(palette: AppThemePalette) {
+  themePalette.value = palette;
+  safeLocalStorageSet(APP_THEME_PALETTE_STORAGE_KEY, palette);
+  applyTheme();
+}
+
 export function useTheme() {
   setupSystemThemeListener();
 
@@ -72,5 +97,5 @@ export function useTheme() {
     setThemeMode(isDark.value ? "light" : "dark");
   }
 
-  return { isDark, themeMode, applyTheme, setThemeMode, toggleTheme };
+  return { isDark, themeMode, themePalette, applyTheme, setThemeMode, setThemePalette, toggleTheme };
 }
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 618c9a5a1a..58c688766b 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -2681,6 +2681,21 @@ export default {
     uiScaleDescription: "Scale the entire desktop UI for high-DPI displays. Changes apply immediately and are restored on next launch.",
     theme: "Theme",
     selectTheme: "Select theme...",
+    colorTheme: "Color Theme",
+    selectColorTheme: "Select color theme...",
+    themePalettePearl: "White",
+    themePaletteMist: "Mist Gray",
+    themePaletteGraphite: "Titanium Gray",
+    themePaletteCobalt: "Cobalt Blue",
+    themePaletteSage: "Sage Green",
+    themePaletteAmber: "Warm Yellow",
+    themePaletteBlush: "Sakura Pink",
+    themePaletteVscode: "VS Code",
+    themePaletteIdea: "IDEA",
+    themePaletteXcode: "Xcode",
+    themePaletteJetbrains: "JetBrains",
+    themePaletteCursor: "Cursor",
+    themePaletteClaude: "Claude Code",
     followAppTheme: "Follow app theme",
     appLayout: "Interface Layout",
     appLayoutSeparated: "Modern separated",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 8ead94497b..2baddd8978 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -2637,6 +2637,21 @@ export default withEnglishFallback({
     uiScaleDescription: "Escala toda la interfaz de escritorio para pantallas de alta densidad. Los cambios se aplican al instante y se restauran al volver a abrir.",
     theme: "Tema",
     selectTheme: "Seleccionar tema...",
+    colorTheme: "Tema de color",
+    selectColorTheme: "Seleccionar tema de color...",
+    themePalettePearl: "Blanco",
+    themePaletteMist: "Gris niebla",
+    themePaletteGraphite: "Gris titanio",
+    themePaletteCobalt: "Azul cobalto",
+    themePaletteSage: "Verde salvia",
+    themePaletteAmber: "Amarillo cálido",
+    themePaletteBlush: "Rosa sakura",
+    themePaletteVscode: "VS Code",
+    themePaletteIdea: "IDEA",
+    themePaletteXcode: "Xcode",
+    themePaletteJetbrains: "JetBrains",
+    themePaletteCursor: "Cursor",
+    themePaletteClaude: "Claude Code",
     followAppTheme: "Seguir el tema de la aplicación",
     appLayout: "Diseño de la interfaz",
     appLayoutSeparated: "Moderno separado",
diff --git a/apps/desktop/src/i18n/locales/it.ts b/apps/desktop/src/i18n/locales/it.ts
index 1d9b760443..439dc8998f 100644
--- a/apps/desktop/src/i18n/locales/it.ts
+++ b/apps/desktop/src/i18n/locales/it.ts
@@ -2635,6 +2635,21 @@ export default withEnglishFallback({
     uiScaleDescription: "Scala l'intera interfaccia utente desktop per display ad alta densità (High-DPI). Le modifiche si applicano immediatamente e vengono ripristinate al prossimo avvio.",
     theme: "Tema",
     selectTheme: "Seleziona tema...",
+    colorTheme: "Tema colore",
+    selectColorTheme: "Seleziona tema colore...",
+    themePalettePearl: "Bianco",
+    themePaletteMist: "Grigio nebbia",
+    themePaletteGraphite: "Grigio titanio",
+    themePaletteCobalt: "Blu cobalto",
+    themePaletteSage: "Verde salvia",
+    themePaletteAmber: "Giallo caldo",
+    themePaletteBlush: "Rosa sakura",
+    themePaletteVscode: "VS Code",
+    themePaletteIdea: "IDEA",
+    themePaletteXcode: "Xcode",
+    themePaletteJetbrains: "JetBrains",
+    themePaletteCursor: "Cursor",
+    themePaletteClaude: "Claude Code",
     followAppTheme: "Segui il tema dell'applicazione",
     appLayout: "Layout dell'Interfaccia",
     appLayoutSeparated: "Separato moderno",
diff --git a/apps/desktop/src/i18n/locales/ja.ts b/apps/desktop/src/i18n/locales/ja.ts
index 1a63f10f10..7cdc3a909f 100644
--- a/apps/desktop/src/i18n/locales/ja.ts
+++ b/apps/desktop/src/i18n/locales/ja.ts
@@ -2635,6 +2635,21 @@ export default withEnglishFallback({
     uiScaleDescription: "高DPIディスプレイ向けにデスクトップUI全体をスケーリングします。変更は即座に適用され、次回起動時に復元されます。",
     theme: "テーマ",
     selectTheme: "テーマを選択...",
+    colorTheme: "配色テーマ",
+    selectColorTheme: "配色テーマを選択...",
+    themePalettePearl: "白",
+    themePaletteMist: "霧灰",
+    themePaletteGraphite: "チタングレー",
+    themePaletteCobalt: "コバルトブルー",
+    themePaletteSage: "セージグリーン",
+    themePaletteAmber: "暖黄",
+    themePaletteBlush: "桜ピンク",
+    themePaletteVscode: "VS Code",
+    themePaletteIdea: "IDEA",
+    themePaletteXcode: "Xcode",
+    themePaletteJetbrains: "JetBrains",
+    themePaletteCursor: "Cursor",
+    themePaletteClaude: "Claude Code",
     followAppTheme: "アプリテーマに従う",
     appLayout: "インターフェースレイアウト",
     appLayoutSeparated: "モダン分離型",
diff --git a/apps/desktop/src/i18n/locales/pt-BR.ts b/apps/desktop/src/i18n/locales/pt-BR.ts
index e24db4fbe6..e0d34eb00c 100644
--- a/apps/desktop/src/i18n/locales/pt-BR.ts
+++ b/apps/desktop/src/i18n/locales/pt-BR.ts
@@ -2636,6 +2636,21 @@ export default withEnglishFallback({
     uiScaleDescription: "Dimensione toda a UI do desktop para telas de alta resolução (high-DPI). As alterações são aplicadas imediatamente e restauradas na próxima inicialização.",
     theme: "Tema",
     selectTheme: "Selecionar tema...",
+    colorTheme: "Tema de cores",
+    selectColorTheme: "Selecionar tema de cores...",
+    themePalettePearl: "Branco",
+    themePaletteMist: "Cinza névoa",
+    themePaletteGraphite: "Cinza titânio",
+    themePaletteCobalt: "Azul cobalto",
+    themePaletteSage: "Verde sálvia",
+    themePaletteAmber: "Amarelo quente",
+    themePaletteBlush: "Rosa sakura",
+    themePaletteVscode: "VS Code",
+    themePaletteIdea: "IDEA",
+    themePaletteXcode: "Xcode",
+    themePaletteJetbrains: "JetBrains",
+    themePaletteCursor: "Cursor",
+    themePaletteClaude: "Claude Code",
     followAppTheme: "Seguir o tema do app",
     appLayout: "Layout da interface",
     appLayoutSeparated: "Separado moderno",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index c9e9e43c5e..2525adcada 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -2681,6 +2681,21 @@ export default withEnglishFallback({
     uiScaleDescription: "按比例缩放整个桌面端界面，适合高清屏；修改后立即生效，并在下次启动时恢复。",
     theme: "主题",
     selectTheme: "选择主题...",
+    colorTheme: "配色主题",
+    selectColorTheme: "选择配色主题...",
+    themePalettePearl: "洁白",
+    themePaletteMist: "雾灰",
+    themePaletteGraphite: "钛灰",
+    themePaletteCobalt: "钴蓝",
+    themePaletteSage: "青绿",
+    themePaletteAmber: "暖黄",
+    themePaletteBlush: "樱粉",
+    themePaletteVscode: "VS Code",
+    themePaletteIdea: "IDEA",
+    themePaletteXcode: "Xcode",
+    themePaletteJetbrains: "JetBrains",
+    themePaletteCursor: "Cursor",
+    themePaletteClaude: "Claude Code",
     followAppTheme: "跟随应用主题",
     appLayout: "界面布局",
     appLayoutSeparated: "现代分隔",
diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts
index c5704bc47d..b3bad91dec 100644
--- a/apps/desktop/src/i18n/locales/zh-TW.ts
+++ b/apps/desktop/src/i18n/locales/zh-TW.ts
@@ -2538,6 +2538,21 @@ export default withEnglishFallback({
     uiScaleDescription: "按比例縮放整個桌面端介面，適合高 DPI 螢幕；修改後立即生效，並在下次啟動時復原。",
     theme: "主題",
     selectTheme: "選擇主題……",
+    colorTheme: "配色主題",
+    selectColorTheme: "選擇配色主題……",
+    themePalettePearl: "潔白",
+    themePaletteMist: "霧灰",
+    themePaletteGraphite: "鈦灰",
+    themePaletteCobalt: "鈷藍",
+    themePaletteSage: "青綠",
+    themePaletteAmber: "暖黃",
+    themePaletteBlush: "櫻粉",
+    themePaletteVscode: "VS Code",
+    themePaletteIdea: "IDEA",
+    themePaletteXcode: "Xcode",
+    themePaletteJetbrains: "JetBrains",
+    themePaletteCursor: "Cursor",
+    themePaletteClaude: "Claude Code",
     followAppTheme: "跟隨應用程式主題",
     appLayout: "介面配置",
     appLayoutSeparated: "現代分隔",
diff --git a/apps/desktop/src/lib/__tests__/editorThemes.spec.ts b/apps/desktop/src/lib/__tests__/editorThemes.spec.ts
new file mode 100644
index 0000000000..9ae06ec11f
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/editorThemes.spec.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { resolveEditorTheme } from "@/lib/editor/editorThemes";
+import type { AppThemePalette } from "@/lib/app/appTheme";
+import type { EditorTheme } from "@/stores/settingsStore";
+
+describe("resolveEditorTheme", () => {
+  it("maps only the follow-app editor theme to application IDE palettes", () => {
+    expect(resolveEditorTheme("app", "light", "xcode")).toBe("xcode");
+    expect(resolveEditorTheme("app", "dark", "xcode")).toBe("xcode-dark");
+    expect(resolveEditorTheme("app", "light", "cursor")).toBe("cursor-light");
+    expect(resolveEditorTheme("app", "dark", "cursor")).toBe("cursor-dark");
+  });
+
+  it("keeps explicit editor themes unchanged across application palettes", () => {
+    const explicitThemes: Array<Exclude<EditorTheme, "app">> = [
+      "one-dark",
+      "vscode-dark",
+      "vscode-light",
+      "nord",
+      "okaidia",
+      "material",
+      "duotone-light",
+      "duotone-dark",
+      "xcode",
+      "xcode-dark",
+      "idea-light",
+      "idea-dark",
+      "jetbrains-light",
+      "jetbrains-dark",
+      "cursor-light",
+      "cursor-dark",
+      "claude-light",
+      "claude-dark",
+      "custom",
+    ];
+    const appPalettes: AppThemePalette[] = ["pearl", "vscode", "idea", "xcode", "jetbrains", "cursor", "claude"];
+
+    for (const theme of explicitThemes) {
+      for (const palette of appPalettes) {
+        expect(resolveEditorTheme(theme, "dark", palette)).toBe(theme);
+        expect(resolveEditorTheme(theme, "light", palette)).toBe(theme);
+      }
+    }
+  });
+});
diff --git a/apps/desktop/src/lib/app/appTheme.ts b/apps/desktop/src/lib/app/appTheme.ts
index f25a624cce..0fb0ffb76a 100644
--- a/apps/desktop/src/lib/app/appTheme.ts
+++ b/apps/desktop/src/lib/app/appTheme.ts
@@ -1,20 +1,64 @@
 import type { Theme } from "@tauri-apps/api/window";
 
 export const APP_THEME_STORAGE_KEY = "dbx-theme";
+export const APP_THEME_PALETTE_STORAGE_KEY = "dbx-theme-palette";
 
 export type AppThemeMode = "light" | "dark" | "system";
 export type AppThemeAppearance = "light" | "dark";
+export type AppThemePalette = "pearl" | "mist" | "graphite" | "cobalt" | "sage" | "amber" | "blush" | "vscode" | "idea" | "xcode" | "jetbrains" | "cursor" | "claude";
+
+export type AppThemePaletteOption = {
+  value: AppThemePalette;
+  labelKey: string;
+  className: string | null;
+  previewColor: string;
+};
+
+export const APP_THEME_PALETTES: AppThemePaletteOption[] = [
+  { value: "pearl", labelKey: "settings.themePalettePearl", className: null, previewColor: "#ffffff" },
+  { value: "mist", labelKey: "settings.themePaletteMist", className: "theme-soft", previewColor: "#e4eaf2" },
+  { value: "graphite", labelKey: "settings.themePaletteGraphite", className: "theme-graphite", previewColor: "#d8dce4" },
+  { value: "cobalt", labelKey: "settings.themePaletteCobalt", className: "theme-cobalt", previewColor: "#d8e6f7" },
+  { value: "sage", labelKey: "settings.themePaletteSage", className: "theme-sage", previewColor: "#dbe9e2" },
+  { value: "amber", labelKey: "settings.themePaletteAmber", className: "theme-amber", previewColor: "#f4e4b8" },
+  { value: "blush", labelKey: "settings.themePaletteBlush", className: "theme-blush", previewColor: "#f4d9e6" },
+  { value: "vscode", labelKey: "settings.themePaletteVscode", className: "theme-vscode", previewColor: "#007acc" },
+  { value: "idea", labelKey: "settings.themePaletteIdea", className: "theme-idea", previewColor: "#4b6eaf" },
+  { value: "xcode", labelKey: "settings.themePaletteXcode", className: "theme-xcode", previewColor: "#0a84ff" },
+  { value: "jetbrains", labelKey: "settings.themePaletteJetbrains", className: "theme-jetbrains", previewColor: "#7b61ff" },
+  { value: "cursor", labelKey: "settings.themePaletteCursor", className: "theme-cursor", previewColor: "#6ba4ff" },
+  { value: "claude", labelKey: "settings.themePaletteClaude", className: "theme-claude", previewColor: "#c47a50" },
+];
+
+export const APP_THEME_PALETTE_CLASS_NAMES = APP_THEME_PALETTES.map((palette) => palette.className).filter((className): className is string => Boolean(className));
 
 export function normalizeAppThemeMode(value: string | null): AppThemeMode {
+  if (value === "soft-light") return "light";
+  if (value === "soft-dark") return "dark";
+  if (value === "soft-system") return "system";
   if (value === "dark" || value === "light" || value === "system") return value;
   return "light";
 }
 
+export function normalizeAppThemePalette(value: string | null): AppThemePalette {
+  if (value === "mist" || value === "graphite" || value === "cobalt" || value === "sage" || value === "amber" || value === "blush" || value === "vscode" || value === "idea" || value === "xcode" || value === "jetbrains" || value === "cursor" || value === "claude" || value === "pearl") return value;
+  return "pearl";
+}
+
+export function getAppThemePaletteClass(palette: AppThemePalette): string | null {
+  return APP_THEME_PALETTES.find((option) => option.value === palette)?.className ?? null;
+}
+
+export function isSystemAppThemeMode(mode: AppThemeMode): boolean {
+  return mode === "system";
+}
+
 export function resolveAppThemeAppearance(mode: AppThemeMode, systemPrefersDark: boolean): AppThemeAppearance {
-  if (mode === "system") return systemPrefersDark ? "dark" : "light";
-  return mode;
+  if (isSystemAppThemeMode(mode)) return systemPrefersDark ? "dark" : "light";
+  return mode === "dark" ? "dark" : "light";
 }
 
 export function getTauriThemeForMode(mode: AppThemeMode): Theme | null {
-  return mode === "system" ? null : mode;
+  if (isSystemAppThemeMode(mode)) return null;
+  return resolveAppThemeAppearance(mode, false);
 }
diff --git a/apps/desktop/src/lib/editor/editorThemes.ts b/apps/desktop/src/lib/editor/editorThemes.ts
index 9111e5b943..1b7490deae 100644
--- a/apps/desktop/src/lib/editor/editorThemes.ts
+++ b/apps/desktop/src/lib/editor/editorThemes.ts
@@ -1,6 +1,6 @@
 import type { Extension } from "@codemirror/state";
 import type { EditorTheme, CustomThemeColors } from "@/stores/settingsStore";
-import type { AppThemeAppearance } from "@/lib/app/appTheme";
+import type { AppThemeAppearance, AppThemePalette } from "@/lib/app/appTheme";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { tags } from "@lezer/highlight";
 
@@ -54,7 +54,7 @@ function createCustomTheme(EditorView: typeof import("@codemirror/view").EditorV
   // 根据系统主题设置默认背景色和前景色
   const defaultColors = isDark ? { background: "#1e1e2e", foreground: "#cdd6f4" } : { background: "#fafafa", foreground: "#242424" };
 
-  const c = { ...defaultColors, ...customThemeColors, ...(colors || {}) };
+  const c = { ...defaultColors, ...customThemeColors, ...colors };
 
   // 映射用户自定义属性名到 CodeMirror 内部属性名
   if (colors) {
@@ -179,6 +179,371 @@ function createCustomTheme(EditorView: typeof import("@codemirror/view").EditorV
   return [theme, syntaxHighlighting(highlightStyle)];
 }
 
+type IdeEditorThemeColors = {
+  dark: boolean;
+  background: string;
+  foreground: string;
+  selection: string;
+  selectionMatch: string;
+  cursor: string;
+  gutterBackground: string;
+  gutterForeground: string;
+  gutterActiveForeground: string;
+  activeLine: string;
+  matchingBracket: string;
+  gutterBorder: string;
+  keyword: string;
+  string: string;
+  number: string;
+  comment: string;
+  type: string;
+  variable: string;
+  function: string;
+  operator: string;
+  punctuation: string;
+  property: string;
+  builtin: string;
+  meta: string;
+  invalid: string;
+  tag: string;
+  attribute: string;
+  className: string;
+  keywordBold?: boolean;
+  stringBold?: boolean;
+  numberBold?: boolean;
+};
+
+const IDE_EDITOR_THEMES = {
+  ideaLight: {
+    dark: false,
+    background: "#ffffff",
+    foreground: "#080808",
+    selection: "#a6d2ff",
+    selectionMatch: "#93d9d9",
+    cursor: "#000000",
+    gutterBackground: "#f2f2f2",
+    gutterForeground: "#adadad",
+    gutterActiveForeground: "#767a8a",
+    activeLine: "#fcfaed",
+    matchingBracket: "#93d9d9",
+    gutterBorder: "#d4d4d4",
+    keyword: "#0033b3",
+    string: "#067d17",
+    number: "#1750eb",
+    comment: "#8c8c8c",
+    type: "#0033b3",
+    variable: "#174ad4",
+    function: "#00627a",
+    operator: "#080808",
+    punctuation: "#080808",
+    property: "#871094",
+    builtin: "#0033b3",
+    meta: "#9e880d",
+    invalid: "#f50000",
+    tag: "#0033b3",
+    attribute: "#871094",
+    className: "#174be6",
+    keywordBold: true,
+    stringBold: true,
+    numberBold: true,
+  },
+  ideaDark: {
+    dark: true,
+    background: "#2b2b2b",
+    foreground: "#a9b7c6",
+    selection: "#214283",
+    selectionMatch: "#3b514d",
+    cursor: "#bbbbbb",
+    gutterBackground: "#313335",
+    gutterForeground: "#606366",
+    gutterActiveForeground: "#a4a3a3",
+    activeLine: "#323232",
+    matchingBracket: "#3b514d",
+    gutterBorder: "#4d4d4d",
+    keyword: "#cc7832",
+    string: "#6a8759",
+    number: "#6897bb",
+    comment: "#808080",
+    type: "#a9b7c6",
+    variable: "#a9b7c6",
+    function: "#ffc66d",
+    operator: "#cc7832",
+    punctuation: "#a9b7c6",
+    property: "#9876aa",
+    builtin: "#cc7832",
+    meta: "#bbb529",
+    invalid: "#ff0000",
+    tag: "#e8bf6a",
+    attribute: "#bababa",
+    className: "#a9b7c6",
+  },
+  jetbrainsLight: {
+    dark: false,
+    background: "#ffffff",
+    foreground: "#080808",
+    selection: "#a6d2ff",
+    selectionMatch: "#c9ecec",
+    cursor: "#000000",
+    gutterBackground: "#ffffff",
+    gutterForeground: "#aeb3c2",
+    gutterActiveForeground: "#767a8a",
+    activeLine: "#f5f8fe",
+    matchingBracket: "#93d9d9",
+    gutterBorder: "#ebecf0",
+    keyword: "#0033b3",
+    string: "#067d17",
+    number: "#1750eb",
+    comment: "#8c8c8c",
+    type: "#0033b3",
+    variable: "#174ad4",
+    function: "#00627a",
+    operator: "#080808",
+    punctuation: "#080808",
+    property: "#871094",
+    builtin: "#0033b3",
+    meta: "#9e880d",
+    invalid: "#f50000",
+    tag: "#0033b3",
+    attribute: "#871094",
+    className: "#174be6",
+    keywordBold: true,
+    stringBold: true,
+    numberBold: true,
+  },
+  jetbrainsDark: {
+    dark: true,
+    background: "#1e1f22",
+    foreground: "#bcbec4",
+    selection: "#2e436e",
+    selectionMatch: "#114957",
+    cursor: "#ced0d6",
+    gutterBackground: "#1e1f22",
+    gutterForeground: "#4b5059",
+    gutterActiveForeground: "#a1a3ab",
+    activeLine: "#26282e",
+    matchingBracket: "#43454a",
+    gutterBorder: "#313438",
+    keyword: "#cf8e6d",
+    string: "#6aab73",
+    number: "#2aacb8",
+    comment: "#7a7e85",
+    type: "#cf8e6d",
+    variable: "#bcbec4",
+    function: "#56a8f5",
+    operator: "#bcbec4",
+    punctuation: "#bcbec4",
+    property: "#c77dbb",
+    builtin: "#cf8e6d",
+    meta: "#b3ae60",
+    invalid: "#f75464",
+    tag: "#2fbaa3",
+    attribute: "#b3ae60",
+    className: "#56a8f5",
+  },
+  cursorLight: {
+    dark: false,
+    background: "#fcfcfc",
+    foreground: "#141414eb",
+    selection: "#1414141e",
+    selectionMatch: "#14141411",
+    cursor: "#141414eb",
+    gutterBackground: "#fcfcfc",
+    gutterForeground: "#1414147a",
+    gutterActiveForeground: "#141414ad",
+    activeLine: "#ededed",
+    matchingBracket: "#1414141e",
+    gutterBorder: "#14141413",
+    keyword: "#b3003f",
+    string: "#9e94d5",
+    number: "#b8448b",
+    comment: "#141414ad",
+    type: "#206595",
+    variable: "#206595",
+    function: "#db704b",
+    operator: "#b3003f",
+    punctuation: "#141414eb",
+    property: "#1f8a65",
+    builtin: "#206595",
+    meta: "#1f8a65",
+    invalid: "#cf2d56",
+    tag: "#206595",
+    attribute: "#6049b3",
+    className: "#206595",
+  },
+  cursorDark: {
+    dark: true,
+    background: "#181818",
+    foreground: "#e4e4e4eb",
+    selection: "#40404099",
+    selectionMatch: "#404040cc",
+    cursor: "#e4e4e4eb",
+    gutterBackground: "#181818",
+    gutterForeground: "#e4e4e442",
+    gutterActiveForeground: "#e4e4e4eb",
+    activeLine: "#262626",
+    matchingBracket: "#e4e4e41e",
+    gutterBorder: "#e4e4e413",
+    keyword: "#82d2ce",
+    string: "#e394dc",
+    number: "#ebc88d",
+    comment: "#e4e4e45e",
+    type: "#efb080",
+    variable: "#87c3ff",
+    function: "#efb080",
+    operator: "#d6d6dd",
+    punctuation: "#d6d6dd",
+    property: "#82d2ce",
+    builtin: "#a8cc7c",
+    meta: "#a8cc7c",
+    invalid: "#e34671",
+    tag: "#82d2ce",
+    attribute: "#aaa0fa",
+    className: "#efb080",
+  },
+  claudeLight: {
+    dark: false,
+    background: "#fffdf8",
+    foreground: "#302820",
+    selection: "#ead8c6",
+    selectionMatch: "#e7d8c8",
+    cursor: "#b86b3c",
+    gutterBackground: "#f8f1e9",
+    gutterForeground: "#9a7f66",
+    gutterActiveForeground: "#5f4b3a",
+    activeLine: "#f4e9de",
+    matchingBracket: "#e2c9b1",
+    gutterBorder: "#ddcdbb",
+    keyword: "#9a4f2e",
+    string: "#4f7d5d",
+    number: "#2d6f91",
+    comment: "#8c745f",
+    type: "#7a5aa8",
+    variable: "#3e5f75",
+    function: "#b86b3c",
+    operator: "#6b5544",
+    punctuation: "#6b5544",
+    property: "#9a4f2e",
+    builtin: "#4f7d5d",
+    meta: "#8f6b2e",
+    invalid: "#c3493d",
+    tag: "#7a5aa8",
+    attribute: "#b86b3c",
+    className: "#7a5aa8",
+  },
+  claudeDark: {
+    dark: true,
+    background: "#211f1c",
+    foreground: "#d8d0c4",
+    selection: "#44382f",
+    selectionMatch: "#564539",
+    cursor: "#d28a5f",
+    gutterBackground: "#1b1917",
+    gutterForeground: "#8f7f70",
+    gutterActiveForeground: "#d8d0c4",
+    activeLine: "#2a2723",
+    matchingBracket: "#564539",
+    gutterBorder: "#7f6c5b59",
+    keyword: "#d28a5f",
+    string: "#74b195",
+    number: "#65a1c6",
+    comment: "#a39686",
+    type: "#a08fcd",
+    variable: "#d8d0c4",
+    function: "#d69a6b",
+    operator: "#e0d0c0",
+    punctuation: "#c9b9a7",
+    property: "#d28a5f",
+    builtin: "#74b195",
+    meta: "#d4ae63",
+    invalid: "#e2675f",
+    tag: "#a08fcd",
+    attribute: "#d69a6b",
+    className: "#a08fcd",
+  },
+} satisfies Record<string, IdeEditorThemeColors>;
+
+function createIdeEditorTheme(EditorView: typeof import("@codemirror/view").EditorView, c: IdeEditorThemeColors): Extension {
+  const theme = EditorView.theme(
+    {
+      "&": {
+        backgroundColor: c.background,
+        color: c.foreground,
+        [EDITOR_SELECTION_BACKGROUND_CSS_VAR]: c.selection,
+      },
+      ".cm-scroller": {
+        backgroundColor: c.background,
+      },
+      ".cm-content": {
+        caretColor: c.cursor,
+      },
+      ".cm-cursor": {
+        borderLeftColor: c.cursor,
+      },
+      "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+        backgroundColor: c.selection,
+      },
+      ".cm-selectionMatch": {
+        backgroundColor: c.selectionMatch,
+      },
+      ".cm-activeLine": {
+        backgroundColor: c.activeLine,
+      },
+      ".cm-gutters": {
+        backgroundColor: c.gutterBackground,
+        borderRight: `1px solid ${c.gutterBorder}`,
+        color: c.gutterForeground,
+      },
+      ".cm-activeLineGutter": {
+        backgroundColor: c.activeLine,
+        color: c.gutterActiveForeground,
+      },
+      ".cm-matchingBracket": {
+        backgroundColor: c.matchingBracket,
+        outline: "none",
+      },
+    },
+    { dark: c.dark },
+  );
+
+  const highlightStyle = HighlightStyle.define([
+    { tag: [tags.keyword, tags.controlKeyword, tags.definitionKeyword, tags.moduleKeyword, tags.operatorKeyword, tags.modifier, tags.bool, tags.null], color: c.keyword, ...(c.keywordBold ? { fontWeight: "bold" } : {}) },
+    { tag: [tags.string, tags.special(tags.string), tags.regexp, tags.escape, tags.inserted], color: c.string, ...(c.stringBold ? { fontWeight: "bold" } : {}) },
+    { tag: [tags.number, tags.integer, tags.float], color: c.number, ...(c.numberBold ? { fontWeight: "bold" } : {}) },
+    { tag: [tags.comment, tags.lineComment, tags.blockComment, tags.quote], color: c.comment, fontStyle: "italic" },
+    { tag: [tags.typeName, tags.typeOperator, tags.unit], color: c.type },
+    { tag: [tags.name, tags.variableName, tags.definition(tags.variableName)], color: c.variable },
+    { tag: [tags.function(tags.variableName), tags.function(tags.propertyName), tags.function(tags.name), tags.macroName], color: c.function },
+    { tag: [tags.standard(tags.variableName), tags.special(tags.name)], color: c.builtin },
+    { tag: [tags.propertyName, tags.labelName, tags.annotation], color: c.property },
+    { tag: [tags.operator, tags.compareOperator, tags.logicOperator, tags.arithmeticOperator, tags.derefOperator], color: c.operator },
+    { tag: [tags.punctuation, tags.separator, tags.paren, tags.brace, tags.bracket, tags.angleBracket], color: c.punctuation },
+    { tag: tags.tagName, color: c.tag },
+    { tag: tags.attributeName, color: c.attribute },
+    { tag: tags.attributeValue, color: c.string },
+    { tag: [tags.className, tags.namespace], color: c.className },
+    { tag: [tags.meta, tags.processingInstruction], color: c.meta },
+    { tag: tags.invalid, color: c.invalid },
+    { tag: [tags.heading, tags.heading1, tags.heading2, tags.heading3], color: c.keyword, fontWeight: "bold" },
+    { tag: tags.strong, color: c.foreground, fontWeight: "bold" },
+    { tag: tags.emphasis, color: c.foreground, fontStyle: "italic" },
+    { tag: [tags.link, tags.url], color: c.type, textDecoration: "underline" },
+    { tag: tags.literal, color: c.string },
+    { tag: tags.deleted, color: c.invalid },
+    { tag: tags.changed, color: c.property },
+    { tag: tags.self, color: c.keyword },
+    { tag: tags.list, color: c.foreground },
+    { tag: tags.monospace, color: c.foreground },
+    { tag: tags.strikethrough, color: c.invalid, textDecoration: "line-through" },
+    { tag: tags.contentSeparator, color: c.operator },
+  ]);
+
+  return [theme, syntaxHighlighting(highlightStyle)];
+}
+
+async function loadIdeEditorTheme(colors: IdeEditorThemeColors): Promise<Extension> {
+  return createIdeEditorTheme((await import("@codemirror/view")).EditorView, colors);
+}
+
 // ======================================================
 
 const TABLE_ICON: LucideIconNode = [
@@ -242,15 +607,32 @@ export function cellDetailActiveLineColor(): string {
   return colorMixValue("var(--accent)", "color-mix(in oklch, var(--foreground) 4%, transparent)");
 }
 
-/** Load a CodeMirror theme extension by theme name. */
-export function resolveEditorTheme(theme: EditorTheme, appAppearance: AppThemeAppearance): Exclude<EditorTheme, "app"> {
-  if (theme === "app") return appAppearance === "dark" ? "one-dark" : "vscode-light";
+/** Resolve the concrete CodeMirror theme used by the "Follow app theme" setting. */
+export function resolveEditorTheme(theme: EditorTheme, appAppearance: AppThemeAppearance, appPalette: AppThemePalette = "pearl"): Exclude<EditorTheme, "app"> {
+  if (theme === "app") {
+    switch (appPalette) {
+      case "vscode":
+        return appAppearance === "dark" ? "vscode-dark" : "vscode-light";
+      case "idea":
+        return appAppearance === "dark" ? "idea-dark" : "idea-light";
+      case "xcode":
+        return appAppearance === "dark" ? "xcode-dark" : "xcode";
+      case "jetbrains":
+        return appAppearance === "dark" ? "jetbrains-dark" : "jetbrains-light";
+      case "cursor":
+        return appAppearance === "dark" ? "cursor-dark" : "cursor-light";
+      case "claude":
+        return appAppearance === "dark" ? "claude-dark" : "claude-light";
+      default:
+        return appAppearance === "dark" ? "one-dark" : "vscode-light";
+    }
+  }
   return theme;
 }
 
 /** Load a CodeMirror theme extension by theme name. */
-export async function loadEditorTheme(theme: EditorTheme, appAppearance: AppThemeAppearance = "dark", customColors?: CustomThemeColors): Promise<Extension> {
-  const resolvedTheme = resolveEditorTheme(theme, appAppearance);
+export async function loadEditorTheme(theme: EditorTheme, appAppearance: AppThemeAppearance = "dark", customColors?: CustomThemeColors, appPalette: AppThemePalette = "pearl"): Promise<Extension> {
+  const resolvedTheme = resolveEditorTheme(theme, appAppearance, appPalette);
   switch (resolvedTheme) {
     case "one-dark":
       return (await import("@codemirror/theme-one-dark")).oneDark;
@@ -270,6 +652,24 @@ export async function loadEditorTheme(theme: EditorTheme, appAppearance: AppThem
       return (await import("@uiw/codemirror-theme-duotone")).duotoneDark;
     case "xcode":
       return (await import("@uiw/codemirror-theme-xcode")).xcodeLight;
+    case "xcode-dark":
+      return (await import("@uiw/codemirror-theme-xcode")).xcodeDark;
+    case "idea-light":
+      return loadIdeEditorTheme(IDE_EDITOR_THEMES.ideaLight);
+    case "idea-dark":
+      return loadIdeEditorTheme(IDE_EDITOR_THEMES.ideaDark);
+    case "jetbrains-light":
+      return loadIdeEditorTheme(IDE_EDITOR_THEMES.jetbrainsLight);
+    case "jetbrains-dark":
+      return loadIdeEditorTheme(IDE_EDITOR_THEMES.jetbrainsDark);
+    case "cursor-light":
+      return loadIdeEditorTheme(IDE_EDITOR_THEMES.cursorLight);
+    case "cursor-dark":
+      return loadIdeEditorTheme(IDE_EDITOR_THEMES.cursorDark);
+    case "claude-light":
+      return loadIdeEditorTheme(IDE_EDITOR_THEMES.claudeLight);
+    case "claude-dark":
+      return loadIdeEditorTheme(IDE_EDITOR_THEMES.claudeDark);
     case "custom":
       return createCustomTheme((await import("@codemirror/view")).EditorView, customColors, appAppearance === "dark");
     default:
diff --git a/apps/desktop/src/stores/__tests__/settingsStore.spec.ts b/apps/desktop/src/stores/__tests__/settingsStore.spec.ts
index de5dda0ec1..34ce44755d 100644
--- a/apps/desktop/src/stores/__tests__/settingsStore.spec.ts
+++ b/apps/desktop/src/stores/__tests__/settingsStore.spec.ts
@@ -30,6 +30,12 @@ describe("normalizeEditorSettings", () => {
     expect(normalizeEditorSettings({}).updateDownloadSource).toBe("official");
   });
 
+  it("preserves explicit editor themes from saved settings", () => {
+    expect(normalizeEditorSettings({ theme: "xcode" }).theme).toBe("xcode");
+    expect(normalizeEditorSettings({ theme: "one-dark" }).theme).toBe("one-dark");
+    expect(normalizeEditorSettings({ theme: "custom" }).theme).toBe("custom");
+  });
+
   it("restores all open tabs on launch by default", () => {
     expect(normalizeEditorSettings({}).openTabsRestoreMode).toBe("all");
   });
diff --git a/apps/desktop/src/stores/settingsStore.ts b/apps/desktop/src/stores/settingsStore.ts
index 9cab2293b2..fbd76386b4 100644
--- a/apps/desktop/src/stores/settingsStore.ts
+++ b/apps/desktop/src/stores/settingsStore.ts
@@ -252,7 +252,27 @@ function inferAiProviderFromConfig(config: Partial<AiConfig> | null | undefined)
   return "claude";
 }
 
-export type EditorTheme = "app" | "one-dark" | "vscode-dark" | "vscode-light" | "nord" | "okaidia" | "material" | "duotone-light" | "duotone-dark" | "xcode" | "custom";
+export type EditorTheme =
+  | "app"
+  | "one-dark"
+  | "vscode-dark"
+  | "vscode-light"
+  | "nord"
+  | "okaidia"
+  | "material"
+  | "duotone-light"
+  | "duotone-dark"
+  | "xcode"
+  | "xcode-dark"
+  | "idea-light"
+  | "idea-dark"
+  | "jetbrains-light"
+  | "jetbrains-dark"
+  | "cursor-light"
+  | "cursor-dark"
+  | "claude-light"
+  | "claude-dark"
+  | "custom";
 
 const STRUCTURE_EDITOR_DENSITIES = ["compact", "standard", "comfortable"] as const;
 export type StructureEditorDensity = (typeof STRUCTURE_EDITOR_DENSITIES)[number];
@@ -426,6 +446,15 @@ export const EDITOR_THEMES: { value: EditorTheme; label: string; dark: boolean }
   { value: "duotone-light", label: "Duotone Light", dark: false },
   { value: "duotone-dark", label: "Duotone Dark", dark: true },
   { value: "xcode", label: "Xcode", dark: false },
+  { value: "xcode-dark", label: "Xcode Dark", dark: true },
+  { value: "idea-light", label: "IDEA Light", dark: false },
+  { value: "idea-dark", label: "IDEA Darcula", dark: true },
+  { value: "jetbrains-light", label: "JetBrains Light", dark: false },
+  { value: "jetbrains-dark", label: "JetBrains Dark", dark: true },
+  { value: "cursor-light", label: "Cursor Light", dark: false },
+  { value: "cursor-dark", label: "Cursor Dark", dark: true },
+  { value: "claude-light", label: "Claude Code Light", dark: false },
+  { value: "claude-dark", label: "Claude Code Dark", dark: true },
   { value: "custom", label: "Custom", dark: true },
 ];
 
diff --git a/apps/desktop/src/styles/globals.css b/apps/desktop/src/styles/globals.css
index 003b24e6b6..cd839851ec 100644
--- a/apps/desktop/src/styles/globals.css
+++ b/apps/desktop/src/styles/globals.css
@@ -154,6 +154,966 @@
   --sidebar-ring: rgb(133 134 139);
 }
 
+html.theme-soft {
+  --background: rgb(250 251 253);
+  --foreground: rgb(40 44 52);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(36 40 48);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(36 40 48);
+  --primary: rgb(46 95 166);
+  --primary-foreground: rgb(247 250 255);
+  --secondary: rgb(237 241 246);
+  --secondary-foreground: rgb(47 53 63);
+  --muted: rgb(237 241 246);
+  --muted-foreground: rgb(104 113 126);
+  --accent: rgb(226 233 242);
+  --accent-foreground: rgb(36 44 57);
+  --destructive: rgb(197 68 58);
+  --border: rgb(208 215 224);
+  --input: rgb(198 207 218);
+  --ring: rgb(110 128 154);
+  --chart-1: rgb(84 125 191);
+  --chart-2: rgb(80 150 137);
+  --chart-3: rgb(184 128 58);
+  --chart-4: rgb(136 115 194);
+  --chart-5: rgb(191 94 89);
+  --sidebar: rgb(239 242 246);
+  --sidebar-foreground: rgb(48 54 65);
+  --sidebar-primary: rgb(46 95 166);
+  --sidebar-primary-foreground: rgb(247 250 255);
+  --sidebar-accent: rgb(224 231 241);
+  --sidebar-accent-foreground: rgb(34 41 52);
+  --sidebar-border: rgb(202 210 221);
+  --sidebar-ring: rgb(110 128 154);
+  --dbx-chrome: rgb(236 240 245);
+  --dbx-chrome-muted: rgb(231 236 243);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(246 248 251);
+  --dbx-gutter: rgb(229 234 241);
+  --dbx-sidebar-header: rgb(233 238 244);
+}
+
+html.theme-soft.dark {
+  --background: rgb(31 33 37);
+  --foreground: rgb(202 206 214);
+  --card: rgb(38 41 46);
+  --card-foreground: rgb(202 206 214);
+  --popover: rgb(42 45 51);
+  --popover-foreground: rgb(207 211 218);
+  --primary: rgb(157 177 205);
+  --primary-foreground: rgb(27 30 34);
+  --secondary: rgb(47 51 58);
+  --secondary-foreground: rgb(201 205 213);
+  --muted: rgb(47 51 58);
+  --muted-foreground: rgb(146 153 164);
+  --accent: rgb(55 60 69);
+  --accent-foreground: rgb(208 212 219);
+  --destructive: rgb(224 101 93);
+  --border: rgb(104 112 126 / 0.34);
+  --input: rgb(116 126 142 / 0.36);
+  --ring: rgb(138 148 164);
+  --chart-1: rgb(131 157 199);
+  --chart-2: rgb(111 168 153);
+  --chart-3: rgb(199 151 91);
+  --chart-4: rgb(160 145 207);
+  --chart-5: rgb(209 116 111);
+  --sidebar: rgb(34 37 42);
+  --sidebar-foreground: rgb(193 198 207);
+  --sidebar-primary: rgb(157 177 205);
+  --sidebar-primary-foreground: rgb(27 30 34);
+  --sidebar-accent: rgb(45 50 58);
+  --sidebar-accent-foreground: rgb(205 210 218);
+  --sidebar-border: rgb(105 114 128 / 0.32);
+  --sidebar-ring: rgb(138 148 164);
+  --dbx-chrome: rgb(39 43 49);
+  --dbx-chrome-muted: rgb(43 47 54);
+  --dbx-content: rgb(33 36 41);
+  --dbx-editor-toolbar: rgb(36 39 44);
+  --dbx-gutter: rgb(27 30 34);
+  --dbx-sidebar-header: rgb(38 42 48);
+}
+
+html.theme-graphite {
+  --background: rgb(249 250 252);
+  --foreground: rgb(42 45 51);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(39 42 48);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(39 42 48);
+  --primary: rgb(72 80 93);
+  --primary-foreground: rgb(248 250 252);
+  --secondary: rgb(238 240 244);
+  --secondary-foreground: rgb(49 53 61);
+  --muted: rgb(238 240 244);
+  --muted-foreground: rgb(106 112 123);
+  --accent: rgb(226 230 236);
+  --accent-foreground: rgb(39 44 53);
+  --destructive: rgb(198 72 62);
+  --border: rgb(210 215 224);
+  --input: rgb(198 204 214);
+  --ring: rgb(116 125 139);
+  --chart-1: rgb(92 107 127);
+  --chart-2: rgb(80 143 132);
+  --chart-3: rgb(178 132 74);
+  --chart-4: rgb(121 113 173);
+  --chart-5: rgb(184 94 91);
+  --sidebar: rgb(235 238 243);
+  --sidebar-foreground: rgb(48 52 60);
+  --sidebar-primary: rgb(72 80 93);
+  --sidebar-primary-foreground: rgb(248 250 252);
+  --sidebar-accent: rgb(222 227 235);
+  --sidebar-accent-foreground: rgb(39 44 53);
+  --sidebar-border: rgb(202 208 218);
+  --sidebar-ring: rgb(116 125 139);
+  --dbx-chrome: rgb(232 236 242);
+  --dbx-chrome-muted: rgb(226 231 238);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(246 248 251);
+  --dbx-gutter: rgb(224 229 237);
+  --dbx-sidebar-header: rgb(229 233 240);
+}
+
+html.theme-graphite.dark {
+  --background: rgb(30 32 36);
+  --foreground: rgb(198 201 207);
+  --card: rgb(38 40 45);
+  --card-foreground: rgb(199 202 208);
+  --popover: rgb(42 44 50);
+  --popover-foreground: rgb(205 208 214);
+  --primary: rgb(174 181 192);
+  --primary-foreground: rgb(27 29 33);
+  --secondary: rgb(47 50 57);
+  --secondary-foreground: rgb(199 202 208);
+  --muted: rgb(47 50 57);
+  --muted-foreground: rgb(144 150 160);
+  --accent: rgb(55 58 66);
+  --accent-foreground: rgb(207 210 216);
+  --destructive: rgb(223 101 92);
+  --border: rgb(104 110 122 / 0.34);
+  --input: rgb(115 123 137 / 0.36);
+  --ring: rgb(138 145 158);
+  --chart-1: rgb(146 158 176);
+  --chart-2: rgb(110 165 151);
+  --chart-3: rgb(198 150 92);
+  --chart-4: rgb(151 142 199);
+  --chart-5: rgb(206 113 109);
+  --sidebar: rgb(33 35 40);
+  --sidebar-foreground: rgb(190 195 203);
+  --sidebar-primary: rgb(174 181 192);
+  --sidebar-primary-foreground: rgb(27 29 33);
+  --sidebar-accent: rgb(45 48 55);
+  --sidebar-accent-foreground: rgb(204 208 215);
+  --sidebar-border: rgb(104 110 122 / 0.32);
+  --sidebar-ring: rgb(138 145 158);
+  --dbx-chrome: rgb(38 41 47);
+  --dbx-chrome-muted: rgb(43 46 53);
+  --dbx-content: rgb(32 34 39);
+  --dbx-editor-toolbar: rgb(36 38 43);
+  --dbx-gutter: rgb(27 29 33);
+  --dbx-sidebar-header: rgb(37 40 46);
+}
+
+html.theme-cobalt {
+  --background: rgb(247 250 253);
+  --foreground: rgb(32 43 58);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(30 41 56);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(30 41 56);
+  --primary: rgb(43 99 183);
+  --primary-foreground: rgb(247 250 255);
+  --secondary: rgb(232 240 250);
+  --secondary-foreground: rgb(38 52 70);
+  --muted: rgb(232 240 250);
+  --muted-foreground: rgb(96 111 130);
+  --accent: rgb(216 229 246);
+  --accent-foreground: rgb(31 48 72);
+  --destructive: rgb(197 70 61);
+  --border: rgb(200 212 229);
+  --input: rgb(187 204 224);
+  --ring: rgb(85 119 165);
+  --chart-1: rgb(60 111 191);
+  --chart-2: rgb(75 145 159);
+  --chart-3: rgb(180 130 64);
+  --chart-4: rgb(132 113 190);
+  --chart-5: rgb(190 91 95);
+  --sidebar: rgb(232 239 248);
+  --sidebar-foreground: rgb(37 51 68);
+  --sidebar-primary: rgb(43 99 183);
+  --sidebar-primary-foreground: rgb(247 250 255);
+  --sidebar-accent: rgb(214 228 246);
+  --sidebar-accent-foreground: rgb(31 48 72);
+  --sidebar-border: rgb(195 209 228);
+  --sidebar-ring: rgb(85 119 165);
+  --dbx-chrome: rgb(228 236 247);
+  --dbx-chrome-muted: rgb(221 231 245);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(244 248 253);
+  --dbx-gutter: rgb(218 229 243);
+  --dbx-sidebar-header: rgb(224 234 246);
+}
+
+html.theme-cobalt.dark {
+  --background: rgb(25 31 42);
+  --foreground: rgb(198 207 219);
+  --card: rgb(31 38 51);
+  --card-foreground: rgb(200 209 221);
+  --popover: rgb(35 43 58);
+  --popover-foreground: rgb(206 214 225);
+  --primary: rgb(137 173 223);
+  --primary-foreground: rgb(20 28 39);
+  --secondary: rgb(43 53 70);
+  --secondary-foreground: rgb(200 209 221);
+  --muted: rgb(43 53 70);
+  --muted-foreground: rgb(143 155 171);
+  --accent: rgb(49 62 82);
+  --accent-foreground: rgb(209 218 229);
+  --destructive: rgb(224 101 94);
+  --border: rgb(101 119 144 / 0.34);
+  --input: rgb(109 130 158 / 0.36);
+  --ring: rgb(133 154 184);
+  --chart-1: rgb(133 173 229);
+  --chart-2: rgb(107 172 184);
+  --chart-3: rgb(199 151 90);
+  --chart-4: rgb(158 143 207);
+  --chart-5: rgb(209 114 116);
+  --sidebar: rgb(28 35 48);
+  --sidebar-foreground: rgb(191 202 216);
+  --sidebar-primary: rgb(137 173 223);
+  --sidebar-primary-foreground: rgb(20 28 39);
+  --sidebar-accent: rgb(42 54 72);
+  --sidebar-accent-foreground: rgb(206 215 227);
+  --sidebar-border: rgb(101 119 144 / 0.32);
+  --sidebar-ring: rgb(133 154 184);
+  --dbx-chrome: rgb(32 40 54);
+  --dbx-chrome-muted: rgb(37 47 63);
+  --dbx-content: rgb(27 34 46);
+  --dbx-editor-toolbar: rgb(30 38 51);
+  --dbx-gutter: rgb(22 28 38);
+  --dbx-sidebar-header: rgb(31 39 53);
+}
+
+html.theme-sage {
+  --background: rgb(248 250 248);
+  --foreground: rgb(36 48 43);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(34 46 41);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(34 46 41);
+  --primary: rgb(58 123 106);
+  --primary-foreground: rgb(246 252 249);
+  --secondary: rgb(233 241 237);
+  --secondary-foreground: rgb(42 58 52);
+  --muted: rgb(233 241 237);
+  --muted-foreground: rgb(97 113 106);
+  --accent: rgb(219 234 227);
+  --accent-foreground: rgb(31 55 47);
+  --destructive: rgb(196 72 61);
+  --border: rgb(203 217 211);
+  --input: rgb(190 208 200);
+  --ring: rgb(88 135 119);
+  --chart-1: rgb(63 132 112);
+  --chart-2: rgb(74 137 168);
+  --chart-3: rgb(180 132 68);
+  --chart-4: rgb(132 115 185);
+  --chart-5: rgb(188 95 90);
+  --sidebar: rgb(235 242 238);
+  --sidebar-foreground: rgb(38 54 48);
+  --sidebar-primary: rgb(58 123 106);
+  --sidebar-primary-foreground: rgb(246 252 249);
+  --sidebar-accent: rgb(218 234 227);
+  --sidebar-accent-foreground: rgb(31 55 47);
+  --sidebar-border: rgb(197 213 206);
+  --sidebar-ring: rgb(88 135 119);
+  --dbx-chrome: rgb(231 239 235);
+  --dbx-chrome-muted: rgb(225 235 230);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(245 248 246);
+  --dbx-gutter: rgb(221 233 227);
+  --dbx-sidebar-header: rgb(228 237 233);
+}
+
+html.theme-sage.dark {
+  --background: rgb(27 35 33);
+  --foreground: rgb(198 208 204);
+  --card: rgb(34 43 40);
+  --card-foreground: rgb(200 210 206);
+  --popover: rgb(38 48 45);
+  --popover-foreground: rgb(206 216 212);
+  --primary: rgb(138 184 169);
+  --primary-foreground: rgb(22 32 29);
+  --secondary: rgb(44 57 53);
+  --secondary-foreground: rgb(200 210 206);
+  --muted: rgb(44 57 53);
+  --muted-foreground: rgb(143 157 151);
+  --accent: rgb(50 65 60);
+  --accent-foreground: rgb(208 218 214);
+  --destructive: rgb(224 102 94);
+  --border: rgb(100 122 113 / 0.34);
+  --input: rgb(107 132 122 / 0.36);
+  --ring: rgb(132 159 149);
+  --chart-1: rgb(134 188 170);
+  --chart-2: rgb(111 170 190);
+  --chart-3: rgb(199 151 91);
+  --chart-4: rgb(154 143 203);
+  --chart-5: rgb(207 114 108);
+  --sidebar: rgb(30 39 36);
+  --sidebar-foreground: rgb(191 203 198);
+  --sidebar-primary: rgb(138 184 169);
+  --sidebar-primary-foreground: rgb(22 32 29);
+  --sidebar-accent: rgb(43 58 53);
+  --sidebar-accent-foreground: rgb(205 217 212);
+  --sidebar-border: rgb(100 122 113 / 0.32);
+  --sidebar-ring: rgb(132 159 149);
+  --dbx-chrome: rgb(34 45 41);
+  --dbx-chrome-muted: rgb(39 51 47);
+  --dbx-content: rgb(29 38 35);
+  --dbx-editor-toolbar: rgb(32 42 39);
+  --dbx-gutter: rgb(24 31 29);
+  --dbx-sidebar-header: rgb(33 43 40);
+}
+
+html.theme-amber {
+  --background: rgb(255 252 242);
+  --foreground: rgb(56 48 32);
+  --card: rgb(255 255 250);
+  --card-foreground: rgb(51 44 30);
+  --popover: rgb(255 255 250);
+  --popover-foreground: rgb(51 44 30);
+  --primary: rgb(149 95 28);
+  --primary-foreground: rgb(255 250 236);
+  --secondary: rgb(247 238 213);
+  --secondary-foreground: rgb(68 56 36);
+  --muted: rgb(247 238 213);
+  --muted-foreground: rgb(123 105 70);
+  --accent: rgb(239 219 174);
+  --accent-foreground: rgb(65 48 24);
+  --destructive: rgb(191 72 57);
+  --border: rgb(224 207 168);
+  --input: rgb(211 191 148);
+  --ring: rgb(166 119 47);
+  --chart-1: rgb(171 111 34);
+  --chart-2: rgb(93 137 112);
+  --chart-3: rgb(69 124 162);
+  --chart-4: rgb(134 111 178);
+  --chart-5: rgb(184 90 87);
+  --sidebar: rgb(247 238 213);
+  --sidebar-foreground: rgb(61 51 33);
+  --sidebar-primary: rgb(149 95 28);
+  --sidebar-primary-foreground: rgb(255 250 236);
+  --sidebar-accent: rgb(239 221 181);
+  --sidebar-accent-foreground: rgb(65 48 24);
+  --sidebar-border: rgb(218 199 158);
+  --sidebar-ring: rgb(166 119 47);
+  --dbx-chrome: rgb(244 233 203);
+  --dbx-chrome-muted: rgb(239 226 191);
+  --dbx-content: rgb(255 255 250);
+  --dbx-editor-toolbar: rgb(252 247 232);
+  --dbx-gutter: rgb(235 219 181);
+  --dbx-sidebar-header: rgb(242 229 196);
+}
+
+html.theme-amber.dark {
+  --background: rgb(37 34 27);
+  --foreground: rgb(217 208 188);
+  --card: rgb(45 41 32);
+  --card-foreground: rgb(219 210 191);
+  --popover: rgb(50 46 36);
+  --popover-foreground: rgb(225 216 197);
+  --primary: rgb(213 169 75);
+  --primary-foreground: rgb(34 29 21);
+  --secondary: rgb(59 53 40);
+  --secondary-foreground: rgb(218 209 190);
+  --muted: rgb(59 53 40);
+  --muted-foreground: rgb(163 150 123);
+  --accent: rgb(71 61 43);
+  --accent-foreground: rgb(228 219 199);
+  --destructive: rgb(225 104 92);
+  --border: rgb(129 112 77 / 0.36);
+  --input: rgb(141 121 83 / 0.38);
+  --ring: rgb(185 151 84);
+  --chart-1: rgb(214 170 78);
+  --chart-2: rgb(121 171 139);
+  --chart-3: rgb(103 161 198);
+  --chart-4: rgb(160 143 205);
+  --chart-5: rgb(210 115 111);
+  --sidebar: rgb(41 37 29);
+  --sidebar-foreground: rgb(210 200 180);
+  --sidebar-primary: rgb(213 169 75);
+  --sidebar-primary-foreground: rgb(34 29 21);
+  --sidebar-accent: rgb(57 50 36);
+  --sidebar-accent-foreground: rgb(224 215 196);
+  --sidebar-border: rgb(129 112 77 / 0.34);
+  --sidebar-ring: rgb(185 151 84);
+  --dbx-chrome: rgb(48 43 33);
+  --dbx-chrome-muted: rgb(54 48 36);
+  --dbx-content: rgb(39 36 28);
+  --dbx-editor-toolbar: rgb(43 39 31);
+  --dbx-gutter: rgb(32 29 23);
+  --dbx-sidebar-header: rgb(46 41 32);
+}
+
+html.theme-blush {
+  --background: rgb(255 248 251);
+  --foreground: rgb(61 48 56);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(57 45 53);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(57 45 53);
+  --primary: rgb(184 86 123);
+  --primary-foreground: rgb(255 248 251);
+  --secondary: rgb(246 232 239);
+  --secondary-foreground: rgb(74 55 67);
+  --muted: rgb(246 232 239);
+  --muted-foreground: rgb(126 98 115);
+  --accent: rgb(239 213 226);
+  --accent-foreground: rgb(83 50 68);
+  --destructive: rgb(197 69 64);
+  --border: rgb(226 202 214);
+  --input: rgb(214 187 201);
+  --ring: rgb(188 111 141);
+  --chart-1: rgb(190 88 126);
+  --chart-2: rgb(117 141 190);
+  --chart-3: rgb(116 157 132);
+  --chart-4: rgb(180 132 74);
+  --chart-5: rgb(137 108 183);
+  --sidebar: rgb(248 234 241);
+  --sidebar-foreground: rgb(66 50 60);
+  --sidebar-primary: rgb(184 86 123);
+  --sidebar-primary-foreground: rgb(255 248 251);
+  --sidebar-accent: rgb(239 214 226);
+  --sidebar-accent-foreground: rgb(83 50 68);
+  --sidebar-border: rgb(220 195 208);
+  --sidebar-ring: rgb(188 111 141);
+  --dbx-chrome: rgb(246 230 238);
+  --dbx-chrome-muted: rgb(240 220 230);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(253 246 250);
+  --dbx-gutter: rgb(237 216 227);
+  --dbx-sidebar-header: rgb(243 225 235);
+}
+
+html.theme-blush.dark {
+  --background: rgb(42 35 40);
+  --foreground: rgb(221 205 214);
+  --card: rgb(52 42 49);
+  --card-foreground: rgb(223 207 216);
+  --popover: rgb(58 47 55);
+  --popover-foreground: rgb(230 214 222);
+  --primary: rgb(226 160 184);
+  --primary-foreground: rgb(39 29 35);
+  --secondary: rgb(67 52 62);
+  --secondary-foreground: rgb(222 206 215);
+  --muted: rgb(67 52 62);
+  --muted-foreground: rgb(166 140 154);
+  --accent: rgb(82 59 72);
+  --accent-foreground: rgb(231 216 224);
+  --destructive: rgb(226 102 96);
+  --border: rgb(139 108 124 / 0.35);
+  --input: rgb(151 116 134 / 0.38);
+  --ring: rgb(202 143 164);
+  --chart-1: rgb(225 160 184);
+  --chart-2: rgb(134 159 211);
+  --chart-3: rgb(126 178 151);
+  --chart-4: rgb(202 152 93);
+  --chart-5: rgb(170 145 207);
+  --sidebar: rgb(47 38 45);
+  --sidebar-foreground: rgb(214 197 207);
+  --sidebar-primary: rgb(226 160 184);
+  --sidebar-primary-foreground: rgb(39 29 35);
+  --sidebar-accent: rgb(66 51 61);
+  --sidebar-accent-foreground: rgb(229 213 222);
+  --sidebar-border: rgb(139 108 124 / 0.33);
+  --sidebar-ring: rgb(202 143 164);
+  --dbx-chrome: rgb(55 44 52);
+  --dbx-chrome-muted: rgb(62 49 58);
+  --dbx-content: rgb(44 36 42);
+  --dbx-editor-toolbar: rgb(50 40 47);
+  --dbx-gutter: rgb(37 30 35);
+  --dbx-sidebar-header: rgb(52 42 49);
+}
+
+html.theme-vscode {
+  --background: rgb(255 255 255);
+  --foreground: rgb(51 51 51);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(45 45 45);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(45 45 45);
+  --primary: rgb(0 122 204);
+  --primary-foreground: rgb(255 255 255);
+  --secondary: rgb(243 243 243);
+  --secondary-foreground: rgb(51 51 51);
+  --muted: rgb(243 243 243);
+  --muted-foreground: rgb(106 106 106);
+  --accent: rgb(229 241 251);
+  --accent-foreground: rgb(0 74 122);
+  --destructive: rgb(196 72 62);
+  --border: rgb(224 224 224);
+  --input: rgb(206 206 206);
+  --ring: rgb(0 122 204);
+  --chart-1: rgb(0 122 204);
+  --chart-2: rgb(64 143 114);
+  --chart-3: rgb(186 133 62);
+  --chart-4: rgb(126 112 190);
+  --chart-5: rgb(190 90 90);
+  --sidebar: rgb(243 243 243);
+  --sidebar-foreground: rgb(51 51 51);
+  --sidebar-primary: rgb(0 122 204);
+  --sidebar-primary-foreground: rgb(255 255 255);
+  --sidebar-accent: rgb(230 230 230);
+  --sidebar-accent-foreground: rgb(45 45 45);
+  --sidebar-border: rgb(216 216 216);
+  --sidebar-ring: rgb(0 122 204);
+  --dbx-chrome: rgb(221 221 221);
+  --dbx-chrome-muted: rgb(232 232 232);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(246 246 246);
+  --dbx-gutter: rgb(229 229 229);
+  --dbx-sidebar-header: rgb(236 236 236);
+}
+
+html.theme-vscode.dark {
+  --background: rgb(30 30 30);
+  --foreground: rgb(204 204 204);
+  --card: rgb(37 37 38);
+  --card-foreground: rgb(204 204 204);
+  --popover: rgb(45 45 48);
+  --popover-foreground: rgb(212 212 212);
+  --primary: rgb(0 122 204);
+  --primary-foreground: rgb(255 255 255);
+  --secondary: rgb(45 45 48);
+  --secondary-foreground: rgb(204 204 204);
+  --muted: rgb(45 45 48);
+  --muted-foreground: rgb(133 133 133);
+  --accent: rgb(38 79 120);
+  --accent-foreground: rgb(235 244 255);
+  --destructive: rgb(241 112 105);
+  --border: rgb(60 60 60);
+  --input: rgb(70 70 70);
+  --ring: rgb(0 122 204);
+  --chart-1: rgb(55 148 255);
+  --chart-2: rgb(78 201 176);
+  --chart-3: rgb(220 180 120);
+  --chart-4: rgb(197 134 192);
+  --chart-5: rgb(244 135 113);
+  --sidebar: rgb(37 37 38);
+  --sidebar-foreground: rgb(204 204 204);
+  --sidebar-primary: rgb(0 122 204);
+  --sidebar-primary-foreground: rgb(255 255 255);
+  --sidebar-accent: rgb(45 45 48);
+  --sidebar-accent-foreground: rgb(212 212 212);
+  --sidebar-border: rgb(60 60 60);
+  --sidebar-ring: rgb(0 122 204);
+  --dbx-chrome: rgb(51 51 51);
+  --dbx-chrome-muted: rgb(45 45 48);
+  --dbx-content: rgb(30 30 30);
+  --dbx-editor-toolbar: rgb(37 37 38);
+  --dbx-gutter: rgb(27 27 28);
+  --dbx-sidebar-header: rgb(45 45 48);
+}
+
+html.theme-idea {
+  --background: rgb(250 250 250);
+  --foreground: rgb(43 43 43);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(40 40 40);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(40 40 40);
+  --primary: rgb(75 110 175);
+  --primary-foreground: rgb(255 255 255);
+  --secondary: rgb(239 240 242);
+  --secondary-foreground: rgb(47 49 52);
+  --muted: rgb(239 240 242);
+  --muted-foreground: rgb(106 109 113);
+  --accent: rgb(218 231 249);
+  --accent-foreground: rgb(34 68 124);
+  --destructive: rgb(196 72 62);
+  --border: rgb(213 215 219);
+  --input: rgb(200 203 209);
+  --ring: rgb(75 110 175);
+  --chart-1: rgb(75 110 175);
+  --chart-2: rgb(78 139 119);
+  --chart-3: rgb(181 128 62);
+  --chart-4: rgb(132 112 184);
+  --chart-5: rgb(188 91 87);
+  --sidebar: rgb(235 236 240);
+  --sidebar-foreground: rgb(47 49 52);
+  --sidebar-primary: rgb(75 110 175);
+  --sidebar-primary-foreground: rgb(255 255 255);
+  --sidebar-accent: rgb(222 226 233);
+  --sidebar-accent-foreground: rgb(34 68 124);
+  --sidebar-border: rgb(207 210 216);
+  --sidebar-ring: rgb(75 110 175);
+  --dbx-chrome: rgb(230 231 235);
+  --dbx-chrome-muted: rgb(224 226 231);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(246 247 249);
+  --dbx-gutter: rgb(222 225 231);
+  --dbx-sidebar-header: rgb(229 231 236);
+}
+
+html.theme-idea.dark {
+  --background: rgb(43 43 43);
+  --foreground: rgb(187 187 187);
+  --card: rgb(60 63 65);
+  --card-foreground: rgb(187 187 187);
+  --popover: rgb(67 70 72);
+  --popover-foreground: rgb(200 200 200);
+  --primary: rgb(106 135 197);
+  --primary-foreground: rgb(30 32 34);
+  --secondary: rgb(60 63 65);
+  --secondary-foreground: rgb(187 187 187);
+  --muted: rgb(60 63 65);
+  --muted-foreground: rgb(139 141 143);
+  --accent: rgb(72 78 86);
+  --accent-foreground: rgb(210 218 234);
+  --destructive: rgb(226 104 96);
+  --border: rgb(85 86 87);
+  --input: rgb(96 97 98);
+  --ring: rgb(106 135 197);
+  --chart-1: rgb(106 135 197);
+  --chart-2: rgb(98 170 142);
+  --chart-3: rgb(204 152 88);
+  --chart-4: rgb(166 145 205);
+  --chart-5: rgb(211 115 108);
+  --sidebar: rgb(49 51 53);
+  --sidebar-foreground: rgb(184 186 188);
+  --sidebar-primary: rgb(106 135 197);
+  --sidebar-primary-foreground: rgb(30 32 34);
+  --sidebar-accent: rgb(62 66 70);
+  --sidebar-accent-foreground: rgb(206 214 229);
+  --sidebar-border: rgb(85 86 87);
+  --sidebar-ring: rgb(106 135 197);
+  --dbx-chrome: rgb(60 63 65);
+  --dbx-chrome-muted: rgb(55 58 60);
+  --dbx-content: rgb(43 43 43);
+  --dbx-editor-toolbar: rgb(50 53 55);
+  --dbx-gutter: rgb(38 38 38);
+  --dbx-sidebar-header: rgb(55 58 60);
+}
+
+html.theme-xcode {
+  --background: rgb(250 252 255);
+  --foreground: rgb(31 41 55);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(29 39 53);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(29 39 53);
+  --primary: rgb(10 132 255);
+  --primary-foreground: rgb(255 255 255);
+  --secondary: rgb(235 239 245);
+  --secondary-foreground: rgb(43 55 72);
+  --muted: rgb(235 239 245);
+  --muted-foreground: rgb(98 110 126);
+  --accent: rgb(219 236 255);
+  --accent-foreground: rgb(0 75 153);
+  --destructive: rgb(200 71 62);
+  --border: rgb(207 216 228);
+  --input: rgb(194 206 221);
+  --ring: rgb(10 132 255);
+  --chart-1: rgb(10 132 255);
+  --chart-2: rgb(78 145 163);
+  --chart-3: rgb(184 132 67);
+  --chart-4: rgb(130 113 190);
+  --chart-5: rgb(190 92 90);
+  --sidebar: rgb(242 245 250);
+  --sidebar-foreground: rgb(43 55 72);
+  --sidebar-primary: rgb(10 132 255);
+  --sidebar-primary-foreground: rgb(255 255 255);
+  --sidebar-accent: rgb(224 235 250);
+  --sidebar-accent-foreground: rgb(0 75 153);
+  --sidebar-border: rgb(201 211 224);
+  --sidebar-ring: rgb(10 132 255);
+  --dbx-chrome: rgb(233 237 243);
+  --dbx-chrome-muted: rgb(226 232 240);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(247 249 252);
+  --dbx-gutter: rgb(221 229 239);
+  --dbx-sidebar-header: rgb(235 240 247);
+}
+
+html.theme-xcode.dark {
+  --background: rgb(31 35 41);
+  --foreground: rgb(215 221 231);
+  --card: rgb(37 41 50);
+  --card-foreground: rgb(216 222 232);
+  --popover: rgb(45 51 59);
+  --popover-foreground: rgb(224 229 237);
+  --primary: rgb(10 132 255);
+  --primary-foreground: rgb(255 255 255);
+  --secondary: rgb(45 51 59);
+  --secondary-foreground: rgb(216 222 232);
+  --muted: rgb(45 51 59);
+  --muted-foreground: rgb(149 158 173);
+  --accent: rgb(29 69 117);
+  --accent-foreground: rgb(222 238 255);
+  --destructive: rgb(229 105 96);
+  --border: rgb(94 106 124 / 0.42);
+  --input: rgb(104 118 139 / 0.44);
+  --ring: rgb(86 160 255);
+  --chart-1: rgb(86 160 255);
+  --chart-2: rgb(111 174 190);
+  --chart-3: rgb(203 153 90);
+  --chart-4: rgb(160 144 207);
+  --chart-5: rgb(211 116 111);
+  --sidebar: rgb(37 41 50);
+  --sidebar-foreground: rgb(207 214 225);
+  --sidebar-primary: rgb(10 132 255);
+  --sidebar-primary-foreground: rgb(255 255 255);
+  --sidebar-accent: rgb(45 54 68);
+  --sidebar-accent-foreground: rgb(220 236 255);
+  --sidebar-border: rgb(94 106 124 / 0.38);
+  --sidebar-ring: rgb(86 160 255);
+  --dbx-chrome: rgb(45 51 59);
+  --dbx-chrome-muted: rgb(39 45 53);
+  --dbx-content: rgb(31 35 41);
+  --dbx-editor-toolbar: rgb(35 39 46);
+  --dbx-gutter: rgb(25 29 34);
+  --dbx-sidebar-header: rgb(42 47 56);
+}
+
+html.theme-jetbrains {
+  --background: rgb(248 249 251);
+  --foreground: rgb(31 35 40);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(28 32 37);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(28 32 37);
+  --primary: rgb(108 93 211);
+  --primary-foreground: rgb(255 255 255);
+  --secondary: rgb(235 237 241);
+  --secondary-foreground: rgb(43 48 56);
+  --muted: rgb(235 237 241);
+  --muted-foreground: rgb(100 108 119);
+  --accent: rgb(229 225 251);
+  --accent-foreground: rgb(66 52 153);
+  --destructive: rgb(198 72 62);
+  --border: rgb(211 216 224);
+  --input: rgb(198 204 214);
+  --ring: rgb(108 93 211);
+  --chart-1: rgb(108 93 211);
+  --chart-2: rgb(57 151 167);
+  --chart-3: rgb(184 132 67);
+  --chart-4: rgb(72 125 197);
+  --chart-5: rgb(190 91 90);
+  --sidebar: rgb(242 243 245);
+  --sidebar-foreground: rgb(43 48 56);
+  --sidebar-primary: rgb(108 93 211);
+  --sidebar-primary-foreground: rgb(255 255 255);
+  --sidebar-accent: rgb(229 231 236);
+  --sidebar-accent-foreground: rgb(66 52 153);
+  --sidebar-border: rgb(205 210 219);
+  --sidebar-ring: rgb(108 93 211);
+  --dbx-chrome: rgb(235 237 241);
+  --dbx-chrome-muted: rgb(228 231 236);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(247 248 250);
+  --dbx-gutter: rgb(224 228 235);
+  --dbx-sidebar-header: rgb(237 239 243);
+}
+
+html.theme-jetbrains.dark {
+  --background: rgb(30 31 34);
+  --foreground: rgb(223 225 229);
+  --card: rgb(43 45 48);
+  --card-foreground: rgb(223 225 229);
+  --popover: rgb(49 51 56);
+  --popover-foreground: rgb(231 233 237);
+  --primary: rgb(123 97 255);
+  --primary-foreground: rgb(255 255 255);
+  --secondary: rgb(43 45 48);
+  --secondary-foreground: rgb(223 225 229);
+  --muted: rgb(43 45 48);
+  --muted-foreground: rgb(161 164 171);
+  --accent: rgb(61 58 89);
+  --accent-foreground: rgb(233 231 255);
+  --destructive: rgb(229 105 96);
+  --border: rgb(77 80 86);
+  --input: rgb(89 92 99);
+  --ring: rgb(123 97 255);
+  --chart-1: rgb(123 97 255);
+  --chart-2: rgb(75 190 202);
+  --chart-3: rgb(207 155 91);
+  --chart-4: rgb(105 162 230);
+  --chart-5: rgb(214 116 111);
+  --sidebar: rgb(43 45 48);
+  --sidebar-foreground: rgb(215 218 224);
+  --sidebar-primary: rgb(123 97 255);
+  --sidebar-primary-foreground: rgb(255 255 255);
+  --sidebar-accent: rgb(54 56 61);
+  --sidebar-accent-foreground: rgb(232 231 255);
+  --sidebar-border: rgb(77 80 86);
+  --sidebar-ring: rgb(123 97 255);
+  --dbx-chrome: rgb(43 45 48);
+  --dbx-chrome-muted: rgb(37 39 42);
+  --dbx-content: rgb(30 31 34);
+  --dbx-editor-toolbar: rgb(35 37 40);
+  --dbx-gutter: rgb(24 25 28);
+  --dbx-sidebar-header: rgb(39 41 44);
+}
+
+html.theme-cursor {
+  --background: rgb(251 252 254);
+  --foreground: rgb(31 36 45);
+  --card: rgb(255 255 255);
+  --card-foreground: rgb(28 33 42);
+  --popover: rgb(255 255 255);
+  --popover-foreground: rgb(28 33 42);
+  --primary: rgb(59 130 246);
+  --primary-foreground: rgb(255 255 255);
+  --secondary: rgb(239 241 245);
+  --secondary-foreground: rgb(42 49 60);
+  --muted: rgb(239 241 245);
+  --muted-foreground: rgb(101 111 126);
+  --accent: rgb(222 235 255);
+  --accent-foreground: rgb(31 79 154);
+  --destructive: rgb(198 72 62);
+  --border: rgb(213 218 226);
+  --input: rgb(199 206 217);
+  --ring: rgb(59 130 246);
+  --chart-1: rgb(59 130 246);
+  --chart-2: rgb(78 151 166);
+  --chart-3: rgb(184 132 67);
+  --chart-4: rgb(132 112 190);
+  --chart-5: rgb(190 91 90);
+  --sidebar: rgb(244 245 247);
+  --sidebar-foreground: rgb(42 49 60);
+  --sidebar-primary: rgb(59 130 246);
+  --sidebar-primary-foreground: rgb(255 255 255);
+  --sidebar-accent: rgb(230 234 241);
+  --sidebar-accent-foreground: rgb(31 79 154);
+  --sidebar-border: rgb(207 213 223);
+  --sidebar-ring: rgb(59 130 246);
+  --dbx-chrome: rgb(242 243 245);
+  --dbx-chrome-muted: rgb(234 237 242);
+  --dbx-content: rgb(255 255 255);
+  --dbx-editor-toolbar: rgb(247 248 250);
+  --dbx-gutter: rgb(228 232 239);
+  --dbx-sidebar-header: rgb(238 240 244);
+}
+
+html.theme-cursor.dark {
+  --background: rgb(15 17 26);
+  --foreground: rgb(213 215 222);
+  --card: rgb(21 24 33);
+  --card-foreground: rgb(214 216 223);
+  --popover: rgb(27 30 39);
+  --popover-foreground: rgb(223 225 232);
+  --primary: rgb(107 164 255);
+  --primary-foreground: rgb(8 12 20);
+  --secondary: rgb(27 30 39);
+  --secondary-foreground: rgb(214 216 223);
+  --muted: rgb(27 30 39);
+  --muted-foreground: rgb(142 149 164);
+  --accent: rgb(31 51 82);
+  --accent-foreground: rgb(222 236 255);
+  --destructive: rgb(228 104 96);
+  --border: rgb(82 91 111 / 0.42);
+  --input: rgb(93 104 128 / 0.44);
+  --ring: rgb(107 164 255);
+  --chart-1: rgb(107 164 255);
+  --chart-2: rgb(91 187 199);
+  --chart-3: rgb(204 154 91);
+  --chart-4: rgb(162 143 207);
+  --chart-5: rgb(213 116 111);
+  --sidebar: rgb(21 24 33);
+  --sidebar-foreground: rgb(205 209 219);
+  --sidebar-primary: rgb(107 164 255);
+  --sidebar-primary-foreground: rgb(8 12 20);
+  --sidebar-accent: rgb(28 34 46);
+  --sidebar-accent-foreground: rgb(219 233 255);
+  --sidebar-border: rgb(82 91 111 / 0.38);
+  --sidebar-ring: rgb(107 164 255);
+  --dbx-chrome: rgb(27 30 39);
+  --dbx-chrome-muted: rgb(24 27 36);
+  --dbx-content: rgb(15 17 26);
+  --dbx-editor-toolbar: rgb(20 23 32);
+  --dbx-gutter: rgb(11 13 20);
+  --dbx-sidebar-header: rgb(25 28 38);
+}
+
+html.theme-claude {
+  --background: rgb(251 247 239);
+  --foreground: rgb(51 43 35);
+  --card: rgb(255 253 248);
+  --card-foreground: rgb(48 40 32);
+  --popover: rgb(255 253 248);
+  --popover-foreground: rgb(48 40 32);
+  --primary: rgb(184 107 60);
+  --primary-foreground: rgb(255 250 243);
+  --secondary: rgb(242 231 219);
+  --secondary-foreground: rgb(65 53 43);
+  --muted: rgb(242 231 219);
+  --muted-foreground: rgb(117 98 81);
+  --accent: rgb(234 216 198);
+  --accent-foreground: rgb(99 54 31);
+  --destructive: rgb(195 73 61);
+  --border: rgb(221 205 187);
+  --input: rgb(209 190 169);
+  --ring: rgb(184 107 60);
+  --chart-1: rgb(184 107 60);
+  --chart-2: rgb(84 139 119);
+  --chart-3: rgb(75 124 160);
+  --chart-4: rgb(135 112 178);
+  --chart-5: rgb(188 92 87);
+  --sidebar: rgb(239 231 220);
+  --sidebar-foreground: rgb(58 48 39);
+  --sidebar-primary: rgb(184 107 60);
+  --sidebar-primary-foreground: rgb(255 250 243);
+  --sidebar-accent: rgb(231 216 200);
+  --sidebar-accent-foreground: rgb(99 54 31);
+  --sidebar-border: rgb(215 199 181);
+  --sidebar-ring: rgb(184 107 60);
+  --dbx-chrome: rgb(241 231 219);
+  --dbx-chrome-muted: rgb(234 222 209);
+  --dbx-content: rgb(255 253 248);
+  --dbx-editor-toolbar: rgb(248 241 233);
+  --dbx-gutter: rgb(230 216 199);
+  --dbx-sidebar-header: rgb(236 226 214);
+}
+
+html.theme-claude.dark {
+  --background: rgb(33 31 28);
+  --foreground: rgb(216 208 196);
+  --card: rgb(42 39 35);
+  --card-foreground: rgb(219 211 199);
+  --popover: rgb(49 45 40);
+  --popover-foreground: rgb(226 218 206);
+  --primary: rgb(210 138 95);
+  --primary-foreground: rgb(35 27 21);
+  --secondary: rgb(55 49 43);
+  --secondary-foreground: rgb(219 211 199);
+  --muted: rgb(55 49 43);
+  --muted-foreground: rgb(163 150 134);
+  --accent: rgb(68 56 47);
+  --accent-foreground: rgb(232 222 210);
+  --destructive: rgb(226 103 95);
+  --border: rgb(127 108 91 / 0.38);
+  --input: rgb(138 117 98 / 0.4);
+  --ring: rgb(210 138 95);
+  --chart-1: rgb(210 138 95);
+  --chart-2: rgb(116 177 149);
+  --chart-3: rgb(101 161 198);
+  --chart-4: rgb(160 143 205);
+  --chart-5: rgb(211 115 109);
+  --sidebar: rgb(42 39 35);
+  --sidebar-foreground: rgb(210 201 188);
+  --sidebar-primary: rgb(210 138 95);
+  --sidebar-primary-foreground: rgb(35 27 21);
+  --sidebar-accent: rgb(56 50 44);
+  --sidebar-accent-foreground: rgb(229 219 207);
+  --sidebar-border: rgb(127 108 91 / 0.35);
+  --sidebar-ring: rgb(210 138 95);
+  --dbx-chrome: rgb(49 45 40);
+  --dbx-chrome-muted: rgb(55 49 43);
+  --dbx-content: rgb(33 31 28);
+  --dbx-editor-toolbar: rgb(39 36 32);
+  --dbx-gutter: rgb(27 25 23);
+  --dbx-sidebar-header: rgb(45 41 37);
+}
+
 @supports (color: oklch(1 0 0)) {
   :root {
     --background: oklch(1 0 0);
@@ -222,6 +1182,86 @@
     --sidebar-border: oklch(0.54 0.006 285 / 28%);
     --sidebar-ring: oklch(0.62 0.008 285);
   }
+
+  html.theme-soft {
+    --background: oklch(0.985 0.003 255);
+    --foreground: oklch(0.315 0.018 255);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.295 0.018 255);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.295 0.018 255);
+    --primary: oklch(0.48 0.115 255);
+    --primary-foreground: oklch(0.985 0.006 255);
+    --secondary: oklch(0.955 0.008 255);
+    --secondary-foreground: oklch(0.36 0.02 255);
+    --muted: oklch(0.955 0.008 255);
+    --muted-foreground: oklch(0.53 0.024 255);
+    --accent: oklch(0.925 0.014 255);
+    --accent-foreground: oklch(0.32 0.03 255);
+    --destructive: oklch(0.55 0.16 28);
+    --border: oklch(0.875 0.012 255);
+    --input: oklch(0.835 0.018 255);
+    --ring: oklch(0.61 0.045 255);
+    --chart-1: oklch(0.57 0.12 255);
+    --chart-2: oklch(0.62 0.09 180);
+    --chart-3: oklch(0.65 0.12 70);
+    --chart-4: oklch(0.62 0.1 300);
+    --chart-5: oklch(0.63 0.13 28);
+    --sidebar: oklch(0.955 0.007 255);
+    --sidebar-foreground: oklch(0.35 0.022 255);
+    --sidebar-primary: oklch(0.48 0.115 255);
+    --sidebar-primary-foreground: oklch(0.985 0.006 255);
+    --sidebar-accent: oklch(0.92 0.014 255);
+    --sidebar-accent-foreground: oklch(0.31 0.03 255);
+    --sidebar-border: oklch(0.855 0.014 255);
+    --sidebar-ring: oklch(0.61 0.045 255);
+    --dbx-chrome: oklch(0.948 0.008 255);
+    --dbx-chrome-muted: oklch(0.93 0.012 255);
+    --dbx-content: oklch(1 0 0);
+    --dbx-editor-toolbar: oklch(0.973 0.005 255);
+    --dbx-gutter: oklch(0.925 0.011 255);
+    --dbx-sidebar-header: oklch(0.94 0.009 255);
+  }
+
+  html.theme-soft.dark {
+    --background: oklch(0.245 0.009 260);
+    --foreground: oklch(0.835 0.014 260);
+    --card: oklch(0.285 0.011 260);
+    --card-foreground: oklch(0.835 0.014 260);
+    --popover: oklch(0.305 0.012 260);
+    --popover-foreground: oklch(0.855 0.014 260);
+    --primary: oklch(0.76 0.045 260);
+    --primary-foreground: oklch(0.22 0.01 260);
+    --secondary: oklch(0.345 0.013 260);
+    --secondary-foreground: oklch(0.83 0.014 260);
+    --muted: oklch(0.345 0.013 260);
+    --muted-foreground: oklch(0.68 0.018 260);
+    --accent: oklch(0.385 0.018 260);
+    --accent-foreground: oklch(0.86 0.014 260);
+    --destructive: oklch(0.68 0.16 26);
+    --border: oklch(0.62 0.018 260 / 34%);
+    --input: oklch(0.66 0.02 260 / 36%);
+    --ring: oklch(0.68 0.025 260);
+    --chart-1: oklch(0.69 0.08 255);
+    --chart-2: oklch(0.7 0.09 180);
+    --chart-3: oklch(0.72 0.11 70);
+    --chart-4: oklch(0.7 0.08 300);
+    --chart-5: oklch(0.7 0.12 28);
+    --sidebar: oklch(0.265 0.011 260);
+    --sidebar-foreground: oklch(0.805 0.015 260);
+    --sidebar-primary: oklch(0.76 0.045 260);
+    --sidebar-primary-foreground: oklch(0.22 0.01 260);
+    --sidebar-accent: oklch(0.335 0.016 260);
+    --sidebar-accent-foreground: oklch(0.85 0.014 260);
+    --sidebar-border: oklch(0.62 0.018 260 / 32%);
+    --sidebar-ring: oklch(0.68 0.025 260);
+    --dbx-chrome: oklch(0.295 0.012 260);
+    --dbx-chrome-muted: oklch(0.32 0.013 260);
+    --dbx-content: oklch(0.255 0.01 260);
+    --dbx-editor-toolbar: oklch(0.275 0.01 260);
+    --dbx-gutter: oklch(0.215 0.01 260);
+    --dbx-sidebar-header: oklch(0.285 0.012 260);
+  }
 }
 
 html.disable-transitions,
@@ -315,6 +1355,35 @@ body.dbx-table-reference-dragging * {
   background: rgb(23 23 25);
   background: oklch(0.205 0.004 285);
 }
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-panel-gutter {
+  background: var(--dbx-gutter);
+}
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-toolbar,
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-tab-bar {
+  border-color: var(--border);
+  background: var(--dbx-chrome);
+}
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-sidebar-panel {
+  color: var(--sidebar-foreground);
+  background: var(--sidebar);
+}
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-layout-classic > .app-sidebar-panel {
+  border-right: 1px solid var(--sidebar-border);
+}
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-sidebar-toolbar,
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .connection-tree-search,
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .sticky-database-header {
+  border-color: var(--sidebar-border);
+  background: var(--dbx-sidebar-header);
+}
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-editor-toolbar {
+  border-color: var(--border);
+  background: var(--dbx-editor-toolbar);
+}
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-layout-classic > .min-w-0,
+:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-layout-classic > .flex-1 {
+  background: var(--dbx-content);
+}
 .app-layout-classic .panel-resize-handle {
   width: 3px;
 }