Почему не работает кнопка?

Question

[HitGirl]

Здравствуйте!
Подскажите, пожалуйста, почему после нажатия на кнопку не происходит смена цветовой темы?

import {createContext, FC, useEffect} from "react";
import ThemeProvider, {useTheme} from "./components/useContext/ThemeContext";

const UseContextRefactoringExample:FC = ()=>{
    const [darkTheme, toggleTheme] = useTheme()

    useEffect(()=>{
        console.log("Theme Updated!")
    },[darkTheme])
    return (
        <>
            <ThemeProvider>
                <button onClick={toggleTheme}>Toggle Theme</button>
                <div style={{'backgroundColor': darkTheme ? "black":"white", 'color': darkTheme ? 'white':'black'}}>Text</div>
            </ThemeProvider>
        </>
    );
}

export default UseContextRefactoringExample;

import {createContext, FC, ReactNode,  useContext, useState} from "react";

export const ThemeContext =  createContext< [boolean, ()=>void]>([true, ()=> {}])

const ThemeProvider:FC<{children: ReactNode}> = ({children})=>{
    const [darkTheme, setDarkTheme] = useState(true)

    function toggleTheme(){
        setDarkTheme(prev =>!prev)
    }

 return (
     <ThemeContext.Provider value={[darkTheme, toggleTheme]}>
         {children}
     </ThemeContext.Provider>
 )
}


export const useTheme = () =>{
    return useContext(ThemeContext)
}

export default ThemeProvider;

Comments

[WbICHA]

почему после нажатия на кнопку не происходит смена цветовой темы?

export const ThemeContext =  createContext< [boolean, ()=>void]>([true, ()=> {}])
                                                                        ^^^^^^^

[HitGirl]

WbICHA, Так я использую затем Provider, который должен перезапись это значение.

<ThemeContext.Provider value={[darkTheme, toggleTheme]}>

[Gimir]

Hook useTheme должен использоваться внутри провайдера, оберни весь компонент провайдером.

[WbICHA]

HitGirl, где ты его использовал? А где должен был?