1import React, { useContext } from "react";
2import ColorContext from "./colorcontex.ts";
3
4const MyComponent = () => {
5 const colors = useContext(ColorContext);
6
7 return <div style={{ backgroundColor: colors.blue }}>...</div>;
8};import React, { useContext } from "react";
9
10const MyComponent = () => {
11 const colors = useContext(ColorContext);
12
13 return <div style={{ backgroundColor: colors.blue }}>...</div>;
14};
1const themes = {
2 light: {
3 foreground: "#000000",
4 background: "#eeeeee"
5 },
6 dark: {
7 foreground: "#ffffff",
8 background: "#222222"
9 }
10};
11
12const ThemeContext = React.createContext(themes.light);
13
14function App() {
15 return (
16 <ThemeContext.Provider value={themes.dark}>
17 <Toolbar />
18 </ThemeContext.Provider>
19 );
20}
21
22function Toolbar(props) {
23 return (
24 <div>
25 <ThemedButton />
26 </div>
27 );
28}
29
30function ThemedButton() {
31 const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> );
32}