siddhitripathi25 opened a new pull request, #157: URL: https://github.com/apache/nuttx-website/pull/157
@cederom 2nd part of solving issue #148 ## Summary Adds HTML components for theme switching functionality. This is the second step in implementing dark mode support for the NuttX website, providing the user interface elements needed for theme toggling. ## Changes Made - Created `_includes/theme-toggle.html` with accessible theme toggle button - Button includes both light and dark mode icons (sun/moon) - Implemented proper ARIA labels for accessibility - Structured for easy JavaScript integration ## Component Details **Theme Toggle Button Features:** - **Dual Icons:** Sun (☀️) for light mode, Moon (🌙) for dark mode - **ARIA Support:** `aria-label="Toggle dark mode"` for screen readers - **CSS Ready:** Includes `theme-toggle` class for styling - **Semantic Structure:** Clear HTML for easy JavaScript targeting ## Impact - **Visual Addition:** Theme toggle button appears in navigation (positioning handled by CSS) - **Non-functional:** Button is visible but not yet interactive (requires JavaScript) - **Accessibility First:** Built with ARIA attributes from the start - **Progressive Enhancement:** Degrades gracefully without JavaScript ## Testing - Verified HTML validity - Confirmed button renders in correct location - Checked accessibility attributes with screen reader testing tools - No visual regressions on existing pages - Works with CSS from PR #XXX (CSS variables) ## Dependencies **Depends on:** PR #XXX (`website: add CSS custom properties for theme support`) ## Notes - This is **step 2 of 3** in the dark mode implementation - JavaScript functionality will be implemented in coordination with the final CSS application - Button visibility may be adjusted via CSS in the final implementation - Follows WAI-ARIA best practices for interactive controls ## Next Steps The final PR will: 1. Apply theme variables across all site components 2. Add JavaScript for theme switching logic 3. Implement localStorage for preference persistence 4. Add system preference detection (prefers-color-scheme) ## Related Part of dark mode implementation to improve user experience, accessibility, and modern web standards compliance. -- 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]
