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 02130a374..72e098aa4 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'
@@ -60,10 +60,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 ca6c1fe9a..f1f50aad4 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'
@@ -46,10 +46,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 27d84c508..d6e918903 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'
@@ -33,10 +33,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}