search

aditya-bhaumik / Pathsphere

PathSphere is a comprehensive platform designed to connect students with scholarship opportunities and educators with job openings. It features dynamic search tools and community discussions to enhance access to educational and career resources.
https://pathsphere.netlify.app/
MIT License
111 stars 253 forks source link

Fixing Light Mode/Dark Mode Toggle Integration Issues #909

Open govindbairi opened 1 day ago

govindbairi commented 1 day ago

Description

I'm facing issues with integrating light mode and dark mode toggle functionality on my website. The toggle switch is present, but switching between modes does not update the styles as expected. I have tried using CSS variables for light and dark themes, JavaScript to toggle classes, and even storing the theme preference in localStorage to persist the user's choice. However, the theme does not change when the toggle is clicked, or it reverts back to the default mode on page refresh.

Steps to Reproduce

Screenshot 2024-10-21 130535 Steps to Reproduce:

Navigate to the webpage where the light mode/dark mode toggle is implemented. Click on the toggle switch to change between light mode and dark mode. Observe that the theme does not change or reverts back to the default mode. Refresh the page and notice that the previously selected theme is not retained (if using local Storage for persistence). Repeat the toggle action, and the same issue persists.

Expected Behavior

When the light mode/dark mode toggle is clicked, the website's theme should switch seamlessly between light and dark modes. The selected theme should be applied immediately, updating the colors and styles accordingly. If the theme preference is stored in localStorage, the chosen mode should persist even after refreshing or reopening the page, maintaining the user's last selected theme.

Actual Behavior

When clicking the light mode/dark mode toggle, the website's theme does not change, or the change is inconsistent. Sometimes the style remains stuck on the default theme. If the theme appears to change, it reverts back to the default mode upon refreshing the page, even when using local Storage to save the user's preference. The toggled theme is not maintained, leading to a poor user experience.

Screenshots

Screenshot 2024-10-21 130535

Additional Information

No response

What browser are you seeing the problem on?

Checklist

github-actions[bot] commented 1 day ago

Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.