fix: default color not selected in appearance color palette

web-app/src/containers/ColorPickerAppBgColor.tsx

@@ -8,22 +8,25 @@ 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[] = [
-    {
+    isDark
-      r: 20,
+      ? {
-      g: 20,
+          r: 25,
-      b: 20,
+          g: 25,
+          b: 25,
           a: IS_WINDOWS || IS_LINUX || !IS_TAURI ? 1 : 0.4,
-    },
+        }
-    {
+      : {
-      r: 250,
+          r: 255,
-      g: 250,
+          g: 255,
-      b: 250,
+          b: 255,
           a: IS_WINDOWS || IS_LINUX || !IS_TAURI ? 1 : 0.4,
         },
     {

web-app/src/containers/ColorPickerAppDestructiveColor.tsx

@@ -7,15 +7,19 @@ 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[] = [
-    {
+    isDark
-      r: 220,
+      ? { r: 144, g: 60, b: 60, a: 1 }
-      g: 45,
+      : {
-      b: 45,
+          r: 217,
+          g: 95,
+          b: 95,
           a: 1,
         },
     {

web-app/src/containers/ColorPickerAppMainView.tsx

@@ -7,21 +7,24 @@ 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[] = [
-    {
+    isDark
-      r: 251,
+      ? {
-      g: 251,
+          r: 25,
-      b: 251,
+          g: 25,
+          b: 25,
           a: 1,
-    },
+        }
-    {
+      : {
-      r: 24,
+          r: 255,
-      g: 24,
+          g: 255,
-      b: 24,
+          b: 255,
           a: 1,
         },
   ]