Benim sorum: Nasil context icerigini degistirecegim.

Bir 'dark mode' uygulamasi yapiyorum. ve change buttonuna bastigimda app
kismi ve content kisminin dark moda gelmesini istiyorum. Fakat asagidaki
kodlarla calistirip change butonuna bastigimda content kismi karanlik moda
geliyor fakat app kismi gelmiyor. (content kismini content.js adi altinda yine
divin style kismina useContext() kullanarak yaptim eg.(/div style = {useContext(ThemeData)} seklinde...)

import React, { useContext, useState } from 'react'
import logo from './logo.svg';
import './App.css';
import Bootstrap from './components/Bootstrap';
import Navbar from './components/Navbar';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Component } from 'react';
import Content from './components/content'



const theme = {
  dark:
  { 
    color: 'white',
    backgroundColor: 'black',
    height: '900px'
  },

  light:
  {
    color: 'black',
    backgroundColor: 'rgba(255, 255, 255, 0.7)',
    height: '900px'
  }

};export const ThemeData = React.createContext(theme.light); //default
  export const ThemeApp = React.createContext(theme.light); //default

function App() {

  
  
  const [ThemeColor, setThemeColor] = useState(theme.light)
  function change(){
    if(ThemeColor == theme.light){
      setThemeColor(theme.dark)
      console.log(ThemeColor)
    }
    else{
      setThemeColor(theme.light)
      console.log(ThemeColor)
    }

  }


  return (
    <ThemeApp.Provider value={ThemeColor}>
                              // bu kisim calismiyor
      <div className="App" style={useContext(ThemeApp)}>
          // style ekledigime ragmen calismiyor
          
              {console.log(ThemeApp)}
      <Navbar></Navbar>
      <button onClick={change} className='mt-5'>Change</button>
      <Bootstrap/>
      <ThemeData.Provider value={ThemeColor}>
      <Content/>
      </ThemeData.Provider>
      </div>
      </ThemeApp.Provider>

  );
}

export default App;