Add light/dark mode toggler about ratemyloo HOT 9 CLOSED

Here is some idea how to make it https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp

from ratemyloo.

That's a good start. We can use React to define a component that is applied to all pages. Inside the component, we can use TailwindCSS's dark variant feature for styling. We'll need to use React's states to trigger the switch between light and dark mode, then store the setting in one of the browser storages called localStorage. That way, the browser will remember the user's preference.

Reference:

• TailwindCSS Dark Mode
• React docs on states
• Guide on localStorage

from ratemyloo.

the issues i am having right now is i can see the toggle button to change the light and dark mode but It's not functioning correctly i think this might be related about global.css i will keep looking for it

from ratemyloo.

i think i am going on the right track? i guess now i can see at least the toggler is changing light and dark mode

from ratemyloo.

Could you create a branch containing your current code and send it here?

EDIT: Also send screenshots of your progress.

from ratemyloo.

yes i will do that tmw sir

from ratemyloo.

from ratemyloo.

from ratemyloo.

Link to @ipark604's branch for user page design: https://github.com/johncmanuel/RateMyLoo/tree/user

Things to cover for review later:

1. Fix placement of newly added/modified files (they are located in the root at first glance)
2. Go over the code made by @ipark604
3. When finished, create a pull request and check if things are working as intended in the Preview deployment
4. Merge with main branch after another review

from ratemyloo.