Open
Description
Description
Light and dark theme
Feature:
We could create a simple light and dark mode for the user to toggle between.
Possible Solution:
- We can create two icons at the footer so it is not to distracting with all the other elements in the hero/header. We can use react icons to display a sun and moon as the buttons and highlight whichever is active.
- We can use localstorage to save the users preference for the light and dark mode. In order for the theme to be accessible across the whole application, we can utilize "useContext" that will wrap our app in the index.js file and provide a "theme" and "setTheme" as props in a context file. The context file can contain the following as a possible implementation:
import React, { useContext, useState } from "react";
const ThemeContext = React.createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState(true);
const toggleTheme = (isLight) => {
setTheme(isLight);
setLocalTheme(isLight)
};
const setLocalTheme = async (value) => {
try {
await localStorage.setItem("theme", value.toString());
} catch (err) {
console.log("Error setting local theme: ", err);
}
};
return (
<ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
export const useTheme = () => {
return useContext(ThemeContext);
};
- And then in the index.js we simply wrap our context like so:
import { ThemeProvider } from "./context/ThemeContext"; // new line
... morecode
<ThemeProvider> // new line
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
</ThemeProvider> // new line
... more code
- Now that our theme variable can be accessible throughout our whole application all we have to do is run the "toggleTheme" or "setTheme" to toggle the light/dark theme:
import { useTheme } from "./context/ThemeContext";
function ExampleComponent() {
const { theme, setTheme, toggleTheme } = useTheme();
... more code
}
- As for the localstorage, we can initialize a default theme in the app.js like so:
const initializeLocalStorage = async () => {
try {
const localTheme = await localStorage.getItem("theme");
if (!localTheme) {
localStorage.setItem("theme", JSON.stringify(theme));
} else {
const parsedTheme = JSON.parse(localTheme);
setTheme(parsedTheme);
}
} catch (error) {
console.log("Error initializing LocalStorage:", error);
}
};
useEffect(() => {
initializeLocalStorage();
}, []);
- When changing the color of the application we can use css custom properties:
div[data-theme="light"] {
color: "black",
background-color: "white"
}
div[data-theme="dark"] {
color: "white",
background-color: "black"
}
- In the components where we want the styles to be applied, all we have to do is add the following:
import { useTheme } from "../../context/ThemeContext";
function ExampleComponent() {
const { theme, setTheme, toggleTheme } = useTheme();
... more code
<div data-theme={theme ? "light" : "dark"}>
... more code
</div>
}
... more code
- In summary, this should allow the user to toggle the light/dark theme and save the following theme in the localstorage so that when the user leaves and returns to the application, they will still have their preferred theme.
Screenshots
No response
Checklist
- I have checked for duplicate issues
- I have read the Contribution Guidelines
- I am willing to work on this issue (optional)
Metadata
Assignees
Labels
No labels
Activity