From b2e93433e159dff036b0ec895a698835d732acbb Mon Sep 17 00:00:00 2001
From: Flrande <50035259+Flrande@users.noreply.github.com>
Date: Thu, 20 Apr 2023 22:13:20 +0800
Subject: [PATCH] chore: fix color (#2049)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>
---
 apps/web/src/components/affine/pinboard/styles.ts    |  3 +--
 .../workspace-header/editor-mode-switch/style.ts     | 12 ++----------
 apps/web/src/providers/ThemeProvider.tsx             |  3 +++
 packages/component/src/ui/button/styles.ts           |  2 +-
 packages/component/src/ui/toast/toast.ts             |  4 ++--
 5 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/components/affine/pinboard/styles.ts b/apps/web/src/components/affine/pinboard/styles.ts
index e801ae6fc3..376b74661c 100644
--- a/apps/web/src/components/affine/pinboard/styles.ts
+++ b/apps/web/src/components/affine/pinboard/styles.ts
@@ -1,5 +1,4 @@
 import {
-  alpha,
   displayFlex,
   IconButton,
   styled,
@@ -62,7 +61,7 @@ export const StyledPinboard = styled('div')<{
         ? 'var(--affine-primary-color)'
         : 'var(--affine-text-primary-color)',
       cursor: disable ? 'not-allowed' : 'pointer',
-      background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
+      background: isOver ? 'rgba(118, 95, 254, 0.06)' : '',
       fontSize: 'var(--affine-font-base)',
       userSelect: 'none',
       ...(textWrap
diff --git a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
index c7c5dc29b4..b4c4f0aa59 100644
--- a/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
+++ b/apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
@@ -4,17 +4,12 @@ export const StyledEditorModeSwitch = styled('div')<{
   switchLeft: boolean;
   showAlone?: boolean;
 }>(({ theme, switchLeft, showAlone }) => {
-  const {
-    palette: { mode },
-  } = theme;
   return {
     width: showAlone ? '40px' : '78px',
     height: '32px',
     background: showAlone
       ? 'transparent'
-      : mode === 'dark'
-      ? '#242424'
-      : '#F9F9FB',
+      : 'var(--affine-background-primary-color)',
     borderRadius: '12px',
     ...displayFlex('space-between', 'center'),
     padding: '0 8px',
@@ -26,10 +21,7 @@ export const StyledEditorModeSwitch = styled('div')<{
       width: '24px',
       height: '24px',
       background: 'var(--affine-background-primary-color)',
-      boxShadow:
-        mode === 'dark'
-          ? '0px 0px 6px rgba(22, 22, 22, 0.6)'
-          : '0px 0px 6px #E2E2E2',
+      boxShadow: 'var(--affine-tooltip-shadow)',
       borderRadius: '8px',
       zIndex: 1,
       position: 'absolute',
diff --git a/apps/web/src/providers/ThemeProvider.tsx b/apps/web/src/providers/ThemeProvider.tsx
index a74aeb1816..ffc430316e 100644
--- a/apps/web/src/providers/ThemeProvider.tsx
+++ b/apps/web/src/providers/ThemeProvider.tsx
@@ -30,6 +30,9 @@ const CssVariablesInjector = memo<{
             return variables;
           }, {} as AffineCssVariables),
         },
+        body: {
+          color: 'var(--affine-text-primary-colorr)',
+        },
         html: {
           fontFamily: theme.fontFamily,
           fontSize: theme.fontBase,
diff --git a/packages/component/src/ui/button/styles.ts b/packages/component/src/ui/button/styles.ts
index 136dac2cf2..b7342832be 100644
--- a/packages/component/src/ui/button/styles.ts
+++ b/packages/component/src/ui/button/styles.ts
@@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
       width,
       height,
       fontSize,
-      color: 'var(--affine-hover-color)',
+      color: 'var(--affine-icon-color)',
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
       ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
diff --git a/packages/component/src/ui/toast/toast.ts b/packages/component/src/ui/toast/toast.ts
index 9f42cffc4b..4c56a3f872 100644
--- a/packages/component/src/ui/toast/toast.ts
+++ b/packages/component/src/ui/toast/toast.ts
@@ -75,8 +75,8 @@ export const toast = (
     font-size: var(--affine-font-sm);
     padding: 6px 12px;
     margin: 10px 0 0 0;
-    color: var(--affine-tooltip-color);
-    background: var(--affine-tooltip-background);
+    color: var(--affine-white);
+    background: var(--affine-tooltip);
     box-shadow: var(--affine-tooltip-shadow);
     border-radius: 10px;
     transition: all 230ms cubic-bezier(0.21, 1.02, 0.73, 1);