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

Add a light-mode/dark-mode toggle #443

Open
2 tasks
sandbergja opened this issue Nov 6, 2024 · 1 comment · May be fixed by #452
Open
2 tasks

Add a light-mode/dark-mode toggle #443

sandbergja opened this issue Nov 6, 2024 · 1 comment · May be fixed by #452
Assignees
@sandbergja
Labels
accessibility-general feature high priority

Comments

@sandbergja
Copy link
Member

sandbergja commented Nov 6, 2024 •
edited by maxkadel
Loading

High priority

User story

As a user, I want to try both the light mode and dark mode of this site to determine which is more usable for me, then use that one.

This came up in conversation with a Fable tester, who said:

I think [dark mode] should be an opt-in. Having it at the top. It gives an option for the user, [...] because sometimes with their current assistive technology, they need to use dark mode with a specific website, but with other websites they don't have to. So having the option to opt-in I think might be the best solution.

Acceptance criteria

  • I can toggle dark mode on or off without needing to change my browser or OS settings
  • I have checked the toggle feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
    • axe dev tools
    • Lighthouse
    • Wave

Implementation notes
@beth-german
Copy link
Contributor

The UX/UI consultants asked why the search was so dark. Could we disable dark mode until a toggle option is available?

@sandbergja sandbergja self-assigned this Jan 30, 2025
sandbergja added a commit that referenced this issue Jan 30, 2025
@sandbergja
Refactor light/dark mode to use CSS light-dark
b6f5a44 
This is recommended by this article: https://css-tricks.com/come-to-the-light-dark-side/

Helps with #443
@sandbergja sandbergja mentioned this issue Jan 30, 2025
Merged
kevinreiss pushed a commit that referenced this issue Jan 30, 2025
@sandbergja
Refactor light/dark mode to use CSS light-dark (#451)
bfd732d 
This is recommended by this article: https://css-tricks.com/come-to-the-light-dark-side/

Helps with #443
sandbergja added a commit to pulibrary/lux-design-system that referenced this issue Feb 6, 2025
@sandbergja
[LuxMenuBar] If no href is supplied, use a <button> tag instead of an…
6ad91d9 
… <a> tag

Prior to this commit, if you don't supply an href value for
a child menu item, Lux will render an <a> tag without an
href.  This is not focusable, so keyboard users will not be
able to activate that menu item.

This helps with pulibrary/allsearch_frontend#443,
since it allows us to create menu items that are keyboard
focusable that are not links (in this case, they will be
buttons that switch between dark mode and light mode).
This was referenced Feb 6, 2025
Merged
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sandbergja sandbergja

Labels
accessibility-general feature high priority
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add a light-mode/dark-mode switcher pulibrary/allsearch_frontend
3 participants
@sandbergja @beth-german @maxkadel