const { ThemeProvider, createGlobalStyle } = styled;

const GlobalStyle = createGlobalStyle`
  html {
    background: ${ props => props.theme.backgroundPrimary };
  }
`;

const Button = styled.button`
  padding: 8px 16px;
  color: ${ props => props.theme.primary };
  background: none;
  outline: none;
  border-radius: 4px;
  border: 1px solid ${ props => props.theme.primary };
  cursor: pointer;
`;

const themes = {
  dark: {
    primary: '#FFFFFF',
    backgroundPrimary: '#151618',
  },
  light: {
    primary: '#151618',
    backgroundPrimary: '#E9EAEC',
  }
};

function App() {
  const [theme, setTheme] = React.useState('dark');
  
  const toggleTheme = () => {
    if (theme === 'dark') setTheme('light');
    else setTheme('dark');
  };
  
  return (
    <ThemeProvider theme={themes[theme]}>
      <GlobalStyle />
      <div>
        <Button onClick={toggleTheme}>Toggle theme</Button>
      </div>
    </ThemeProvider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));