Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below:
#light{
--color-bg: #4e4f50;
--color-bg-variant: #746c70;
--color-primary: #e2ded0;
--color-primary-variant: #647c90;
--color-white: white;
--color-light: rgb(255 255 255 / 60%);
}
#dark{
--color-bg: #1A1A2E;
--color-bg-variant: #16213E;
--color-primary: #E94560;
--color-primary-variant: #0F3460;
--color-white: white;
--color-light: rgb(255 255 255 / 60%);
}
These variables are applied throughout the project except in the body tag style declaration:
body {
font-family: Poppins, sans-serif;
background: var(--color-bg);
color: var(--color-white);
line-height: 1.7;
background-image: none;
}
However, the background variable does not seem to be working within the body tag. This issue needs immediate attention. It's puzzling why the other variables are functioning correctly but not this one.
In order to switch between light and dark themes, I have implemented the following logic in App.jsx:
import { createContext } from "react"
import { useState } from "react"
export const ThemeContext = createContext(null)
const App = () => {
const [theme, setTheme] = useState("dark")
const toggleTheme = () => {
setTheme((curr) => (curr === "light" ? "dark" : "light"))
}
return (
<ThemeContext.Provider value={{theme, setTheme}}>
<Router>
<Routes>
<Route path="/" element={
<div id={theme}>
<Header/>
<Nav/>
<About/>
<Experience/>
<Services/>
<BlogPreview/>
<Contact/>
<Footer/>
</div>}
/>
<Route path="/Blog" element={
<div id={theme}>
<Blog/>
<NavG/>
</div>}
/>
<Route path="*" element={
<div id={theme}>
<Error/>
<NavGG/>
</div>
}/>
<Route path="/Blog/buymeanr6please" element={
<div id={theme}>
<Post1/>
</div>
}/>
</Routes>
</Router>
</ThemeContext.Provider>
)
}
export default App
If anyone can offer guidance on resolving this issue, I would greatly appreciate it.