I am trying to make a button that allows the user to switch between light and dark theme. The method I am using is to change the className of my App div. All of the other components in my project are inside of the App component. Then in the individual CSS files for the components I first select the className of the App div which is either .light or .dark. Then I write the name of the component that I want to set a theme color to. For example:

.light p {
  background-color: white;
}

However, this doesn't work.

Here are some of the files:

/*App.js*/
import { useState } from "react";

import TaskPage from "./pages/taskPage";

import { fas } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
import { MainContextProvider } from "./store/MainContext";

library.add(fas);

function App() {
  const [theme, setTheme] = useState("light");

  const switchTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <MainContextProvider>
      <div className={`App ${theme}`}>
        <div className="pageTop">
          <h1 className="title">Task Board</h1>
        </div>
        <button className="button" onClick={switchTheme}>
          Change theme
        </button>
        <TaskPage />
      </div>
    </MainContextProvider>
  );
}

export default App;

/*index.css*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

.App {
  overflow-x: hidden;
  padding-bottom: 40px;
  height: 100%;
  width: 100%;
}

.light {
  background-color: #fcfcfc;
}

.dark {
  background-color: #181A1B;
}

.title {
  font-family: "Roboto", sans-serif;
  font-size: 50px;
  font-weight: 700;
  text-align: center;
  margin-top: 40px;
  text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}

.light .title {
  color: black;
}

.dark .title {
  color: white;
}

.pageTop {
  margin-bottom: 50px;
}

/*todo.module.css*/
.taskCard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 340px;
  height: 260px;
  min-width: 340px;
  min-height: 260px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
}

.light .taskCard {
  background-color: white;
}

.dark .taskCard {
  background-color: #2B2E30;
}

I used this sandbox as an example: https://codesandbox.io/s/stupefied-jackson-0ynz6?file=/src/App.js

I am a beginner with React.js