Fix: Dark mode toggles off on page refresh

[maheshsemwal]

Title and Issue number

Title : Dark mode gets turned off on refreshing page | Fixed
Description: This PR fixes the issue where the dark mode setting gets turned off when the page is refreshed. The theme preference is now properly saved and loaded from localStorage.
Issue No. : #472

Close #472

Changes Made

The changes i made to this part of the code ensure that the theme is correctly initialized from localStorage and that any changes to the theme are persisted back to localStorage. This allows the application to remember the user's theme preference even after the page is refreshed.

Original Code:

const [theme, setTheme] = useState("dark");

Updated Code:

const [theme, setTheme] = useState(() => {
    return localStorage.getItem('theme') || 'light';
});

useEffect(() => {
    localStorage.setItem('theme', theme);
}, [theme]);

Screenshots

before

ShopNex.and.8.more.pages.-.Personal.-.Microsoft.Edge.2024-06-08.20-22-52.mp4

After

ShopNex.and.8.more.pages.-.Personal.-.Microsoft.Edge.2024-06-08.20-23-23.mp4

Checklist

• I have tested these changes locally.
• I have reviewed the code and ensured it follows the project's coding standards.
• I have read the contributing guidelines.

I'm contributing this under GirlScript summer of code.
Please review my PR and let me know if any changes are required.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shop-nex	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 8, 2024 3:25pm