chore: fix color (#2049)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>

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

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',

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,

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' } : {}),

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);