Add configurable black app icons and logo (#564)

apps/desktop/src/components/auth/LoginPage.vue

@@ -4,6 +4,7 @@ import { useI18n } from "vue-i18n";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Lock, Loader2, ShieldCheck } from "lucide-vue-next";
+import AppLogo from "@/components/icons/AppLogo.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -55,7 +56,7 @@ async function submit() {
   >
     <div class="w-[360px] space-y-8">
       <div class="flex flex-col items-center gap-4">
-        <img src="/logo.png" alt="DBX" class="w-20 h-20 rounded-2xl shadow-lg shadow-blue-500/20" />
+        <AppLogo class="w-20 h-20 rounded-2xl shadow-lg shadow-blue-500/20" />
         <div class="text-center">
           <h1 class="text-2xl font-bold tracking-tight">DBX</h1>
           <p class="text-sm text-muted-foreground mt-1">

apps/desktop/src/components/editor/EditorSettingsDialog.vue

@@ -36,6 +36,7 @@ import {
   type AiProvider,
   type AiApiStyle,
   type EditorTheme,
+  type DesktopIconTheme,
 } from "@/stores/settingsStore";
 import { loadEditorTheme, editorFontTheme } from "@/lib/editorThemes";
 import { isTauriRuntime } from "@/lib/tauriRuntime";
@@ -66,6 +67,7 @@ import type { SqlSnippet } from "@/types/database";
 import { uuid } from "@/lib/utils";
 import { DEFAULT_SQL_SNIPPETS } from "@/lib/sqlCompletion";
 import AiProviderLogo from "@/components/icons/AiProviderLogo.vue";
+import AppLogo from "@/components/icons/AppLogo.vue";
 import type { AppThemeAppearance } from "@/lib/appTheme";
 import { useConnectionStore } from "@/stores/connectionStore";
 
@@ -93,6 +95,7 @@ const editExecuteMode = ref(settingsStore.editorSettings.executeMode);
 const editWordWrap = ref(settingsStore.editorSettings.wordWrap);
 const editAppLayout = ref(settingsStore.editorSettings.appLayout);
 const editShowTrayIcon = ref(settingsStore.desktopSettings.show_tray_icon);
+const editIconTheme = ref<DesktopIconTheme>(settingsStore.desktopSettings.icon_theme);
 const editShowColumnCommentsInHeader = ref(settingsStore.editorSettings.showColumnCommentsInHeader);
 const editCompactColumnHeaderActions = ref(settingsStore.editorSettings.compactColumnHeaderActions);
 const editRedisScanPageSize = ref(settingsStore.editorSettings.redisScanPageSize);
