From 38b020236573113fa897fccca73e7b79e84efe67 Mon Sep 17 00:00:00 2001
From: Louis <la.programmations@gmail.com>
Date: Fri, 15 Aug 2025 19:00:13 +0200
Subject: [PATCH] fix: resolve issue #6025 - default color selection in
 appearance page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix default color selection logic in all color picker components
- Use existing helper functions (isDefaultColor, isDefaultColorPrimary, etc.)
- Ensure default colors are properly highlighted when active
- Apply fix to all color pickers: primary, accent, destructive, main view, and background

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web-app/src/containers/ColorPickerAppAccentColor.tsx      | 7 ++++---
 web-app/src/containers/ColorPickerAppBgColor.tsx          | 7 ++++---
 web-app/src/containers/ColorPickerAppDestructiveColor.tsx | 7 ++++---
 web-app/src/containers/ColorPickerAppMainView.tsx         | 7 ++++---
 web-app/src/containers/ColorPickerAppPrimaryColor.tsx     | 7 ++++---
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/web-app/src/containers/ColorPickerAppAccentColor.tsx b/web-app/src/containers/ColorPickerAppAccentColor.tsx
index 751543b7d..85178b7a0 100644
--- a/web-app/src/containers/ColorPickerAppAccentColor.tsx
+++ b/web-app/src/containers/ColorPickerAppAccentColor.tsx
@@ -1,4 +1,4 @@
-import { useAppearance } from '@/hooks/useAppearance'
+import { useAppearance, isDefaultColorAccent } from '@/hooks/useAppearance'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -37,10 +37,11 @@ export function ColorPickerAppAccentColor() {
     <div className="flex items-center gap-1.5">
       {predefineAppAccentBgColor.map((item, i) => {
         const isSelected =
-          item.r === appAccentBgColor.r &&
+          (item.r === appAccentBgColor.r &&
           item.g === appAccentBgColor.g &&
           item.b === appAccentBgColor.b &&
-          item.a === appAccentBgColor.a
+          item.a === appAccentBgColor.a) ||
+          (isDefaultColorAccent(appAccentBgColor) && isDefaultColorAccent(item))
         return (
           <div
             key={i}
diff --git a/web-app/src/containers/ColorPickerAppBgColor.tsx b/web-app/src/containers/ColorPickerAppBgColor.tsx
index eefffc272..f81c2014a 100644
--- a/web-app/src/containers/ColorPickerAppBgColor.tsx
+++ b/web-app/src/containers/ColorPickerAppBgColor.tsx
@@ -1,4 +1,4 @@
-import { useAppearance } from '@/hooks/useAppearance'
+import { useAppearance, isDefaultColor } from '@/hooks/useAppearance'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -57,10 +57,11 @@ export function ColorPickerAppBgColor() {
     <div className="flex items-center gap-1.5">
       {predefineAppBgColor.map((item, i) => {
         const isSelected =
-          item.r === appBgColor.r &&
+          (item.r === appBgColor.r &&
           item.g === appBgColor.g &&
           item.b === appBgColor.b &&
-          item.a === appBgColor.a
+          item.a === appBgColor.a) ||
+          (isDefaultColor(appBgColor) && isDefaultColor(item))
         return (
           <div
             key={i}
diff --git a/web-app/src/containers/ColorPickerAppDestructiveColor.tsx b/web-app/src/containers/ColorPickerAppDestructiveColor.tsx
index 08fe3302b..095d78876 100644
--- a/web-app/src/containers/ColorPickerAppDestructiveColor.tsx
+++ b/web-app/src/containers/ColorPickerAppDestructiveColor.tsx
@@ -1,4 +1,4 @@
-import { useAppearance } from '@/hooks/useAppearance'
+import { useAppearance, isDefaultColorDestructive } from '@/hooks/useAppearance'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -42,10 +42,11 @@ export function ColorPickerAppDestructiveColor() {
     <div className="flex items-center gap-1.5">
       {predefineAppDestructiveBgColor.map((item, i) => {
         const isSelected =
-          item.r === appDestructiveBgColor.r &&
+          (item.r === appDestructiveBgColor.r &&
           item.g === appDestructiveBgColor.g &&
           item.b === appDestructiveBgColor.b &&
-          item.a === appDestructiveBgColor.a
+          item.a === appDestructiveBgColor.a) ||
+          (isDefaultColorDestructive(appDestructiveBgColor) && isDefaultColorDestructive(item))
         return (
           <div
             key={i}
diff --git a/web-app/src/containers/ColorPickerAppMainView.tsx b/web-app/src/containers/ColorPickerAppMainView.tsx
index 7d11053e7..c067b0852 100644
--- a/web-app/src/containers/ColorPickerAppMainView.tsx
+++ b/web-app/src/containers/ColorPickerAppMainView.tsx
@@ -1,4 +1,4 @@
-import { useAppearance } from '@/hooks/useAppearance'
+import { useAppearance, isDefaultColorMainView } from '@/hooks/useAppearance'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -30,10 +30,11 @@ export function ColorPickerAppMainView() {
     <div className="flex items-center gap-1.5">
       {predefineAppMainViewBgColor.map((item, i) => {
         const isSelected =
-          item.r === appMainViewBgColor.r &&
+          (item.r === appMainViewBgColor.r &&
           item.g === appMainViewBgColor.g &&
           item.b === appMainViewBgColor.b &&
-          item.a === appMainViewBgColor.a
+          item.a === appMainViewBgColor.a) ||
+          (isDefaultColorMainView(appMainViewBgColor) && isDefaultColorMainView(item))
         return (
           <div
             key={i}
diff --git a/web-app/src/containers/ColorPickerAppPrimaryColor.tsx b/web-app/src/containers/ColorPickerAppPrimaryColor.tsx
index dc51064d8..188d66c3f 100644
--- a/web-app/src/containers/ColorPickerAppPrimaryColor.tsx
+++ b/web-app/src/containers/ColorPickerAppPrimaryColor.tsx
@@ -1,4 +1,4 @@
-import { useAppearance } from '@/hooks/useAppearance'
+import { useAppearance, isDefaultColorPrimary } from '@/hooks/useAppearance'
 import { cn } from '@/lib/utils'
 import { RgbaColor, RgbaColorPicker } from 'react-colorful'
 import { IconColorPicker } from '@tabler/icons-react'
@@ -42,10 +42,11 @@ export function ColorPickerAppPrimaryColor() {
     <div className="flex items-center gap-1.5">
       {predefineappPrimaryBgColor.map((item, i) => {
         const isSelected =
-          item.r === appPrimaryBgColor.r &&
+          (item.r === appPrimaryBgColor.r &&
           item.g === appPrimaryBgColor.g &&
           item.b === appPrimaryBgColor.b &&
-          item.a === appPrimaryBgColor.a
+          item.a === appPrimaryBgColor.a) ||
+          (isDefaultColorPrimary(appPrimaryBgColor) && isDefaultColorPrimary(item))
         return (
           <div
             key={i}