Lab Solution: Create a Light Dark Theme Switcher

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

const ThemeContext = createContext(undefined);

export const ThemeProvider = ({ children }) => {
  // Give this component a `theme` state
 
  // Return a `ThemeContext.Provider` component that receives an object 
  // as its value prop, with a `theme` string and a `toggleTheme` function
  return children;
}


// Change `useTheme` so that it returns `useContext(ThemeContext);` 
// instead of the `{theme: "light"}` object
export const useTheme = () => ({ theme: "light" });

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

const ThemeContext = createContext(undefined);

export const ThemeProvider = ({ children }) => {

// Give this component a `theme` state

// Return a `ThemeContext.Provider` component that receives an object

// as its value prop, with a `theme` string and a `toggleTheme` function

return children;

}

// Change `useTheme` so that it returns `useContext(ThemeContext);`

// instead of the `{theme: "light"}` object

export const useTheme = () => ({ theme: "light" });

"Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. at input at label at Switch at header at Header at div at App at ThemeProvider (https://cw0.scrimba.com/src/ThemeContext:3:33) at Root"

-4:52