Add dark mode support to documentation website #277
Conversation
Apache.Shiro.mp4 |
There was a problem hiding this comment.
Pull request overview
This PR adds optional dark mode support to the Apache Shiro documentation website and introduces a new troubleshooting FAQ page. The dark mode implementation is lightweight and follows modern web practices with CSS variables, localStorage persistence, and smooth transitions.
Changes:
- Added theme toggle functionality with CSS variables for theming
- Created comprehensive troubleshooting & FAQ documentation page
- Updated navigation menus to include troubleshooting link
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/site/assets/js/theme.js | Implements theme toggle logic with localStorage persistence and icon updates |
| src/site/assets/css/base.css | Defines CSS variables for light/dark themes and comprehensive dark mode overrides for Bootstrap and Asciidoctor components |
| src/site/templates/menu.ftl | Adds theme toggle button to navigation and troubleshooting link to Community dropdown |
| src/site/templates/header.ftl | Loads theme.js early in head to prevent theme flash on page load |
| src/site/content/troubleshooting.adoc | New comprehensive FAQ page covering common Shiro issues with practical solutions |
| src/site/content/support.adoc | Adds link to new troubleshooting page in support resources list |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
Hi, Ganesh! I deployed the staging website here: https://shiro.staged.apache.org
However, in dark mode, much text (announcements / blogs) for example is unreadable. Can you please take a look? |
|
hey @lprimak its working.... Apache.mp4 |
|
Yes I realized this when cleared the cache. But a lot of text is not readable in dark mode as it's lacking contrast. Can you please take a look at that one? |
|
Hi @lprimak, I've fixed the contrast issues for announcements/blogs text in dark mode. The following elements now have proper contrast: News cards on home page |
|
Looks much better, but still has one issue that I can see... Code samples still have bad contrast. Can you take a look? |
yahh sure.... |
- Add Highlight.js syntax token colors for dark mode - Style keywords (purple), strings (green), comments (gray), numbers (orange) - Add class names (yellow), attributes (blue), tags (cyan) styling - Fix Asciidoctor listing blocks for dark mode Addresses review feedback about code samples having bad contrast.
|
Hi @lprimak, I've pushed a fix for the code sample contrast issue. Added complete Highlight.js syntax highlighting colors for dark mode - keywords, strings, comments, numbers, class names, and XML tags all now have proper contrast. Please check the migration guide page again. Thanks! |
2 participants
This PR adds optional dark mode support to the Apache Shiro documentation site.
Changes include:
The implementation is lightweight, does not introduce new dependencies,
and follows existing site structure.
Tested locally using Maven site generation.
Closes #266