this is my first question here and I am very begginer for React.

I would like to change the color “Darkmode” and “LightMode” by useContext of react with simple button called “Change DarkMode”, when I see developper tool.Once I press this button,we can see classname is actually working so it changes from “app false” to “app dark-theme” but the color is not changed. So I guess css selector is not good ?

Classname before
classname after

In App.jsx,I write

function App() {
  const { darkblue } = useDarkBlue();

  return (
    <div className={`app ${darkblue && "dark-theme"}`}> 
// Here is for change classname from defalut to "dark-theme" and this class name is connected with CSS.
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

export default function AppWithProvider() {
  return (
    <DarkBlueProvider>
      <App />
    </DarkBlueProvider>
  );
}

in CSS,

:root {
  --font-family-title: "PaytoneOne-Regular";
  --font-family-text: "JosefinSans-Regular", sans-serif;
  --font-color: black;
  --background-gradient: linear-gradient(
    to bottom,
    #73bde6,
    #8ed6d7,
    #adeae434
  );
  --background-gradient-false: linear-gradient(to bottom, #07399c, #95aadc);
}

.buttonDarkMode {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  min-height: calc(100vh-117px);
}

app false {
  background: var(--background-gradient);
}

I tried changing the className with “div app false” and “div app dark-theme”