Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✨ Enhancement: Dark/Light mode toggle can be confusing #726

Open
gregsdennis opened this issue May 31, 2024 · 14 comments · May be fixed by #735
Open

✨ Enhancement: Dark/Light mode toggle can be confusing #726

gregsdennis opened this issue May 31, 2024 · 14 comments · May be fixed by #735
Assignees
@JeelRajodiya
Labels
✨ Enhancement Indicates that the issue suggests an improvement or new feature. Status: In Progress This issue is being worked on, and has someone assigned.

Comments

@gregsdennis
Copy link
Member

gregsdennis commented May 31, 2024 •
edited

Is your feature request related to a problem? Please describe

The dark/light mode button in the upper left of every page operates to say, "click this to go to the mode indicated by the icon." For example, in dark mode, it shows a sun; and in light mode, it shows a moon.

It shows the mode that that clicking the button would result in. However, typically, I think of a toggle as showing the mode that you are in.

That said, I can also see that some people might expect the current behavior.

As a result, I'm not sure that the current button adequately caters to all perspectives. It might seem correct for some, but it's definitely backwards for me.

Describe the solution you'd like

https://chirpy.cotes.page/ uses a single icon that's just color-flipped with the theme. The icon indicates both light and dark, indicating that the button toggles between them.

image image

Our current button shows the state, but Chirpy's doesn't. Chirpy's doesn't carry a state because the theme is the state. You can plainly see which mode you're in. The button icon merely needs to indicate that it changes the state.

I'm not saying we need to use this icon, but I think this approach is better.

Describe alternatives you've considered

The other option is to have a slider toggle, but that takes up more room on the page, and doesn't really fit with the iconography theme we have in the upper right of just single icons.

Additional context

No response

Are you working on this?

No
@gregsdennis gregsdennis added ✨ Enhancement Indicates that the issue suggests an improvement or new feature. Status: Triage This is the initial status for an issue that requires triage. labels May 31, 2024
@benjagm benjagm added Status: Available No one has claimed responsibility for resolving this issue. and removed Status: Triage This is the initial status for an issue that requires triage. labels Jun 3, 2024
@benjagm
Copy link
Collaborator

benjagm commented Jun 3, 2024

I like this proposal! Thanks Greg.

@JeelRajodiya
Copy link
Contributor

Hi, Can I please work on this issue?

@gregsdennis
Copy link
Member Author

gregsdennis commented Jun 3, 2024 •
edited

The Chocolatey website shows yet another aproach: a drop-down with explicit options. The nice thing about this is that it includes a browser-detection option.

image

@swaparup36
Copy link
Contributor

@benjagm Hi, can I work on this?

@benjagm
Copy link
Collaborator

benjagm commented Jun 5, 2024

@JeelRajodiya Please go ahead. Have you seen Greg's last proposal?

@benjagm benjagm added Status: In Progress This issue is being worked on, and has someone assigned. and removed Status: Available No one has claimed responsibility for resolving this issue. labels Jun 5, 2024
@JeelRajodiya
Copy link
Contributor

@JeelRajodiya Please go ahead. Have you seen Greg's last proposal?

Yes. I think we might need to use a UI library if we want create a drop down list. Are we using any UI library in the website? I tried looking in the codebase but couldn't find any.

on a side note, this is how it looks like if we make changes as per greg's initial proposal

input

@benjagm
Copy link
Collaborator

benjagm commented Jun 5, 2024

Are we using any UI library in the website?** I tried looking in the codebase but couldn't find any.

We are exploring https://ui.shadcn.com/

CC @DhairyaMajmudar

@DhairyaMajmudar
Copy link
Member

Hi @JeelRajodiya there's a plan to implement ShadCN UI lib. but since this is currently in the planning the above dropdown feature can be implemented using <select> and <options> HTML tags.

@JeelRajodiya
Copy link
Contributor

JeelRajodiya commented Jun 5, 2024 •
edited

Hi @JeelRajodiya there's a plan to implement ShadCN UI lib. but since this is currently in the planning the above dropdown feature can be implemented using <select> and <options> HTML tags.

Thanks Dhairya. I tried using <select> and <options>. We want to show a icon for the selected theme, and I believe it is difficult customize the select element for this specific requirement.

image

image

I think using a UI library would be a better option. for now I am tying to implement it though some manual logic.

@JeelRajodiya JeelRajodiya linked a pull request Jun 5, 2024 that will close this issue
Open
@DarhkVoyd
Copy link
Member

DarhkVoyd commented Jun 13, 2024 •
edited

Could you also check why do we have to click the toggle button multiple times to switch the theme (on a fresh load), this has started to bug me.

@JeelRajodiya
Copy link
Contributor

Could you also check why do we have to click the toggle button multiple times to switch the theme (on a fresh load), this has started to bug me.

@DarhkVoyd Do you mean the improper icon colors shown in the image below?
image

@DarhkVoyd
Copy link
Member

It takes two clicks to change the theme.

Screen.Recording.2024-06-17.at.8.49.36.PM.mov

@JeelRajodiya
Copy link
Contributor

It takes two clicks to change the theme.

Screen.Recording.2024-06-17.at.8.49.36.PM.mov

Thankss! I will look into this

@JeelRajodiya
Copy link
Contributor

It takes two clicks to change the theme.

Screen.Recording.2024-06-17.at.8.49.36.PM.mov

Fixed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@JeelRajodiya JeelRajodiya

Labels
✨ Enhancement Indicates that the issue suggests an improvement or new feature. Status: In Progress This issue is being worked on, and has someone assigned.
Projects
Website Contributor Board
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Enchantment Dark Mode Toggle shows a popup JeelRajodiya/JSON-Schema-website
6 participants
@gregsdennis @benjagm @JeelRajodiya @DarhkVoyd @swaparup36 @DhairyaMajmudar