<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;
}
View Compiled
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);
View Compiled
This Pen doesn't use any external CSS resources.