React - localstorage how to add multiple color themes

user_13045795 0
Viewed 838

I have one checkbox that changes the color theme to dark or light. But I want to add three more checkboxes which will also be the color of the page, that is, I want to have 4 checkboxes where the first one will change the page color to black, the second white, the third to green and the fourth to red

App.js

import React, { useState, useEffect } from "react";
import "./App.css";
import ReactDOM from 'react-dom';

export default function App() {
  const [dark, setDark] = useState(getMode);

  useEffect(() => {
    localStorage.setItem("dark", JSON.stringify(dark));
  }, [dark]);

  function getMode() {
    const savedmode = JSON.parse(localStorage.getItem("dark"));
    return savedmode || false;
  }
  
  return (
    <div className={dark ? "black" : "light"} style={{ height: "100vh" }}>
      <nav>
        <div className="toggle-container">
          <span style={{ color: dark ? "grey" : "yellow" }}>☀︎</span>
          <span className="toggle">
            <input
              checked={dark}
              onChange={() => setDark((prevMode) => !prevMode)}
              id="checkbox"
              className="checkbox"
              type="checkbox"
            />
            <label htmlFor="checkbox" />
          </span>
          <span style={{ color: dark ? "slateblue" : "grey" }}>☾</span>
        </div>
      </nav>

      <div style={{ textAlign: "center" }}>
        <h1>{dark ? "darkmode" : "lightmode"}</h1>
        <p>This is dark mode content</p>
        <h1>The darkmode is implemented by reactjs</h1>
      </div>
    </div>
  );
}

App.css

.black {
    background-color: black;
    color: white;
  }
  .light {
    background-color: blanchedalmond;
    color: black;
  }
  .nav {
    background-color: blue;
    color: white;
  }
  .toggle-container {
    background-color: blue;
    padding: 20px;
    display: flex;
    justify-content: center;
  }
reactjs local-storage themes function javascript
2 Answers

Store the active color to localStorage e.g

localStorage.setItem('color', color);

set the color based on that:

 const [color, setColor] = useState(localStorage.getItem("color"));


  const changeBg = (backgroundColor) => {
    localStorage.setItem('color', backgroundColor);
    setColor(backgroundColor)
  };

and use it to set the backgroundColor style:

 <div style={{ backgroundColor: color }}>
      <div>
        <label>
          <input
            onChange={() => changeBg("green")}
            type="radio"
            name="background"
          />{" "}
          Green
        </label>
        <label>
          <input
            onChange={() => changeBg("red")}
            type="radio"
            name="background"
          />{" "}
          Red
        </label>
        <label>
          <input
            onChange={() => changeBg("blue")}
            type="radio"
            name="background"
          />{" "}
          Blue
        </label>
      </div>
    </div>

Another approach whould be to set the className instead of style, but you need to define a css rule per color, e.g .red: {...}, .black: {...} etc.

user_150648820

Check the Code on the link below

Code Sandbox

all I did was add

const [bg, setBg] = useState("bg-white"); // this will hold classname for background;

const changeBg = (color) => setBg(color);

and add it to the App classname

<div className={`App ${bg}`}>
<label>
   <input checked={bg === "dark"} onChange={() => changeBg("bg-red")} /> Dark
<label>
</div>

I think the code is straight forward, if you dont understand any thing ask me

user_138288430
Related