kaxil opened a new pull request, #1270: URL: https://github.com/apache/airflow-site/pull/1270
This PR upgrades the Docsy theme from v0.2.0-pre (from 2019 !!) to v0.12.0 (latest) and implements Bootstrap 5 dark mode support for both the landing pages and Sphinx documentation. Used https://www.docsy.dev/docs/adding-content/lookandfeel/ and https://www.docsy.dev/docs/updating/ for Upgrading -- it wasn't straight-forward unfortunately but I think I have covered everything that I could find/identify. (including Confetti :D ) ### Key Changes * **Theme Upgrade**: Docsy v0.2.0-pre → v0.12.0 * **Bootstrap**: Upgraded from Bootstrap 4 to Bootstrap 5.3.3 * **Dark Mode**: Added theme toggle with light/dark/auto modes ### Visual Changes <img width="1714" height="831" alt="image" src="https://github.com/user-attachments/assets/cd32fb1f-27d5-420d-bc37-c9e02ec4b871"; /> <img width="1366" height="806" alt="image" src="https://github.com/user-attachments/assets/2b2556e3-7678-436d-b5bc-63a5f719e4b0"; /> <img width="1718" height="833" alt="image" src="https://github.com/user-attachments/assets/1fd91888-14ae-4046-820c-c00fb5a6ede7"; /> <img width="1716" height="737" alt="image" src="https://github.com/user-attachments/assets/f11624fb-2bf6-4ae2-af5f-e2e2b6361348"; /> <img width="1726" height="833" alt="image" src="https://github.com/user-attachments/assets/88c72100-2e95-4311-899d-094b2ae46b82"; /> <img width="1720" height="740" alt="image" src="https://github.com/user-attachments/assets/34715a1d-f2ea-444d-bdbc-08eb8f73894d"; /> <img width="1717" height="741" alt="image" src="https://github.com/user-attachments/assets/3e86b057-5944-49a1-b0f7-dd0e9ad77b3a"; /> <img width="1306" height="831" alt="image" src="https://github.com/user-attachments/assets/226d1b4d-1d41-4fbf-8f22-562ebf6a3f03"; /> <img width="1667" height="731" alt="image" src="https://github.com/user-attachments/assets/8da2cbaf-bb87-49c8-b453-02b165aed26e"; /> ### Implementation Details #### Landing Pages (Hugo/Docsy) - Enable `showLightDarkModeMenu = true` in config.toml - Add theme toggle component to navbar (light/dark/auto modes) - Store user preference in localStorage - Use Bootstrap 5 CSS variables for all UI elements #### Sphinx Documentation - Add Bootstrap 5 theme toggle to header - Style all elements (sidebar, tables, admonitions, forms) for dark mode - Use Pygments-generated GitHub Dark theme for syntax highlighting #### Technical Requirements - Added `$td-sidebar-tree-root-color` variable (required by Docsy v0.2.0+) - Added `$font-awesome-font-name` variable (required by Docsy v0.6.0+) - Added `.-bg-orange` utility class (required by Docsy v0.6.0+) - Created `pygments/_dark.scss` (generated via: `pygmentize -S github-dark`) - Use `hooks/body-end.html` for webpack scripts (proper Docsy pattern) ### Testing - [x] Verified dark mode toggle works on landing pages - [x] Confirmed confetti animation adapts to theme changes - [x] Tested all admonition types in light and dark modes - [x] Verified code syntax highlighting in Sphinx documentation - [x] Checked sidebar contrast in dark mode - [x] Tested theme persistence across page navigation - [x] Verified font consistency (Open Sans) across Hugo and Sphinx pages -- 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]
