feat: dark/light mode toggle in settings #150
Conversation
|
@JiyaGupta-cs is attempting to deploy a commit to the openfoodfacts Team on Vercel. A member of the Team first needs to authorize it. |
|
Hello @JiyaGupta-cs and thanks for the PR. I don't think storing the theme in cookies is a pretty way to do so. We already have a mechanism to store user preferences in local storage ( If you'd like a reference, look at this code: https://github.com/cartabinaria/dynamik/blob/main/src/lib/settings.ts |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
PR Overview
This PR introduces a dark/light mode toggle feature that dynamically updates the website's theme and persists the user’s choice using cookies.
- Added a SvelteKit hook in src/hooks.server.ts to adjust the HTML attribute according to the theme.
- Introduced a page action in src/routes/+page.server.ts to set the theme cookie based on URL parameters.
Reviewed Changes
| File | Description |
|---|---|
| src/hooks.server.ts | Added logic to update the HTML theme attribute based on cookie/URL. |
| src/routes/+page.server.ts | Created an action to set a persistent theme preference cookie. |
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
|
Hey @JiyaGupta-cs , any update on this one? |
|
@VaiTon I am working on this issue. |
JiyaGupta-cs
force-pushed
the
dark-light-mode
branch
from
b727981 to
7a58624
Compare
Screencast.from.2025-03-05.03-50-42.webmI have updated the code taking inferences from the reference provided. Thanks ! |
src/lib/settings.ts
Outdated
| theme: Theme; | ||
| } | ||
|
|
||
| const settings = persisted<Settings>('settings', { |
There was a problem hiding this comment.
Why another persisted? Can't we use the preferences on line 3?
There was a problem hiding this comment.
Yes, you are right. I have corrected that
Mh, but with this PR we're just making changing theme between light and dark mode manual. I don't see any new theme added. Now the question is, why should we do something like this? |
Yes, you are right we are just switching between the dark and light mode. I have updated the PR description now |
The PR description is not the problem. The question is: why should the user NOT use the automatic color switching and instead fix the theme? At least we should provide a way to use the auto color switching. |
|
@VaiTon |
|
@VaiTon could you please guide more about it |
|
@JiyaGupta-cs if we want to make the user able to select a light / dark mode and keep it, we should at least add a "system" / "auto" mode that follows OS defaults |
The problem that is occuring is ff |
|
Then I'm sorry @JiyaGupta-cs but I don't think that is worth the change. Not a lot of users would want to fix a theme anyway |
Description
This PR introduces a dark/light mode toggle feature, allowing users to switch between themes dynamically. The selected theme remains persistent even after refreshing the website.
Key Features:
Additional Context
The logo also needs to be changed for the light mode and the theme change option need to be styled as the dropdown like other similar fields.
If you prefer to change the light mode colors, it can be selected from any theme of DaisyUI: https://daisyui.com/docs/themes. Let me know if you'd like a specific theme to be set as the default.
Looking forward to your feedback!
Screenshot
Screencast.from.2025-02-28.04-38-36.webm
Fixes bug(s)
Closes the dark/light mode feature on #2