fix: theme button (#1394)

apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/index.tsx

@@ -4,17 +4,13 @@ import { useState } from 'react';
 import { MoonIcon, SunIcon } from './Icons';
 import { StyledSwitchItem, StyledThemeModeSwitch } from './style';
 export const ThemeModeSwitch = () => {
-  const { theme, setTheme } = useTheme();
+  const { setTheme, resolvedTheme } = useTheme();
   const [isHover, setIsHover] = useState(false);
-  const [firstTrigger, setFirstTrigger] = useState(false);
   return (
     <StyledThemeModeSwitch
       data-testid="change-theme-container"
       onMouseEnter={() => {
         setIsHover(true);
-        if (!firstTrigger) {
-          setFirstTrigger(true);
-        }
       }}
       onMouseLeave={() => {
         setIsHover(false);
@@ -22,9 +18,8 @@ export const ThemeModeSwitch = () => {
     >
       <StyledSwitchItem
         data-testid="change-theme-light"
-        active={theme === 'light'}
+        active={resolvedTheme === 'light'}
         isHover={isHover}
-        firstTrigger={firstTrigger}
         onClick={() => {
           setTheme('light');
         }}
@@ -33,9 +28,8 @@ export const ThemeModeSwitch = () => {
       </StyledSwitchItem>
       <StyledSwitchItem
         data-testid="change-theme-dark"
-        active={theme === 'dark'}
+        active={resolvedTheme === 'dark'}
         isHover={isHover}
-        firstTrigger={firstTrigger}
         onClick={() => {
           setTheme('dark');
         }}

apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts

@@ -15,8 +15,7 @@ export const StyledThemeModeSwitch = styled('div')({
 export const StyledSwitchItem = styled('div')<{
   active: boolean;
   isHover: boolean;
-  firstTrigger: boolean;
+}>(({ active, isHover, theme }) => {
-}>(({ active, isHover, firstTrigger, theme }) => {
   const activeRaiseAnimate = toString(
     spring({ top: '0' }, { top: '-100%' }, { preset: 'gentle' })
   );
@@ -34,26 +33,22 @@ export const StyledSwitchItem = styled('div')<{
     ? {
         color: theme.colors.iconColor,
         top: '0',
-        animation: firstTrigger
+        animation: css`
-          ? css`
           ${keyframes`${
             isHover ? activeRaiseAnimate : activeDeclineAnimate
           }`} ${ANIMATE_DURATION}ms forwards
-            `
+        `,
-          : 'unset',
         animationDirection: isHover ? 'normal' : 'alternate',
       }
     : {
         top: '100%',
         color: theme.colors.primaryColor,
         backgroundColor: theme.colors.hoverBackground,
-        animation: firstTrigger
+        animation: css`
-          ? css`
           ${keyframes`${
             isHover ? raiseAnimate : declineAnimate
           }`} ${ANIMATE_DURATION}ms forwards
-            `
+        `,
-          : 'unset',
         animationDirection: isHover ? 'normal' : 'alternate',
       };
   return css`