主题切换器React -在页面刷新时选择不持久

Question

我试图将用户选择的主题应用于useState()的初始值，但是当我刷新页面时，选择不适用。为了使值在页面刷新期间保持不变，我必须更改什么?

theme-toggler.js

import React, { createContext, useState } from "react";
export const themes = {
light: {
background: "#41A9EC",
fontColor: '#FFF'
},
dark: {
background: "#F9F9",
fontColor: '#000'
}
}
export const ThemeContext = createContext({})
export const ThemeProvider = (props) => {
const [theme, setTheme] = useState(localStorage.themes)

if(theme === themes.light) {
localStorage.setItem('themes', JSON.stringify(themes.light))
}
if(theme === themes.dark) {
localStorage.setItem('themes', JSON.stringify(themes.dark))
}

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{props.children}
</ThemeContext.Provider>
)
}

theme-toggler-button.js

import React, { useContext } from "react"
import { ThemeContext, themes } from "../../context/theme-toggler"
import { Button } from "../button/button"
export const ThemeTogglerButton = () => {
const { theme, setTheme } = useContext(ThemeContext)

return (
<div style={{ backgroundColor: theme.background, color: theme.fontColor }}>
<Button onClick={() => setTheme(theme === themes.light ? themes.dark : themes.light)}>Theme Toggler</Button>
</div>
)
}

提前感谢。

Answer 1

import React, { createContext, useState } from "react";
export const themes = {
light: {
background: "#41A9EC",
fontColor: '#FFF'
},
dark: {
background: "#F9F9",
fontColor: '#000'
}
}
export const ThemeContext = createContext({})
export const ThemeProvider = (props) => {
const [theme, setTheme] = useState(localStorage.getItem("themes"))

useEffect(() => {
if(theme === themes.light) {
localStorage.setItem('themes', JSON.stringify(themes.light))
}
if(theme === themes.dark) {
localStorage.setItem('themes', JSON.stringify(themes.dark))
}
},[theme])

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{props.children}
</ThemeContext.Provider>
)
}

Answer 2

几天后，我就能让它工作了。我把我找到的解决方案贴出来，是为了帮助其他有类似问题的人。

theme-toggler-button文件:

import React, { useContext } from "react"
import { ThemeContext, themes } from "../../context/theme-toggler"
import { Button } from "../button"
export const ThemeTogglerButton = () => {
const { theme, setTheme } = useContext(ThemeContext)
function handleClick() {
const localTheme = JSON.parse(localStorage.getItem("themes"))
console.log(localTheme)
setTheme(theme === themes.light ? themes.dark : themes.light)
if (localTheme) {
localStorage.setItem('themes', JSON.stringify(localTheme.name === 'light mode' ? themes.dark : themes.light))
} else {
localStorage.setItem('themes', JSON.stringify(themes.light))
}
}
return (
<Button style={{ backgroundColor: theme.background,
color: theme.fontColor }} 
onClick={() => handleClick()}>{
(theme === themes.light ? 
themes.dark.name : themes.light.name)}
</Button>
)
}

theme-toggler文件:

import React, { createContext, useState, useEffect } from "react";
export const themes = {
light: {
name: 'light mode',
background: '#41A9EC',
fontColor: '#FFF'
},
dark: {
name: 'dark mode',
background: '#212121',
fontColor: '#AAB0BC'
}
}
export const ThemeContext = createContext({})
export const ThemeProvider = (props) => {
const [theme, setTheme] = useState([])
useEffect(() => {
const localTheme = JSON.parse(localStorage.getItem("themes"))

if (!localTheme) {
localStorage.setItem('themes', JSON.stringify(themes.light))
setTheme(themes.light)
}
if (localTheme) {
if (localTheme.name === 'light mode') {
localStorage.setItem('themes', JSON.stringify(themes.light))
setTheme(themes.light)
}
if (localTheme.name === 'dark mode') {
localStorage.setItem('themes', JSON.stringify(themes.dark))
setTheme(themes.dark)
}
}
}, [])
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{props.children}
</ThemeContext.Provider>
)
}

请在我的项目仓库下面找到，我目前使用上面的解决方案:https://github.com/Alex-Lima84/pokemon-react-api