O2sa opened a new pull request, #908:
URL: https://github.com/apache/kafka-site/pull/908
### Summary of Changes
This PR introduces comprehensive **Dark Mode / Light Mode** support across
the Apache Kafka website using Bootstrap 5.3+ color modes and Docsy theming
standards.
---
### Key Features
1. **Theme Modes Supported**:
- ☀️ **Light Mode**: Standard default bright theme.
- 🌙 **Dark Mode**: High-contrast, accessibility-friendly dark slate theme.
- 🌓 **Auto Mode**: Automatically synchronizes with operating system and
browser `prefers-color-scheme` settings.
2. **Zero Flash of Unstyled Content (Anti-FOUC)**:
- Early bootstrap script injected into `<head>`
(`layouts/partials/hooks/head-end.html`) evaluates the saved preference before
DOM rendering begins.
3. **User Controls**:
- **Desktop Navbar**: Modern dropdown next to search bar displaying
active mode icon and selection checkmarks.
- **Mobile View**: Dedicated theme switcher button in the top navigation
header for instant mobile access.
4. **Comprehensive Styling**:
- Full dark mode color schemes (`[data-bs-theme="dark"]`) covering:
- Top navbar, mobile collapse drawer, and brand logo contrast inversion.
- Search modal, inputs, and Lunr search results.
- Documentation & Blog layouts: sidebar navigation, active Table of
Contents (TOC) scrollspy, breadcrumbs, version banners, and pagination buttons
(`.pager-btn`).
- Content elements: code blocks (`<pre>`, `<code>`), tables,
blockquotes, and cards.
- Footer and social links.
---
### Files Modified
- `assets/js/theme-toggle.js` (New): Theme state manager, `localStorage`
persistence, and DOM synchronization.
- `layouts/partials/navbar.html`: Theme toggle dropdown UI in navbar and
mobile header.
- `layouts/partials/hooks/head-end.html`: Anti-FOUC initialization script in
`<head>`.
- `layouts/partials/hooks/body-end.html`: Loads `theme-toggle.js` in asset
pipeline.
- `assets/scss/_variables_project_after_bs.scss`: SCSS rules for theme
controls and dark mode components.
- `layouts/_default/_markup/render-heading.html`: Clean heading self-link
template.
---
### Verification & Testing
- [x] Verified Light, Dark, and Auto mode switching across Homepage,
Documentation (`/documentation`), and Blog (`/blog`).
- [x] Verified persistence in `localStorage` across page transitions and
hard reloads.
- [x] Verified zero flash of light theme when loading pages in dark mode.
- [x] Verified responsiveness on desktop, tablet, and mobile screen sizes.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
