Merge pull request #6092 from cmppoon/fix-default-predefine-color-palette

fix: default color not selected in appearance color palette

Author: louis-jan

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,

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,

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 (