React - localstorage 如何添加多种颜色主题

Question

我有一个复选框，可以将颜色主题更改为深色或浅色。但是我想再添加三个复选框，它们也将是页面的颜色，也就是说，我想要有 4 个复选框，其中第一个将页面颜色更改为黑色，第二个白色，第三个变为绿色，第四个变红

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;
  }

Answer 1

将活动颜色存储到 localStorage 例如

localStorage.setItem('color', color);

根据它设置颜色：

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


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

并使用它来设置 backgroundColor 样式：

 <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>

另一种方法是设置 className 而不是样式，但您需要为每种颜色定义一个 css 规则，例如 .red: {...}, .black: {... } 等

Answer 2

检查下面链接上的代码

Code Sandbox

我所做的只是添加

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

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

并将其添加到 App 类名中

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

我认为代码是直截了当的，如果你有什么不明白的地方问我