主题更改时颜色不改变

Question

我没有得到所需的输出。我正在尝试编写一个小任务。该任务是我想要更改屏幕背景、文本和按钮的颜色，如上传的图像所示。代码共有 3 个文件。索引一，包含自定义挂钩和 css 文件的索引。我正在上传所有这些。按下“更改主题”按钮后，命令会在本地存储中更改，但更改不会反映在屏幕上。我附上代码。如果您现在有什么问题，请回答：

[在此输入图像描述][1]

index.jsx 文件：

import useLocalStorage from "./useLocalStorage";

export default function DarkWhiteTheme() {
  const [theme, setTheme] = useLocalStorage("theme", "dark");

  const handleToggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  console.log(theme);

  return (
    <div className="light-dark-mode" data-theme={theme}>
      <div className="container">
        <h1>Hello World</h1>
        <button onClick={handleToggleTheme} className="change-theme-button">
          Change Theme
        </button>
      </div>
    </div>
  );
}

使用本地存储文件：

export default function useLocalStorage(key, defaultValue) {
  const [value, setValue] = useState(() => {
    let currentValue;
    try {
      currentValue = JSON.parse(
        localStorage.getItem(key) || String(defaultValue)
      );
    } catch (error) {
      console.log(error);
      currentValue = defaultValue;
    }

    return currentValue;
  });

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

  return [value, setValue];
}

style.css 文件

:root {
    --background : #ffffff
    --text-primary : #000000
    --button-bg: #000000
    --button-text: #ffffff
}

[data-theme='dark'] {
    --background: #000000
    --text-primary: #ffffff
    --button-bg: #ffffff
    --button-text: #000000
}

.light-dark-mode {
    background-color: var(--background);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
    transition: all 0.5s;
}

.light-dark-mode .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.light-dark-mode .container p{
    color: var(--text-primary);
    font-size: 40px;
    margin: 0px;
}

.light-dark-mode .container button{
    background-color: var(--button-bg);
    border: 1px solid var(--button-bg);
    color: var(--button-text);
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.change-theme-button{
    cursor: pointer;
}```


  [1]: https://i.sstatic.net/ed5hnovI.png

Answer 1

你的代码一切正常，

useLocalStorage

钩子没有任何问题。问题出在你的 CSS 上。你忘记了一堆分号。

更改此：

:root {
    --background : #ffffff
    --text-primary : #000000
    --button-bg: #000000
    --button-text: #ffffff
}

[data-theme='dark'] {
    --background: #000000
    --text-primary: #ffffff
    --button-bg: #ffffff
    --button-text: #000000
}

到此

:root {
    --background : #ffffff;
    --text-primary : #000000;
    --button-bg: #000000;
    --button-text: #ffffff;
}

[data-theme='dark'] {
    --background: #000000;
    --text-primary: #ffffff;
    --button-bg: #ffffff;
    --button-text: #000000;
}

Answer 2

而不是

export default function useLocalStorage(key, defaultValue) {
  const [value, setValue] = useState(() => {
    let currentValue;
    try {
      currentValue = JSON.parse(
        localStorage.getItem(key) || String(defaultValue)
      );
    } catch (error) {
      console.log(error);
      currentValue = defaultValue;
    }

    return currentValue;
  });

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

  return [value, setValue];
}

尝试

export default function useLocalStorage(key, defaultValue) {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue !== null ? JSON.parse(storedValue) : defaultValue;
  });

  const setStoredValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue];
}

这可能有帮助