I'm trying to add a dark mode feature and have been successful, the issue is that the toggle between dark/light mode is only targeting the body of the html/css

   :root {
  --blue: rgb(13, 59, 105);
  --white: rgb(255, 254, 254);
}

body {
  background: var(--background-color);
  color: var(--text-color);
  font-weight: var(--font-weight);
}

body.light {
  --background-color: var(--white);
  --text-color: var(--blue);
  --image: url("./day-forrest.jpg");
}

body.dark {
  --background-color: var(--blue);
  --text-color: var(--white);
  --image: url("./night-forrest.jpg");
}

.title-heading {
  text-align: center;
  margin: 4rem 0 0 0;
  font-size: 40px;
  color: var(--text-color);
}


nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: var(--text-color);
}

nav a {
  text-decoration: none;
  font-weight: 500;
  color: var(--background-color);
}

.background-image {
  width: 100%;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1100px;
  background-image: var(--image);
}

.title-heading {
  text-align: center;
  margin: 4rem 0 1rem 0;
  font-size: 40px;
}

.subtitle {
  width: 40%;
  margin: 2rem auto;
  line-height: 1.6;
  text-align: center;
}

p {
  width: 40%;
  margin: 2rem auto;
  line-height: 1.6;
}

import React from "react"; import "./styles.css";

const DarkMode = () => {
  let clickedClass = "clicked";
  const body = document.body;
  const lightMode = "light";
  const darkMode = "dark";
  let theme;

  if (localStorage) {
    theme = localStorage.getItem("theme");
  }

  if (theme === lightMode || theme === darkMode) {
    body.classList.add(theme);
  } else {
    body.classList.add(lightMode);
  }

  const switchTheme = (e) => {
    if (theme === darkMode) {
      body.classList.replace(darkMode, lightMode);
      e.target.classList.remove(clickedClass);
      localStorage.setItem("theme", "light");
      theme = lightMode;
    } else {
      body.classList.replace(lightMode, darkMode);
      e.target.classList.add(clickedClass);
      localStorage.setItem("theme", "dark");
      theme = darkMode;
    }
  };

  return (
    <button
      className={theme === "dark" ? clickedClass : ""}
      id="darkMode"
      onClick={(e) => switchTheme(e)}
    ></button>
  );
};

export default DarkMode;

A solution for this problem would be to have 3 separate heading colors of work experience, Hobbies and Contact in light mode and for them to all turn to white in dark mode rather than only having the 2 changeable color options of blue and white throughout the whole page.

--blue: rgb(13, 59, 105); --white: rgb(255, 254, 254);

thanks in advance the sandbox link is here https://codesandbox.io/s/dark-mode-issue-14-11-22-f0edup?file=/src/AboutPage/styles.css

CodePudding user response：

You can use combinator to select children of body in light and dark separately.

More about combinator in CSS

This way, you can customize how they should look like in each color mode.

Example

body.light .title-heading {
  color: green;
}

body.dark .title-heading {
  color: white;
}

This example makes the .title-heading has color: green in light mode and color: white in dark mode.

You can use this approach to add customized styling for other elements all by CSS.

Hope this will help!