# Theme

### Global theme state

```tsconfig
const localTheme = themeStorage.get();

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

### Theme Provider & Theme button

<figure><img src="https://user-images.githubusercontent.com/79623316/184602416-63477d3f-a7a9-467d-86ed-498f8cad1aca.png" alt=""><figcaption></figcaption></figure>

#### App

```tsx
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

```tsx
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;
```

<figure><img src="https://user-images.githubusercontent.com/79623316/184606246-3deadf0d-57b1-422b-ac41-25bc88d4010e.PNG" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://user-images.githubusercontent.com/79623316/184606050-84cbe6c3-5be8-4e55-8064-980ad0839733.PNG" alt="" width="375"><figcaption></figcaption></figure>