feat: modify style variables

packages/app/src/components/editor-mode-switch/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, cloneElement } from 'react';
 import {
   StyledAnimateRadioContainer,
-  StyledRadioMiddle,
   StyledMiddleLine,
   StyledRadioItem,
   StyledLabel,
@@ -19,21 +18,21 @@ import { useEditor } from '@/components/editor-provider';
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
     theme: {
-      colors: { highlight, disabled },
+      colors: { iconColor, primaryColor },
     },
   } = useTheme();
 
-  return <PaperIcon style={{ color: active ? highlight : disabled }} />;
+  return <PaperIcon style={{ color: active ? primaryColor : iconColor }} />;
 };
 
 const EdgelessItem = ({ active }: { active?: boolean }) => {
   const {
     theme: {
-      colors: { highlight, disabled },
+      colors: { iconColor, primaryColor },
     },
   } = useTheme();
 
-  return <EdgelessIcon style={{ color: active ? highlight : disabled }} />;
+  return <EdgelessIcon style={{ color: active ? primaryColor : iconColor }} />;
 };
 
 const AnimateRadioItem = ({
@@ -57,24 +56,11 @@ const AnimateRadioItem = ({
   );
 };
 
-const RadioMiddle = ({
-  isHover,
-  direction,
-}: {
-  isHover: boolean;
-  direction: 'left' | 'right' | 'middle';
-}) => {
-  return (
-    <StyledRadioMiddle hidden={!isHover}>
-      <StyledMiddleLine hidden={false} />
-    </StyledRadioMiddle>
-  );
-};
-
 export const EditorModeSwitch = ({
   isHover,
   style = {},
 }: AnimateRadioProps) => {
+  const { mode: themeMode } = useTheme();
   const { mode, setMode } = useEditor();
   const modifyRadioItemStatus = (): RadioItemStatus => {
     return {
@@ -124,7 +110,7 @@ export const EditorModeSwitch = ({
           setRadioItemStatus(modifyRadioItemStatus());
         }}
       />
-      <StyledMiddleLine hidden={!isHover} />
+      <StyledMiddleLine hidden={!isHover} dark={themeMode === 'dark'} />
       <AnimateRadioItem
         isLeft={false}
         label="Edgeless"

packages/app/src/components/editor-mode-switch/style.ts

@@ -6,7 +6,7 @@ import type { ItemStatus } from './type';
 const ANIMATE_DURATION = 400;
 
 export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
-  ({ shrink }) => {
+  ({ shrink, theme }) => {
     const animateScaleStretch = keyframes`${toString(
       spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
     )}`;
@@ -27,7 +27,7 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
     return {
       height: '36px',
       borderRadius: '18px',
-      background: '#F1F3FF',
+      background: theme.colors.hoverBackground,
       position: 'relative',
       display: 'flex',
       transition: `background ${ANIMATE_DURATION}ms`,
@@ -36,31 +36,21 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
   }
 );
 
-export const StyledRadioMiddle = styled('div')<{
+export const StyledMiddleLine = styled('div')<{
   hidden: boolean;
-}>(({ hidden }) => {
+  dark: boolean;
+}>(({ hidden, dark }) => {
   return {
     width: '1px',
-    height: '100%',
-    position: 'relative',
+    height: '16px',
+    background: dark ? '#4d4c53' : '#D0D7E3',
+    top: '0',
+    bottom: '0',
+    margin: 'auto',
     opacity: hidden ? '0' : '1',
   };
 });
 
-export const StyledMiddleLine = styled('div')<{ hidden: boolean }>(
-  ({ hidden }) => {
-    return {
-      width: '1px',
-      height: '16px',
-      background: '#D0D7E3',
-      top: '0',
-      bottom: '0',
-      margin: 'auto',
-      opacity: hidden ? '0' : '1',
-    };
-  }
-);
-
 export const StyledRadioItem = styled('div')<{
   status: ItemStatus;
   active: boolean;
@@ -89,7 +79,7 @@ export const StyledRadioItem = styled('div')<{
       : {};
 
   const {
-    colors: { highlight, disabled },
+    colors: { iconColor, primaryColor },
   } = theme;
   return {
     width: '0',
@@ -97,7 +87,7 @@ export const StyledRadioItem = styled('div')<{
     display: 'flex',
     cursor: 'pointer',
     overflow: 'hidden',
-    color: active ? highlight : disabled,
+    color: active ? primaryColor : iconColor,
     ...dynamicStyle,
   };
 });