const { createGlobalStyle } = styled;

const GlobalStyle = createGlobalStyle`
  :root {
    --theme-background-primary: #151618;
    --theme-primary: #FFFFFF;
  }
  
  html.light {
    --theme-background-primary: #E9EAEC;
    --theme-primary: #151618;
  }

  html {
    background: var(--theme-background-primary);
  }

  html.theming,
  html.theming * {
    transition: all 0.2s linear;
  }
`;

const Button = styled.button`
  padding: 8px 16px;
  color: var(--theme-primary);
  background: none;
  outline: none;
  border-radius: 4px;
  border: 1px solid var(--theme-primary);
  cursor: pointer;
`;

function App() {
  const toggleTheme = () => {
    document.documentElement.classList.add('theming');
    document.documentElement.addEventListener('transitionend', () => {
      if (document.documentElement) {
        document.documentElement.classList.remove('theming');
      }
    }, {once: true});
    document.documentElement.classList.toggle('light');
  };
  
  return (
    <div>
      <GlobalStyle />
      <Button onClick={toggleTheme}>Toggle theme</Button>
    </div>
  );
}

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