From ef55abad6b3ba03f14b6fd0f854835f6648ed826 Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Thu, 7 Nov 2024 14:43:30 +0000
Subject: [PATCH] fix: color of button is actived on color picker (#8685)

---
 packages/affine/shared/src/services/theme-service.ts        | 1 +
 .../root-block/edgeless/components/color-picker/styles.ts   | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/affine/shared/src/services/theme-service.ts b/packages/affine/shared/src/services/theme-service.ts
index fdf65df172d6..23515790b1ee 100644
--- a/packages/affine/shared/src/services/theme-service.ts
+++ b/packages/affine/shared/src/services/theme-service.ts
@@ -218,6 +218,7 @@ const toolbarColorKeys: Array<keyof AffineCssVariables> = [
   '--affine-text-primary-color',
   '--affine-hover-color',
   '--affine-hover-color-filled',
+  '--affine-white',
 ];
 
 export const lightToolbarStyles = toolbarColorKeys.map(
diff --git a/packages/blocks/src/root-block/edgeless/components/color-picker/styles.ts b/packages/blocks/src/root-block/edgeless/components/color-picker/styles.ts
index 63ce62e6fc4a..f32f80ae86d5 100644
--- a/packages/blocks/src/root-block/edgeless/components/color-picker/styles.ts
+++ b/packages/blocks/src/root-block/edgeless/components/color-picker/styles.ts
@@ -40,7 +40,7 @@ export const COLOR_PICKER_STYLE = css`
 
   nav button[active] {
     color: var(--affine-text-primary-color, #121212);
-    background: var(--affine-white);
+    background: var(--affine-background-primary-color);
     box-shadow: var(--affine-shadow-1);
     pointer-events: none;
   }
@@ -95,7 +95,7 @@ export const COLOR_PICKER_STYLE = css`
   }
   .modes .mode button[active] {
     pointer-events: none;
-    outline: 2px solid var(--affine-brand-color);
+    outline: 2px solid var(--affine-brand-color, #1e96eb);
   }
 
   .content {
@@ -255,7 +255,7 @@ export const COLOR_PICKER_STYLE = css`
     gap: 4px;
     border-radius: 8px;
     border: 1px solid var(--affine-border-color);
-    background: var(--affine-white-30);
+    background: var(--affine-background-tertiary-color);
     box-sizing: border-box;
   }