Website: add CSS custom properties for theme support(CSS variables only)

[siddhitripathi25]

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.