<div id="root">
  
</div>
body {
  height: 100%;
}
.app {
  display: block;
  width: 100%;
  height: 100%;
}

.app-center {
  margin: 0 auto;
  width: 80%;
  padding: 1rem 1rem;
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.14);
  height: 100vh;
}

.navbar, .navbar-dark {
   padding: 2rem;
}

.navbar {
  background-color: #f2f2f2;
}

.navbar-dark {
  background-color: #2e2e2e;
  color: #ebebeb;
}

.navbar-dark .button {
  background-color: #1c1c1c;
  color: #ebebeb;
  box-shadow: 0 1px 2px 3px rgba(0,0,0,0.14);
}

.button {
  border: none;
  color: white;
  padding: 1rem;
  border-radius: 1rem;
  background-color: #55695f;
  box-shadow: 0 2px 2px 0px rgba(0,0,0,0.14);
  transition: all 300ms ease;
  cursor: pointer;
  outline: none;
}

.button:hover{
  box-shadow: 0 2px 4px 2px rgba(0,0,0,0.14);
}

.content, .content-dark {
  margin: 1rem 0;
  width: 80%;
  
  padding: 2rem;
  height: 200px;
}

.content {
  background-color: #f2f2f2;
}

.content-dark {
  background-color: #2e2e2e;
  color: #ebebeb;
}



const defaultState = {
  dark: false,
  toggleDark: () => {},
}

const ThemeContext = React.createContext(defaultState);

const ThemeProvider = ({children}) => {
  const [dark, setDark] = React.useState(false);
  
  const toggleDark = (e, dark2) => {
    
      let dark = !dark2
      // localStorage.setItem("dark", JSON.stringify(dark))
      setDark(dark)
    
  }
  
  // React.useEffect(() => {
  //   const localStorageDark = JSON.parse(localStorage.getItem("dark"));
  //   if(localStorageDark){
  //     setDark(localStorageDark);
  //   }
  // },[])
  
  return (
    <ThemeContext.Provider value={{dark, toggleDark}}>
        {children}
    </ThemeContext.Provider>
  )
}


const App = () => {
 
    return(
      <div className="app">
        <div className="app-center">
          <ThemeProvider>
            <Navbar>
              <Button/>
            </Navbar>
            <Content/>
          </ThemeProvider>
        </div>
      </div>
    )
  
}


const Button = () => {
  
    const { dark, toggleDark} = React.useContext(ThemeContext);
  
    return(
      <button className="button" onClick={e => toggleDark(e,dark)}>
        Toggle Theme
      </button>
    )
  
}

const Navbar = ({children}) => {
  const {dark} = React.useContext(ThemeContext);
  return(
    <nav className={dark ? "navbar-dark" : "navbar"}>
      {children}
    </nav>
  )
}

const Content = () => {
   const {dark} = React.useContext(ThemeContext);
    return(
      <div className={dark ? "content-dark" : "content"}>
        <h1>Content</h1>
        <h4>Will Consume React Context</h4>
        <p>Once the toggle theme button is pressed, the theme value in the React Context object will change, and accordingly this content will change its theme</p>
      </div>
    )
}

ReactDOM.render(
<App/>, document.getElementById('root'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js