// ThemeContext.js
import React, { createContext, useState } from 'react';

// 1. Create the Context

// 2. Create a Provider Component
export const ThemeProvider = ({ children }) => {
};

// 3. Consume context in header and impolement switch
const Header = () => {
  return (
    <header>
      <h1>Theme Switcher</h1>
    </header>
  );
};

// 4. In the content change background of the section based on theme
const Content = () => {
  return <div>My Content</div>
}

const App = () => {
  return (
    <ThemeProvider>
      <div>
        <Header />
        <Content />
      </div>
    </ThemeProvider>
  );
};

👾 EXERCISE: BUILD A THEME SWITCHER APP Description Create a small React app where users can toggle between "Light" and "Dark" themes. Use the Context API to manage the theme state across components. -------------------------------------------------------------------------------- STARTER CODE // ThemeContext.js import React, { createContext, useState } from 'react'; // 1. Create the Context // 2. Create a Provider Component export const ThemeProvider = ({ children }) => { }; // 3. Consume context in header and impolement switch const Header = () => { return ( <header> <h1>Theme Switcher</h1> </header> ); }; // 4. In the content change background of the section based on theme const Content = () => { return <div>My Content</div> } const App = () => { return ( <ThemeProvider> <div> <Header /> <Content /> </div> </ThemeProvider> ); }; -------------------------------------------------------------------------------- 🧠 REQUIREMENTS FOR STUDENTS 1. Consume the ThemeContext in both Header and Content components. 2. Display the current theme (light/dark) in the Header component. 3. Add a button in the Content component to toggle the theme. 4. Apply different background colors based on the theme: * Light theme: White background with black text. * Dark theme: Black background with white text.

Join the discussion to ask questions, share your thoughts, and discuss with other learners