Skip to content

Add light/dark theme toggle for standalone docs#588

Open
julioest wants to merge 4 commits intoboostorg:developfrom
julioest:feature/theme-toggle
Open

Add light/dark theme toggle for standalone docs#588
julioest wants to merge 4 commits intoboostorg:developfrom
julioest:feature/theme-toggle

Conversation

@julioest
Copy link
Collaborator

@julioest julioest commented Feb 2, 2026

Add a theme toggle button to the toolbar that allows users to switch between light and dark modes on standalone documentation sites.

  • Add 00-theme-toggle.js for toggle logic with localStorage persistence
  • Add theme.css with toggle button styling and dark syntax highlighting
  • Add FOUC prevention script in head-scripts.hbs
  • Add toggle button to toolbar.hbs (hidden when embedded in iframe)
  • Toggle adds/removes 'dark' class on to work with boostlook.css

fixes: #280

Add a theme toggle button to the toolbar that allows users to switch
between light and dark modes on standalone documentation sites.

- Add 00-theme-toggle.js for toggle logic with localStorage persistence
- Add theme.css with toggle button styling and dark syntax highlighting
- Add FOUC prevention script in head-scripts.hbs
- Add toggle button to toolbar.hbs (hidden when embedded in iframe)
- Toggle adds/removes 'dark' class on <html> to work with boostlook.css
@julioest julioest requested a review from rbbeeston February 2, 2026 22:33
@cppalliance-bot
Copy link

cppalliance-bot commented Feb 2, 2026

An automated preview of the documentation is available at https://588.site-docs.prtest2.cppalliance.org/index.html

If more commits are pushed to the pull request, the docs will rebuild at the same URL.

2026-02-03 21:10:59 UTC

@julioest julioest force-pushed the feature/theme-toggle branch from 8952cb3 to f4cc930 Compare February 2, 2026 23:14
@julioest
Copy link
Collaborator Author

julioest commented Feb 3, 2026

@rbbeeston How we feeling about the placement of the toggle?

- Create theme-toggle.hbs partial for reusability
- Add title-row wrapper in nav-menu.hbs to position theme toggle next to component title
- Add flexbox styles for .title-row in nav.css
- Remove theme toggle from toolbar.hbs
@julioest julioest force-pushed the feature/theme-toggle branch from e5a56c1 to eec5696 Compare February 3, 2026 21:02
@julioest
Copy link
Collaborator Author

julioest commented Feb 3, 2026

The toggle is now in the left sidebar, on both mobile and desktop

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 Theme for Antora UI

2 participants