@@ -228,6 +231,7 @@ watch(
       editWordWrap.value = settingsStore.editorSettings.wordWrap;
       editAppLayout.value = settingsStore.editorSettings.appLayout;
       editShowTrayIcon.value = settingsStore.desktopSettings.show_tray_icon;
+      editIconTheme.value = settingsStore.desktopSettings.icon_theme;
       editShowColumnCommentsInHeader.value = settingsStore.editorSettings.showColumnCommentsInHeader;
       editCompactColumnHeaderActions.value = settingsStore.editorSettings.compactColumnHeaderActions;
       editRedisScanPageSize.value = settingsStore.editorSettings.redisScanPageSize;
@@ -266,6 +270,7 @@ function hasChanges(): boolean {
     editWordWrap.value !== settingsStore.editorSettings.wordWrap ||
     editAppLayout.value !== settingsStore.editorSettings.appLayout ||
     editShowTrayIcon.value !== settingsStore.desktopSettings.show_tray_icon ||
+    editIconTheme.value !== settingsStore.desktopSettings.icon_theme ||
     editShowColumnCommentsInHeader.value !== settingsStore.editorSettings.showColumnCommentsInHeader ||
     editCompactColumnHeaderActions.value !== settingsStore.editorSettings.compactColumnHeaderActions ||
     editRedisScanPageSize.value !== settingsStore.editorSettings.redisScanPageSize ||
@@ -305,6 +310,7 @@ async function persistSettings() {
   });
   await settingsStore.updateDesktopSettings({
     show_tray_icon: editShowTrayIcon.value,
+    icon_theme: editIconTheme.value,
   });
   if (sidebarObjectDisplayChanged) {
     await connectionStore.refreshAllTree();
@@ -329,6 +335,7 @@ function resetDefaults() {
   editWordWrap.value = DEFAULT_EDITOR_SETTINGS.wordWrap;
   editAppLayout.value = DEFAULT_EDITOR_SETTINGS.appLayout;
   editShowTrayIcon.value = DEFAULT_DESKTOP_SETTINGS.show_tray_icon;
+  editIconTheme.value = DEFAULT_DESKTOP_SETTINGS.icon_theme;
   editShowColumnCommentsInHeader.value = DEFAULT_EDITOR_SETTINGS.showColumnCommentsInHeader;
   editCompactColumnHeaderActions.value = DEFAULT_EDITOR_SETTINGS.compactColumnHeaderActions;
   editRedisScanPageSize.value = DEFAULT_EDITOR_SETTINGS.redisScanPageSize;
@@ -362,6 +369,10 @@ function setSidebarObjectDisplay(value: "grouped" | "simple") {
   editSidebarObjectDisplay.value = value;
 }
 
+function setIconTheme(value: DesktopIconTheme) {
+  editIconTheme.value = value;
+}
+
 function onShortcutChange(actionId: ShortcutActionId, value: any) {
   if (typeof value !== "string") return;
   const definition = SHORTCUT_DEFINITIONS.find((item) => item.id === actionId);
@@ -591,6 +602,7 @@ watch(
       await settingsStore.initAiConfig();
       await settingsStore.initDesktopSettings();
       editShowTrayIcon.value = settingsStore.desktopSettings.show_tray_icon;
+      editIconTheme.value = settingsStore.desktopSettings.icon_theme;
       webdavPassword.value = "";
       await refreshWebDavPasswordStatus();
       syncAiEditState();
@@ -1164,6 +1176,43 @@ watch(
                   </Button>
                 </div>
               </div>
+
+              <div v-if="!isWeb" class="space-y-2">
+                <Label>{{ t("settings.iconTheme") }}</Label>
+                <div class="grid grid-cols-2 gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    class="h-auto justify-start border p-3"
+                    :class="editIconTheme === 'default' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''"
+                    @click="setIconTheme('default')"
+                  >
+                    <div class="flex items-center gap-3 text-left">
+                      <img src="/logo.png" alt="DBX" class="h-8 w-8 rounded-md" />
+                      <div>
+                        <div class="text-sm font-medium">{{ t("settings.iconThemeDefault") }}</div>
+                        <div class="text-xs text-muted-foreground">{{ t("settings.iconThemeDefaultDescription") }}</div>
+                      </div>
+                    </div>
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    class="h-auto justify-start border p-3"
+                    :class="editIconTheme === 'black' ? 'border-blue-300 ring-2 ring-blue-300/50' : ''"
+                    @click="setIconTheme('black')"
+                  >
+                    <div class="flex items-center gap-3 text-left">
+                      <img src="/logo-black.png" alt="DBX" class="h-8 w-8 dark:invert" />
+                      <div>
+                        <div class="text-sm font-medium">{{ t("settings.iconThemeBlack") }}</div>
+                        <div class="text-xs text-muted-foreground">{{ t("settings.iconThemeBlackDescription") }}</div>
+                      </div>
+                    </div>
+                  </Button>
+                </div>
+              </div>
+
               <div
                 v-if="!isWeb"
                 class="flex items-center justify-between gap-4 rounded-md border bg-muted/20 px-3 py-2"
@@ -1889,7 +1938,7 @@ watch(
                     {{ t("settings.project") }}
                   </div>
                   <div class="mt-3 flex items-center gap-2 text-sm font-medium">
-                    <img src="/logo.png" alt="DBX" class="h-7 w-7 rounded-md" />
+                    <AppLogo class="h-7 w-7" />
                     {{ t("settings.officialDocs") }}
                     <ExternalLink class="ml-auto h-3.5 w-3.5 text-muted-foreground" />
                   </div>

apps/desktop/src/components/icons/AppLogo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useSettingsStore } from "@/stores/settingsStore";
+
+const settingsStore = useSettingsStore();
+const isBlackLogo = computed(() => settingsStore.desktopSettings.icon_theme === "black");
+const logoSrc = computed(() => (isBlackLogo.value ? "/logo-black.png" : "/logo.png"));
+</script>
+
+<template>
+  <img :src="logoSrc" alt="DBX" :class="isBlackLogo ? 'dark:invert' : ''" />
+</template>

apps/desktop/src/i18n/locales/en.ts

@@ -1456,6 +1456,11 @@ export default {
     appLayoutSeparatedDescription: "Clear panel separation with block-style tabs.",
     appLayoutClassic: "Classic compact",
     appLayoutClassicDescription: "Continuous tab bar with compact panel headers.",
+    iconTheme: "Icon and logo style",
+    iconThemeDefault: "Default",
+    iconThemeDefaultDescription: "Use the color DBX app icon.",
+    iconThemeBlack: "Black",
+    iconThemeBlackDescription: "Use the black DBX mark for the window, tray, and logo.",
     showTrayIcon: "Show tray/menu bar icon",
     showTrayIconDescription:
       "When disabled, no icon is shown, but closing the window still hides DBX in the background as before.",

apps/desktop/src/i18n/locales/es.ts

@@ -1349,6 +1349,11 @@ export default {
     appLayoutSeparatedDescription: "Separación clara de paneles con pestañas en bloque.",
     appLayoutClassic: "Clásico compacto",
     appLayoutClassicDescription: "Barra de pestañas continua con encabezados de panel compactos.",
+    iconTheme: "Estilo de icono y logo",
+    iconThemeDefault: "Predeterminado",
+    iconThemeDefaultDescription: "Usar el icono de color de DBX.",
+    iconThemeBlack: "Negro",
+    iconThemeBlackDescription: "Usar la marca negra de DBX en ventana, bandeja y logo.",
     showTrayIcon: "Mostrar icono en bandeja/barra de menú",
     showTrayIconDescription:
       "Si está desactivado, no se muestra el icono, pero cerrar la ventana sigue ocultando DBX en segundo plano como antes.",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -1430,6 +1430,11 @@ export default {
     appLayoutSeparatedDescription: "面板分隔更清晰，标签页为块状样式。",
     appLayoutClassic: "经典紧凑",
     appLayoutClassicDescription: "使用连续标签栏和更紧凑的面板标题。",
+    iconTheme: "图标与 Logo 样式",
+    iconThemeDefault: "默认",
+    iconThemeDefaultDescription: "使用彩色 DBX 应用图标。",
+    iconThemeBlack: "黑色",
+    iconThemeBlackDescription: "窗口、托盘和 Logo 都使用黑色 DBX 标识。",
     showTrayIcon: "显示系统托盘/菜单栏图标",
     showTrayIconDescription: "关闭后不显示图标，但关闭窗口仍会像之前一样隐藏到后台。",
     dataGridDisplay: "数据表格显示",

apps/desktop/src/lib/http.ts

@@ -789,7 +789,7 @@ export async function loadAiConfig(): Promise<AiConfig | null> {
 }
 
 export async function loadDesktopSettings(): Promise<DesktopSettings> {
-  return { show_tray_icon: true };
+  return { show_tray_icon: true, icon_theme: "default" };
 }
 
 export async function saveDesktopSettings(_settings: DesktopSettings): Promise<void> {

apps/desktop/src/lib/tauri.ts

@@ -97,6 +97,7 @@ export interface DriverStoreUsage {
 
 export interface DesktopSettings {
   show_tray_icon: boolean;
+  icon_theme: "default" | "black";
 }
 
 export interface WebDavConfig {

apps/desktop/src/stores/settingsStore.ts

@@ -38,12 +38,24 @@ export interface AiConfig {
 
 export interface DesktopSettings {
   show_tray_icon: boolean;
+  icon_theme: DesktopIconTheme;
 }
 
+export type DesktopIconTheme = "default" | "black";
+
 export const DEFAULT_DESKTOP_SETTINGS: DesktopSettings = {
   show_tray_icon: true,
+  icon_theme: "default",
 };
 
+function normalizeDesktopSettings(settings: Partial<DesktopSettings> | null | undefined): DesktopSettings {
+  const iconTheme = settings?.icon_theme === "black" ? "black" : DEFAULT_DESKTOP_SETTINGS.icon_theme;
+  return {
+    show_tray_icon: settings?.show_tray_icon ?? DEFAULT_DESKTOP_SETTINGS.show_tray_icon,
+    icon_theme: iconTheme,
+  };
+}
+
 export interface AiProviderPreset extends Omit<AiConfig, "apiKey"> {
   label: string;
   iconSlug?: string;
@@ -415,7 +427,7 @@ export const useSettingsStore = defineStore("settings", () => {
 
   async function initDesktopSettings() {
     if (isDesktopSettingsLoaded.value) return;
-    desktopSettings.value = await api.loadDesktopSettings().catch(() => ({ ...DEFAULT_DESKTOP_SETTINGS }));
+    desktopSettings.value = normalizeDesktopSettings(await api.loadDesktopSettings().catch(() => null));
     isDesktopSettingsLoaded.value = true;
   }
 
@@ -425,9 +437,9 @@ export const useSettingsStore = defineStore("settings", () => {
       ...desktopSettings.value,
       ...partial,
     };
-    desktopSettings.value = next;
+    desktopSettings.value = normalizeDesktopSettings(next);
     try {
-      await api.saveDesktopSettings(next);
+      await api.saveDesktopSettings(desktopSettings.value);
     } catch (error) {
       desktopSettings.value = previous;
       throw error;