siddhitripathi25 opened a new pull request, #156:
URL: https://github.com/apache/nuttx-website/pull/156
## Summary
Adds CSS custom properties (variables) as the foundation for implementing
dark mode theme support on the NuttX website. This is the first step in a
3-part implementation of dark mode functionality.
## Changes Made
- Created `_sass/custom/_themes.scss` with CSS custom properties for both
light and dark themes
- Created `_sass/custom/_variables.scss` for SCSS theme variables
- Created `_sass/custom/_mixins.scss` for theme-related mixins
- Updated `css/main.scss` to import the new theme files
- Defined comprehensive color palette for consistent theming
## Theme Variables Include:
**Light Theme (default):**
- `--color-background`: #ffffff
- `--color-text`: #333333
- `--color-primary`: #0066cc
- `--color-secondary`: #6c757d
- `--color-border`: #dee2e6
- `--color-card`: #f8f9fa
**Dark Theme:**
- `--color-background`: #1a1a1a
- `--color-text`: #e6e6e6
- `--color-primary`: #4dabf7
- `--color-secondary`: #adb5bd
- `--color-border`: #495057
- `--color-card`: #2d2d2d
## Impact
- **No visual changes** to the current website (variables are defined but
not yet applied)
- **Backward compatible** - existing styles remain unchanged
- **Foundation for dark mode** - enables future PRs to implement theme
switching
- **Improves maintainability** - centralizes color definitions
## Testing
- Verified CSS variables compile without errors using `bundle exec jekyll
build`
- Confirmed no visual regression on existing pages
- Tested SCSS compilation in development environment
- Variables are accessible but not yet utilized (will be used in subsequent
PRs)
## Notes
- This is **step 1 of 3** for dark mode implementation
- Subsequent PRs will:
- Add JavaScript for theme switching (PR 2)
- Apply variables across site components (PR 3)
- Follows W3C CSS Custom Properties specification
- Uses CSS `:root` and `[data-theme="dark"]` selectors for theme definition
## Related
Part of dark mode implementation addressing user experience and
accessibility improvements.
--
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]
