kaxil opened a new pull request, #1333: URL: https://github.com/apache/airflow-site/pull/1333
# Improve Dark Mode UI/UX Contrast and Design This PR improves the dark mode experience across several pages of the Apache Airflow website by fixing low contrast issues, unreadable code blocks, and inconsistent card styling. ## Changes ### 1. Homepage - **Principles & Features Sections**: Updated header and text colors to use Bootstrap's `--bs-emphasis-color` and `--bs-body-color`, significantly improving readability against the dark background. ### 2. Blog - **List Page**: Fixed the "Blog" title visibility. - **Blog Posts**: Fixed code blocks having a white background in dark mode. Integrated `github-dark` Pygments theme for proper syntax highlighting. - **Tables**: Improved table header background and row alternating colors for better structure. ### 3. Community & Meetups - **Headers**: Fixed dark-on-dark headers. - **Cards**: Added a subtle background and border to cards (`.card`, `.box-event`) to provide visual separation without-harsh-lines. - **Links & Buttons**: Adjusted hollow button backgrounds and hover states for dark mode. ## Technical Details - Leveraged Bootstrap 5.3+ native color mode variables (`--bs-*`) for better integration with the theme toggle. - Cleaned up SCSS specificity to satisfy linting rules. - Fixed Pygments import placement to satisfy CSS linting. ## Visual Verification (Local) I have verified these changes locally. Screenshots are available in the `screenshots/` folder of this branch: - `homepage_principles_dark_after.png` - `homepage_features_dark_after.png` - `blog_list_dark_after_final.png` - `blog_post_code_blocks_dark_after_final_verification.png` - `community_dark_after_final.png` - `meetups_dark_after_final.png` -- 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]
