Skip to content

Conversation

@siddhitripathi25
Copy link

@siddhitripathi25 siddhitripathi25 commented Nov 25, 2025

-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:
imageDark Mode:
image

Siddhi Tripathi added 2 commits November 22, 2025 22:18
- Download all 32 GitHub avatars to static/images/community/avatars/
- Update community-members.md template to use /static/images/community/avatars/ paths
- Fixes Content Security Policy violations that blocked GitHub hotlinks
- Images now load from same domain instead of external GitHub URLs
- Implement CSS custom properties for theming
- Add theme toggle button in navigation
- Add persistent theme preference storage
- Support system preference detection
- Ensure responsive design and accessibility
Copy link
Contributor

@cederom cederom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @siddhitripathi25 :-)

  • There are too many changes bundled into this PR.
  • PR must only contain single functional change as described by the PR title.
  • There are Gemfile.lock changes that I provided in a separate PR already, that impact build, and cannot be bundled here, this is not theme related.
  • There are avatars changes in this PR, these were already provided before, cannot be part of this PR.
  • Out Contributing Guidelines provides a lot of hints please take a look at https://github.com/apache/nuttx/blob/master/CONTRIBUTING.md.

@cederom
Copy link
Contributor

cederom commented Nov 26, 2025

@xiaoxiang781216 please review in detail and see my remarks thanks :-)

@cederom cederom marked this pull request as draft November 26, 2025 03:36
@siddhitripathi25
Copy link
Author

@cederom Thank you for the detailed feedback! I understand the issues with my PR. I'll:
1.Close this current PR
2.Read the CONTRIBUTING guidelines thoroughly
3.Submit separate, focused PRs for each functional change
4.Ensure I don't include changes that are already submitted elsewhere

I appreciate you taking the time to guide me on the proper contribution process.

@cederom
Copy link
Contributor

cederom commented Nov 26, 2025

Please update this PR when ready. You can keep it in a draft state until ready for review.

@siddhitripathi25
Copy link
Author

@cederom Okay sir

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants