hunk.code_window:   return {
       width: '612px',
       height: '32px',
       fontSize: theme.font.sm,
       color: 'inherit',
       paddingLeft: '12px',
       borderRadius: '5px',
       transition: 'background .15s, color .15s',
  
hunk.labels: keep keep keep replace keep keep keep keep
hunk.after_edit:     fontSize: theme.font.base,
  
hunk.file_path: packages/app/src/components/quick-search/style.ts
hunk.type: replace
file: import { useState } from 'react';
  import { useTheme } from '@/providers/ThemeProvider';
  import { MoonIcon, SunIcon } from './Icons';
  import { StyledThemeModeSwitch, StyledSwitchItem } from './style';
  
  export const ThemeModeSwitch = () => {
    const { mode, changeMode } = 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);
        }}
      >
        <StyledSwitchItem
          data-testid="change-theme-light"
          active={mode === 'light'}
          isHover={isHover}
          firstTrigger={firstTrigger}
          onClick={() => {
            changeMode('light');
          }}
        >
          <SunIcon />
        </StyledSwitchItem>
        <StyledSwitchItem
          data-testid="change-theme-dark"
          active={mode === 'dark'}
          isHover={isHover}
          firstTrigger={firstTrigger}
          onClick={() => {
            changeMode('dark');
          }}
        >
          <MoonIcon />
        </StyledSwitchItem>
      </StyledThemeModeSwitch>
    );
  };
  
  export default ThemeModeSwitch;
  