Theme

welaundry theme에 대한 적용 방식과 예시를 설명합니다.

Global theme state

const localTheme = themeStorage.get();

export const themeState = atom<boolean>({
  key: 'theme',
  default: !!localTheme,
});

Theme Provider & Theme button

App

import { ThemeProvider } from 'styled-components';

const App = () => {
  const theme = useRecoilValue(themeState);
  const thisTheme = theme ? darkTheme : lightTheme;
  
  return (
    <ThemeProvider theme={{ ...thisTheme }}>
      ...
      <ThemeButton />
    </ThemeProvider>
  );
}
export default App;

ThemeButton

const ThemeButton = () => {
  const [theme, setTheme] = useRecoilState(themeState);
  const onClick = () => {
    setTheme((prev) => {
      if (prev) {
        themeStorage.remove();
        return !prev;
      }
      themeStorage.set();
      return !prev;
    });
  }

  return (  
    <ToggleButton type='button' onClick={onClick}>
      ...
    </ToggleButton>
  )
}
export default ThemeButton;