fix: color of button is actived on color picker (#8685)

toeverything · Nov 7, 2024 · ef55aba · ef55aba
1 parent e37be7f
commit ef55aba
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git 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
@@ -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;
   }