react-useContext

import './styles.css';
import axios from 'axios';
import React from 'react';

const themes = {
    light: {
        foreground: '#000000',
        background: '#eeeeee'
    },
    dark: {
        foreground: '#ffffff',
        background: '#222222'
    }
};
const ThemeContext = React.createContext();

export default function App() {
    return (
        <ThemeContext.Provider value={themes.dark}>
            <Toolbar />
            <b>not affected by theme</b>
        </ThemeContext.Provider>
    );
}

function Toolbar(props) {
    const theme = React.useContext(ThemeContext);
    return (
        <div style={{background: theme.background, color: theme.foreground}}>
            <ThemedButton />
            <AnotherComponent />
            <p>a paragraph!</p>
            <b>bold text</b>
        </div>
    );
}

function AnotherComponent() {
    return (
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    );
}

function ThemedButton() {
    const theme = React.useContext(ThemeContext);
    return (
        <button
            style={{
                background: theme.background,
                color: theme.foreground,
                border: '2px solid red',
                cursor: 'pointer'
            }}>
            I am styled by theme context!
        </button>
    );
}