<div id="root"></div>
	

.light-theme {
  --primary: #02475e;
  --secondary: #194350;
  --primaryBackground: #f9f3f3;
  --secondaryBackground: #d8e3e7;
  --primaryBorder: #000;
  --secondaryBorder: #333;
}
.dark-theme {
  --primary: #f9f3f3;
  --secondary:#dddddd;
  --primaryBackground: #151515;
  --secondaryBackground: #301b3f;
  --primaryBorder: #3c415c;
  --secondaryBorder: #b4a5a5;
}


#app {
  color: var(--primary);
  background-color: var(--primaryBackground);
  width: 100%;
  height: 100%;
  position:absolute;
}

.header {
  text-align: center;
  font-size: 1.5em;
  margin: 10px 0px 20px 0px;
}

.toggle-theme {
  position: absolute;
  right: 10px;
  top: 5px;
}

.card {
  color: var(--secondary);
  background-color: var(--secondaryBackground);
  border: 1px solid var(--secondaryBorder);
  width: 300px;
  height: 300px;
  margin: auto;
  padding: 5px;
}

const LIGHT_THEME = 'light-theme';
const DARK_THEME = 'dark-theme';

const ThemeContext = React.createContext();

function ThemeWrapper({ children }) {
  const [theme, setTheme] = React.useState(LIGHT_THEME);
  
  const applyTheme = (newTheme) => {
    document.getElementById('app').className = newTheme;
    setTheme(newTheme);
  }
  
  return (
    <ThemeContext.Provider value={{ theme, applyTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}


function Card() {
  const { theme } = React.useContext(ThemeContext);
  return (
    <div className="card"> Applied them: {theme} </div>
  );
}

function ToggleTheme() {
  const { theme, applyTheme } = React.useContext(ThemeContext);
  
  const altTheme = theme === LIGHT_THEME ? DARK_THEME : LIGHT_THEME;
  
  const toggle = () => {
    applyTheme(altTheme);
  }
  
  return (
    <div className="toggle-theme"> 
      <button onClick={toggle}>Go {altTheme}</button> 
    </div>
  )
}

function App() {
  return (
    <div id="app" className="light-theme">
      <div className="header"> Theme Sandbox </div>
      <ThemeWrapper>
        <div>
         <ToggleTheme />
         <Card />
        </div>
      </ThemeWrapper>
    </div>
  );
}

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