From b2b0c64c48d366028e1588da21f5719246c71838 Mon Sep 17 00:00:00 2001
From: Chaiyapruek Muangsiri <cmp.poon@gmail.com>
Date: Fri, 8 Aug 2025 09:00:44 +0800
Subject: [PATCH] fix: default color not selected in appearance color palette

---
 .../src/containers/ColorPickerAppBgColor.tsx  | 27 ++++++++++---------
 .../ColorPickerAppDestructiveColor.tsx        | 16 ++++++-----
 .../src/containers/ColorPickerAppMainView.tsx | 27 ++++++++++---------
 3 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/web-app/src/containers/ColorPickerAppBgColor.tsx b/web-app/src/containers/ColorPickerAppBgColor.tsx
index eefffc272..02130a374 100644
--- a/web-app/src/containers/ColorPickerAppBgColor.tsx
+++ b/web-app/src/containers/ColorPickerAppBgColor.tsx
@@ -8,24 +8,27 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { useTranslation } from '@/i18n/react-i18next-compat'
+import { useTheme } from '@/hooks/useTheme'
 
 export function ColorPickerAppBgColor() {
   const { appBgColor, setAppBgColor } = useAppearance()
+  const { isDark } = useTheme()
   const { t } = useTranslation()
 
   const predefineAppBgColor: RgbaColor[] = [
-    {
-      r: 20,
-      g: 20,
-      b: 20,
-      a: IS_WINDOWS || IS_LINUX || !IS_TAURI ? 1 : 0.4,
-    },
-    {
-      r: 250,
-      g: 250,
-      b: 250,
-      a: IS_WINDOWS || IS_LINUX || !IS_TAURI ? 1 : 0.4,
-    },
+    isDark
+      ? {
+          r: 25,
+          g: 25,
+          b: 25,
+          a: IS_WINDOWS || IS_LINUX || !IS_TAURI ? 1 : 0.4,
+        }
+      : {
+          r: 255,
+          g: 255,
+          b: 255,
+          a: IS_WINDOWS || IS_LINUX || !IS_TAURI ? 1 : 0.4,
+        },
     {
       r: 70,
       g: 79,
diff --git a/web-app/src/containers/ColorPickerAppDestructiveColor.tsx b/web-app/src/containers/ColorPickerAppDestructiveColor.tsx
index 08fe3302b..ca6c1fe9a 100644
--- a/web-app/src/containers/ColorPickerAppDestructiveColor.tsx
+++ b/web-app/src/containers/ColorPickerAppDestructiveColor.tsx
@@ -7,17 +7,21 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { useTheme } from '@/hooks/useTheme'
 
 export function ColorPickerAppDestructiveColor() {
   const { appDestructiveBgColor, setAppDestructiveBgColor } = useAppearance()
+  const { isDark } = useTheme()
 
   const predefineAppDestructiveBgColor: RgbaColor[] = [
-    {
-      r: 220,
-      g: 45,
-      b: 45,
-      a: 1,
-    },
+    isDark
+      ? { r: 144, g: 60, b: 60, a: 1 }
+      : {
+          r: 217,
+          g: 95,
+          b: 95,
+          a: 1,
+        },
     {
       r: 220,
       g: 100,
diff --git a/web-app/src/containers/ColorPickerAppMainView.tsx b/web-app/src/containers/ColorPickerAppMainView.tsx
index 7d11053e7..27d84c508 100644
--- a/web-app/src/containers/ColorPickerAppMainView.tsx
+++ b/web-app/src/containers/ColorPickerAppMainView.tsx
@@ -7,23 +7,26 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { useTheme } from '@/hooks/useTheme'
 
 export function ColorPickerAppMainView() {
   const { appMainViewBgColor, setAppMainViewBgColor } = useAppearance()
+  const { isDark } = useTheme()
 
   const predefineAppMainViewBgColor: RgbaColor[] = [
-    {
-      r: 251,
-      g: 251,
-      b: 251,
-      a: 1,
-    },
-    {
-      r: 24,
-      g: 24,
-      b: 24,
-      a: 1,
-    },
+    isDark
+      ? {
+          r: 25,
+          g: 25,
+          b: 25,
+          a: 1,
+        }
+      : {
+          r: 255,
+          g: 255,
+          b: 255,
+          a: 1,
+        },
   ]
 
   return (