siddhitripathi25 opened a new pull request, #152: URL: https://github.com/apache/nuttx-website/pull/152
-Solved issue #148 -@cederom @acassis ## Description This PR adds comprehensive dark mode support to the NuttX website, improving user experience and accessibility. ## Changes Made - Added CSS custom properties (variables) for theming in `_sass/custom/_themes.scss` - Implemented theme toggle button in navigation header - Added JavaScript for theme switching and persistence - Updated existing CSS to use theme variables - Added system preference detection (`prefers-color-scheme`) - Ensured responsive design for mobile and desktop ## Features - Toggle between light and dark themes - Persistent theme preference using localStorage - Automatic system preference detection - Responsive design that works on all devices - Accessible with proper ARIA labels - Smooth transitions between themes ## Files Modified - `_sass/custom/_themes.scss` - CSS variables for theming - `_sass/_base.scss` - Updated to use theme variables - `_sass/_layout.scss` - Updated to use theme variables - `_includes/themes/apache/_navigation.html` - Added theme toggle button - `_includes/themes/apache/default.html` - Added theme JavaScript and CSS - `assets/js/theme.js` - Theme switching logic - `css/main.scss` - Import themes ## Testing - Tested on multiple pages - Verified responsive behavior - Checked theme persistence - Confirmed system preference detection ## Screenshots Light Mode: <img width="3024" height="1964" alt="image" src="https://github.com/user-attachments/assets/9f2342a3-9810-49a8-9b9a-d949b7bc964d"; /> Dark Mode: <img width="3024" height="1964" alt="image" src="https://github.com/user-attachments/assets/3a82aafe-2dcd-4ef3-bfb4-43ff6b6f33e4"; /> -- 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]
