Skip to content

Add dark mode toggle#757

Open
abby-ql wants to merge 7 commits intotypelevel:mainfrom
abby-ql:dark-mode-toggle
Open

Add dark mode toggle#757
abby-ql wants to merge 7 commits intotypelevel:mainfrom
abby-ql:dark-mode-toggle

Conversation

@abby-ql
Copy link
Copy Markdown

@abby-ql abby-ql commented Mar 8, 2026

Closes #382
Helium currently supports dark mode but users cannot manually override it per site.
This PR adds a manual color mode toggle to the Helium theme. Users can switch between Auto (follow prefers-color-scheme), Light, and Dark. The selected mode is stored locally in the browser using localStorage and persists across page navigations. If no selection is made, the default is Auto which follows the system/browser preference, and no personal or identifying data is stored. The toggle button is placed on top left navigation bar.
Testing: checked Auto does follow browser default, and Light/Dark mode switch is working.

Example ( using the protosearch doc)
image
image

@abby-ql
Copy link
Copy Markdown
Author

abby-ql commented Mar 8, 2026

The current implementation renders the toggle (and the initialization script) by default, which changes the generated html structure and causes several Helium html tests to fail due to expected output differences. I have checked functionally everything works as intended in the browser.

Would like to check whether enabling the toggle by default ( which would require updating a whole bunch of tests) is preferred, or if it should instead be opt in via Helium configuration flag, thank you!

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark Mode Toggle

1 participant