feat: upgrate to new theme (#2027)

Co-authored-by: Himself65 <himself65@outlook.com>
2026-02-13 21:05:19 +00:00 · 2023-04-20 16:31:19 +08:00
parent 63f7b2556e
commit 372377dd6b
61 changed files with 624 additions and 1037 deletions
--- a/apps/web/src/components/pure/footer/styles.ts
+++ b/apps/web/src/components/pure/footer/styles.ts
@@ -10,7 +10,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
-    background: theme.colors.borderColor,
+    background: 'var(--affine-border-color)',
    marginRight: '24px',
  };
 });
@@ -21,7 +21,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
    width: '202px',
    p: {
      height: '20px',
-      fontSize: theme.font.sm,
+      fontSize: 'var(--affine-font-sm)',
      ...displayFlex('flex-start', 'center'),
    },
    svg: {
@@ -38,7 +38,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {

 export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
  return {
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
    fontWeight: 600,
    lineHeight: '24px',
    marginBottom: '10px',
@@ -50,7 +50,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
 export const StyledCard = styled('div')<{
  active?: boolean;
 }>(({ theme, active }) => {
-  const borderColor = active ? theme.colors.primaryColor : 'transparent';
+  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
  return {
    width: '310px',
    height: '124px',
@@ -64,10 +64,10 @@ export const StyledCard = styled('div')<{
    transition: 'background .2s',
    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
-      background: theme.colors.cardHoverBackground,
+      background: 'var(--affine-hover-color)',
      '.add-icon': {
-        borderColor: theme.colors.primaryColor,
-        color: theme.colors.primaryColor,
+        borderColor: 'var(--affine-primary-color)',
+        color: 'var(--affine-primary-color)',
      },
    },
  };
@@ -87,10 +87,10 @@ export const StyleUserInfo = styled('div')(({ theme }) => {
    flex: 1,
    p: {
      lineHeight: '24px',
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
    },
    'p:first-of-type': {
-      color: theme.colors.textColor,
+      color: 'var(--affine-text-primary-color)',
      fontWeight: 600,
    },
  };
@@ -102,16 +102,16 @@ export const StyledModalHeaderLeft = styled('div')(() => {
 export const StyledModalTitle = styled('div')(({ theme }) => {
  return {
    fontWeight: 600,
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
  };
 });

 export const StyledHelperContainer = styled('div')(({ theme }) => {
  return {
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
    marginLeft: '15px',
    fontWeight: 400,
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
    ...displayFlex('center', 'center'),
  };
 });
@@ -162,8 +162,8 @@ export const StyledSignInButton = styled(Button)(({ theme }) => {
      width: '40px',
      height: '40px',
      borderRadius: '20px',
-      backgroundColor: theme.colors.hoverBackground,
-      color: theme.colors.primaryColor,
+      backgroundColor: 'var(--affine-hover-color)',
+      color: 'var(--affine-primary-color)',
      fontSize: '24px',
      flexShrink: 0,
      marginRight: '16px',
--- a/apps/web/src/components/pure/help-island/style.ts
+++ b/apps/web/src/components/pure/help-island/style.ts
@@ -12,7 +12,7 @@ export const StyledIsland = styled('div')<{
      : 'unset',
    padding: '0 4px 44px',
    borderRadius: '10px',
-    backgroundColor: theme.colors.pageBackground,
+    backgroundColor: 'var(--affine-background-primary-color)',
    ':hover': {
      boxShadow:
        '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
@@ -21,7 +21,7 @@ export const StyledIsland = styled('div')<{
      content: '""',
      width: '36px',
      height: '1px',
-      background: spread ? theme.colors.borderColor : 'transparent',
+      background: spread ? 'var(--affine-border-color)' : 'transparent',
      ...positionAbsolute({
        left: 0,
        right: 0,
@@ -34,11 +34,11 @@ export const StyledIsland = styled('div')<{
 });
 export const StyledIconWrapper = styled('div')(({ theme }) => {
  return {
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
    ...displayFlex('center', 'center'),
    cursor: 'pointer',
    fontSize: '24px',
-    backgroundColor: theme.colors.pageBackground,
+    backgroundColor: 'var(--affine-background-primary-color)',
    borderRadius: '5px',
    width: '36px',
    height: '36px',
@@ -46,8 +46,8 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
    transition: 'background-color 0.2s',
    position: 'relative',
    ':hover': {
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
+      color: 'var(--affine-primary-color)',
+      backgroundColor: 'var(--affine-hover-color)',
    },
  };
 });
@@ -62,14 +62,14 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
    width: '36px',
    height: '36px',
    cursor: 'pointer',
-    backgroundColor: theme.colors.pageBackground,
-    color: theme.colors.iconColor,
+    backgroundColor: 'var(--affine-background-primary-color)',
+    color: 'var(--affine-icon-color)',
    borderRadius: '5px',
    fontSize: '24px',
    ...displayFlex('center', 'center'),
    ...positionAbsolute({ left: '4px', bottom: '4px' }),
    ':hover': {
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
    },
  };
 });
--- a/apps/web/src/components/pure/quick-search-button/index.tsx
+++ b/apps/web/src/components/pure/quick-search-button/index.tsx
@@ -13,7 +13,7 @@ const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
        transform: 'translateY(3px)',
      },
      '::after': {
-        background: theme.colors.pageBackground,
+        background: 'var(--affine-background-primary-color)',
      },
    },
  };
--- a/apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts
+++ b/apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts
@@ -4,10 +4,10 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
  return {
    height: '46px',
    ...displayFlex('flex-start', 'center'),
-    background: theme.colors.hubBackground,
+    background: 'var(--affine-background-secondary-color)',
    padding: '0 40px 0 20px',
    position: 'relative',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
    zIndex: 2,
    '.collapse-btn': {
      position: 'absolute',
@@ -18,7 +18,7 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
    },
    '.path-arrow': {
      fontSize: '16px',
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
    },
  };
 });
@@ -26,7 +26,9 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
 export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
  ({ theme, active }) => {
    return {
-      color: active ? theme.colors.textColor : theme.colors.secondaryTextColor,
+      color: active
+        ? 'var(--affine-text-primary-color)'
+        : 'var(--affine-text-secondary-color)',
      cursor: active ? 'auto' : 'pointer',
      maxWidth: '160px',
      ...textEllipsis(1),
@@ -35,7 +37,7 @@ export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
      ':hover': active
        ? {}
        : {
-            background: theme.colors.hoverBackground,
+            background: 'var(--affine-hover-color)',
            borderRadius: '4px',
          },
    };
@@ -51,10 +53,10 @@ export const StyledNavPathExtendContainer = styled('div')<{ show: boolean }>(
      zIndex: '1',
      height: '100%',
      width: '100%',
-      background: theme.colors.hubBackground,
+      background: 'var(--affine-background-secondary-color)',
      transition: 'top .15s',
-      fontSize: theme.font.sm,
-      color: theme.colors.secondaryTextColor,
+      fontSize: 'var(--affine-font-sm)',
+      color: 'var(--affine-text-secondary-color)',
      padding: '46px 12px 0 15px',
    };
  }
--- a/apps/web/src/components/pure/quick-search-modal/style.ts
+++ b/apps/web/src/components/pure/quick-search-modal/style.ts
@@ -9,7 +9,7 @@ export const StyledContent = styled('div')(({ theme }) => {
    marginBottom: '10px',
    ...displayFlex('flex-start', 'flex-start'),
    flexDirection: 'column',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
    transition: 'all 0.15s',
    letterSpacing: '0.06em',
    '[cmdk-group]': {
@@ -20,8 +20,8 @@ export const StyledContent = styled('div')(({ theme }) => {
      margin: '0 16px',
      height: '36px',
      lineHeight: '22px',
-      fontSize: theme.font.sm,
-      color: theme.colors.secondaryTextColor,
+      fontSize: 'var(--affine-font-sm)',
+      color: 'var(--affine-text-secondary-color)',
    },
    '[cmdk-item]': {
      margin: '0 4px',
@@ -29,8 +29,8 @@ export const StyledContent = styled('div')(({ theme }) => {
    '[aria-selected="true"]': {
      transition: 'all 0.15s',
      borderRadius: '4px',
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
+      color: 'var(--affine-primary-color)',
+      backgroundColor: 'var(--affine-hover-color)',
      padding: '0 2px',
    },
  };
@@ -40,7 +40,7 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
    ...displayFlex('center', 'start'),
    flexDirection: 'column',
    padding: '10px 10px 10px 0',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
    strong: {
      fontWeight: '500',
      marginBottom: '10px',
@@ -53,9 +53,9 @@ export const StyledNotFound = styled('div')(({ theme }) => {
    ...displayFlex('center', 'center'),
    flexDirection: 'column',
    padding: '0 16px',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
    lineHeight: '22px',
-    color: theme.colors.secondaryTextColor,
+    color: 'var(--affine-text-secondary-color)',
    span: {
      ...displayFlex('flex-start', 'center'),
      width: '100%',
@@ -75,20 +75,20 @@ export const StyledInputContent = styled('div')(({ theme }) => {
      width: '492px',
      height: '22px',
      padding: '0 12px',
-      fontSize: theme.font.base,
+      fontSize: 'var(--affine-font-base)',
      ...displayFlex('space-between', 'center'),
      letterSpacing: '0.06em',
-      color: theme.colors.textColor,
+      color: 'var(--affine-text-primary-color)',
      '::placeholder': {
-        color: theme.colors.placeHolderColor,
+        color: 'var(--affine-placeholder-color)',
      },
    },
  };
 });
 export const StyledShortcut = styled('div')(({ theme }) => {
  return {
-    color: theme.colors.placeHolderColor,
-    fontSize: theme.font.sm,
+    color: 'var(--affine-placeholder-color)',
+    fontSize: 'var(--affine-font-sm)',
    whiteSpace: 'nowrap',
  };
 });
@@ -97,7 +97,7 @@ export const StyledLabel = styled('label')(({ theme }) => {
  return {
    width: '20px',
    height: '20px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
    fontSize: '20px',
  };
 });
@@ -114,7 +114,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
    width: 'auto',
    height: '0',
    margin: '6px 16px',
-    borderTop: `0.5px solid ${theme.colors.borderColor}`,
+    borderTop: '0.5px solid var(--affine-border-color)',
  };
 });

@@ -124,7 +124,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
    lineHeight: '22px',
    marginBottom: '8px',
    textAlign: 'center',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
    ...displayFlex('center', 'center'),
    transition: 'all .15s',
    '[cmdk-item]': {
@@ -133,8 +133,8 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
    '[aria-selected="true"]': {
      transition: 'all 0.15s',
      borderRadius: '4px',
-      color: theme.colors.primaryColor,
-      backgroundColor: theme.colors.hoverBackground,
+      color: 'var(--affine-primary-color)',
+      backgroundColor: 'var(--affine-hover-color)',
      'span,svg': {
        transition: 'all 0.15s',
        transform: 'scale(1.02)',
@@ -146,7 +146,7 @@ export const StyledModalFooterContent = styled('button')(({ theme }) => {
  return {
    width: '600px',
    height: '32px',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
    lineHeight: '22px',
    textAlign: 'center',
    ...displayFlex('center', 'center'),
--- a/apps/web/src/components/pure/shortcuts-modal/style.ts
+++ b/apps/web/src/components/pure/shortcuts-modal/style.ts
@@ -4,9 +4,9 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
  width: '288px',
  height: '74vh',
  paddingBottom: '28px',
-  backgroundColor: theme.colors.popoverBackground,
-  boxShadow: theme.shadow.popover,
-  borderRadius: `${theme.radius.popover} 0 ${theme.radius.popover} ${theme.radius.popover}`,
+  backgroundColor: 'var(--affine-white)',
+  boxShadow: 'var(--affine-text-popover-shadow)',
+  borderRadius: `var(--affine-popover-radius) 0 var(--affine-popover-radius) var(--affine-popover-radius)`,
  overflow: 'auto',
  boxRadius: '10px',
  position: 'fixed',
@@ -14,23 +14,23 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
  top: '0',
  bottom: '0',
  margin: 'auto',
-  zIndex: theme.zIndex.modal,
+  zIndex: 'var(--affine-z-index-modal)',
 }));
 export const StyledTitle = styled('div')(({ theme }) => ({
-  color: theme.colors.textColor,
+  color: 'var(--affine-text-primary-color)',
  fontWeight: '500',
-  fontSize: theme.font.sm,
+  fontSize: 'var(--affine-font-sm)',
  height: '44px',
  ...displayFlex('center', 'center'),
  svg: {
    width: '20px',
    marginRight: '14px',
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
  },
 }));
 export const StyledSubTitle = styled('div')(({ theme }) => ({
  fontWeight: '500',
-  fontSize: theme.font.sm,
+  fontSize: 'var(--affine-font-sm)',
  height: '34px',
  lineHeight: '36px',
  marginTop: '28px',
@@ -52,6 +52,6 @@ export const StyledModalHeader = styled('div')(() => ({
 export const StyledListItem = styled('div')(({ theme }) => ({
  height: '34px',
  ...displayFlex('space-between', 'center'),
-  fontSize: theme.font.sm,
+  fontSize: 'var(--affine-font-sm)',
  padding: '0 16px',
 }));
--- a/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx
+++ b/apps/web/src/components/pure/workspace-list-modal/language-menu.tsx
@@ -58,7 +58,7 @@ export const LanguageMenu: React.FC = () => {

 const ListItem = styled(MenuItem)(({ theme }) => ({
  height: '38px',
-  fontSize: theme.font.base,
+  fontSize: 'var(--affine-font-base)',
  textTransform: 'capitalize',
  padding: '0 24px',
 }));
--- a/apps/web/src/components/pure/workspace-list-modal/styles.ts
+++ b/apps/web/src/components/pure/workspace-list-modal/styles.ts
@@ -4,7 +4,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
  return {
    width: '1px',
    height: '20px',
-    background: theme.colors.borderColor,
+    background: 'var(--affine-border-color)',
    marginRight: '12px',
  };
 });
@@ -15,7 +15,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
    width: '202px',
    p: {
      height: '20px',
-      fontSize: theme.font.sm,
+      fontSize: 'var(--affine-font-sm)',
      ...displayFlex('flex-start', 'center'),
    },
    svg: {
@@ -32,7 +32,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {

 export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
  return {
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
    fontWeight: 600,
    lineHeight: '24px',
    marginBottom: '10px',
@@ -44,7 +44,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
 export const StyledCard = styled('div')<{
  active?: boolean;
 }>(({ theme, active }) => {
-  const borderColor = active ? theme.colors.primaryColor : 'transparent';
+  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
  return {
    width: '310px',
    height: '124px',
@@ -58,7 +58,7 @@ export const StyledCard = styled('div')<{
    transition: 'background .2s',
    background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
    ':hover': {
-      background: theme.colors.cardHoverBackground,
+      background: 'var(--affine-hover-color)',
    },
  };
 });
@@ -73,14 +73,14 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
    borderRadius: '12px',
    transition: 'all .1s',
    ...displayFlex('flex-start', 'flex-start'),
-    color: theme.colors.secondaryTextColor,
+    color: 'var(--affine-text-secondary-color)',

    ':hover': {
-      background: theme.colors.cardHoverBackground,
-      color: theme.colors.textColor,
+      background: 'var(--affine-hover-color)',
+      color: 'var(--affine-text-primary-color)',
      '.add-icon': {
-        borderColor: theme.colors.primaryColor,
-        color: theme.colors.primaryColor,
+        borderColor: 'var(--affine-primary-color)',
+        color: 'var(--affine-primary-color)',
      },
    },
  };
@@ -92,16 +92,16 @@ export const StyledModalHeaderLeft = styled('div')(() => {
 export const StyledModalTitle = styled('div')(({ theme }) => {
  return {
    fontWeight: 600,
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
  };
 });

 export const StyledHelperContainer = styled('div')(({ theme }) => {
  return {
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
    marginLeft: '15px',
    fontWeight: 400,
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
    ...displayFlex('center', 'center'),
  };
 });
--- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
@@ -8,10 +8,10 @@ export const StyledSelectorContainer = styled('div')(({ theme }) => {
    padding: '0 6px',
    marginBottom: '16px',
    borderRadius: '8px',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
    ':hover': {
      cursor: 'pointer',
-      background: theme.colors.hoverBackground,
+      background: 'var(--affine-hover-color)',
    },
  };
 });
@@ -36,12 +36,12 @@ export const StyledWorkspaceStatus = styled('div')(({ theme }) => {
  return {
    height: '22px',
    ...displayFlex('flex-start', 'center'),
-    fontSize: theme.font.sm,
-    color: theme.colors.secondaryTextColor,
+    fontSize: 'var(--affine-font-sm)',
+    color: 'var(--affine-text-secondary-color)',
    userSelect: 'none',
    svg: {
-      color: theme.colors.iconColor,
-      fontSize: theme.font.base,
+      color: 'var(--affine-icon-color)',
+      fontSize: 'var(--affine-font-base)',
      marginRight: '4px',
    },
  };
--- a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
@@ -12,7 +12,9 @@ export const StyledListItem = styled('div')<{
 }>(({ theme, active, disabled }) => {
  return {
    height: '32px',
-    color: active ? theme.colors.primaryColor : theme.colors.textColor,
+    color: active
+      ? 'var(--affine-primary-color)'
+      : 'var(--affine-text-primary-color)',
    padding: '0 16px',
    borderRadius: '8px',
    cursor: 'pointer',
@@ -24,17 +26,19 @@ export const StyledListItem = styled('div')<{
    ...(disabled
      ? {
          cursor: 'not-allowed',
-          color: theme.colors.borderColor,
+          color: 'var(--affine-border-color)',
        }
      : {}),

    '> svg, a > svg': {
      fontSize: '20px',
      marginRight: '12px',
-      color: active ? theme.colors.primaryColor : theme.colors.iconColor,
+      color: active
+        ? 'var(--affine-primary-color)'
+        : 'var(--affine-icon-color)',
    },
    ':hover:not([disabled])': {
-      backgroundColor: theme.colors.hoverBackground,
+      backgroundColor: 'var(--affine-hover-color)',
    },
  };
 });
@@ -53,7 +57,7 @@ export const StyledCollapseButton = styled('button')<{
    top: '0',
    bottom: '0',
    margin: 'auto',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
    opacity: '.6',
    transition: 'opacity .15s ease-in-out',
    display: show ? 'flex' : 'none',
@@ -81,12 +85,12 @@ export const StyledCollapseItem = styled('div')<{
    paddingRight: '2px',
    position: 'relative',
    color: disable
-      ? theme.colors.disableColor
+      ? 'var(--affine-text-disable-color)'
      : active
-      ? theme.colors.primaryColor
-      : theme.colors.textColor,
+      ? 'var(--affine-primary-color)'
+      : 'var(--affine-text-primary-color)',
    cursor: disable ? 'not-allowed' : 'pointer',
-    background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
+    background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
    userSelect: 'none',
    ...(textWrap
      ? {
@@ -103,13 +107,15 @@ export const StyledCollapseItem = styled('div')<{
      fontSize: '20px',
      marginRight: '8px',
      flexShrink: '0',
-      color: active ? theme.colors.primaryColor : theme.colors.iconColor,
+      color: active
+        ? 'var(--affine-primary-color)'
+        : 'var(--affine-icon-color)',
    },

    ':hover': disable
      ? {}
      : {
-          backgroundColor: theme.colors.hoverBackground,
+          backgroundColor: 'var(--affine-hover-color)',
          '.operation-button': {
            visibility: 'visible',
          },
@@ -173,9 +179,9 @@ export const StyledChangeLog = styled('div')<{
    width: '110%',
    height: '32px',
    ...displayFlex('flex-start', 'center'),
-    color: theme.colors.primaryColor,
-    backgroundColor: theme.colors.hoverBackground,
-    border: `1px solid ${theme.colors.primaryColor}`,
+    color: 'var(--affine-primary-color)',
+    backgroundColor: 'var(--affine-hover-color)',
+    border: '1px solid var(--affine-primary-color)',
    borderRight: 'none',
    marginLeft: '8px',
    paddingLeft: '8px',
@@ -191,7 +197,7 @@ export const StyledChangeLog = styled('div')<{
    '> svg, a > svg': {
      fontSize: '20px',
      marginRight: '12px',
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
    },
    button: {
      marginRight: '12%',
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts
@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@affine/component';
+import { baseTheme, displayFlex, styled } from '@affine/component';
 import Link from 'next/link';

 const macosElectron = environment.isDesktop && environment.isMacOs;
@@ -14,14 +14,16 @@ export const StyledSliderBarWrapper = styled('div')<{
    'button, a': {
      userSelect: 'none',
    },
-    zIndex: theme.zIndex.modal,
+    zIndex: 'var(--affine-z-index-modal)',
    transition: resizing ? '' : 'transform .3s, width .3s, max-width .3s',
    transform: show ? 'translateX(0)' : 'translateX(-100%)',
    maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
    background:
-      !floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
+      !floating && macosElectron
+        ? 'transparent'
+        : 'var(--affine-background-secondary-color)',
    borderRight: macosElectron ? '' : '1px solid',
-    borderColor: theme.colors.borderColor,
+    borderColor: 'var(--affine-border-color)',
  };
 });

@@ -82,17 +84,17 @@ export const StyledNewPageButton = styled('button')(({ theme }) => {
    height: '52px',
    ...displayFlex('flex-start', 'center'),
    borderTop: '1px solid',
-    borderColor: theme.colors.borderColor,
+    borderColor: 'var(--affine-border-color)',
    padding: '0 8px 0 16px',
    svg: {
      fontSize: '20px',
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
      marginRight: '8px',
    },
    ':hover': {
-      color: theme.colors.primaryColor,
+      color: 'var(--affine-primary-color)',
      svg: {
-        color: theme.colors.primaryColor,
+        color: 'var(--affine-primary-color)',
      },
    },
  };
@@ -108,8 +110,8 @@ export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(
      left: 0,
      right: active ? 0 : '100%',
      bottom: 0,
-      zIndex: theme.zIndex.modal - 1,
-      background: theme.colors.modalBackground,
+      zIndex: parseInt(baseTheme.zIndexModal) - 1,
+      background: 'var(--affine-background-modal-color)',
    };
  }
 );
@@ -121,6 +123,6 @@ export const StyledScrollWrapper = styled('div')<{
    maxHeight: '50%',
    overflowY: 'auto',
    borderTop: '1px solid',
-    borderColor: showTopBorder ? theme.colors.borderColor : 'transparent',
+    borderColor: showTopBorder ? 'var(--affine-border-color)' : 'transparent',
  };
 });