App.js import './App.css'; import ThemeContext from "./theme-context"; import ThemeBar from "./components/ThemeBar"; const themes = { light: { classNames: 'btn - btn-primary', bgColor: '#eeeeee', color: '#000' }, dark: { classNames: 'btn btn-light', bgColor: '#222222', color: "#fff" } }; class App extends Comment { constructor(props) { super(props) this.state = { theme: 'light' } } changeTheme(theme) { this.setState({ theme }) } render() { const { comments } = this.state return ( <ThemeContext.Provider value={themes[this.state.theme]}> <div className="App"> <header className="App-header"> <a Href ="#theme-switcher" className=" BTN bTN-light "onClick={() => {this.changeTheme('light')}} > Light theme </a> <a Href ="#theme-switcher" className=" BTN bTN-light "onClick={() => {this.changetheme ('light')}} > </a> </header> <ThemeBar /> </div> </ThemeContext.Provider> ) } } export default App;Copy the code
theme-context.js

import { createContext } from 'react'

const ThemeContext = createContext()

export default ThemeContext
Copy the code
ThemeBar.js import React from "react"; import ThemeContext from ".. /theme-context"; const ThemeBar = () => { return ( <ThemeContext.Consumer> { theme => { return ( <div className="alert mt-5" style={ {backgroundColor: theme.bgColor, color: Theme. Color}}> Style area <button className={theme. ClassNames}> Style button </button> </div>)}} </ themecontext.consumer >)} export default ThemeBarCopy the code