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.

[siddhitripathi25]

@cederom Sir please review the prs

[cederom]

Sorry for the delay @siddhitripathi25 I was abroad, back again, looking into it :-)

[cederom]

Thank you @siddhitripathi25, I cannot see the theme switch button on my local build, is it there? Do I miss anything?

% git branch
* (HEAD detached at siddhitripathi25/dark-mode-step1-css)

% bundle install
Calling `DidYouMean::SPELL_CHECKERS.merge!(error_name => spell_checker)' has been deprecated. Please call `DidYouMean.correct_error(error_name, spell_checker)' instead.
Using rake 13.3.1
Using public_suffix 6.0.2
Using addressable 2.8.7
Using base64 0.3.0
Using bigdecimal 3.3.1
Using bundler 2.2.22
Using colorator 1.1.0
Using concurrent-ruby 1.3.5
Using csv 3.3.5
Using eventmachine 1.2.7
Using http_parser.rb 0.8.0
Using em-websocket 0.5.3
Using ffi 1.17.2
Using forwardable-extended 2.6.0
Using google-protobuf 4.33.1
Using i18n 1.14.7
Using sass-embedded 1.94.2
Using jekyll-sass-converter 3.1.0
Using rb-fsevent 0.11.2
Using rb-inotify 0.11.1
Using listen 3.9.0
Using jekyll-watch 2.2.1
Using json 2.16.0
Using rexml 3.4.4
Using kramdown 2.5.1
Using kramdown-parser-gfm 1.1.0
Using liquid 4.0.4
Using mercenary 0.4.0
Using pathutil 0.16.2
Using rouge 4.6.1
Using safe_yaml 1.0.5
Using unicode-display_width 2.6.0
Using terminal-table 3.0.2
Using webrick 1.9.1
Using jekyll 4.4.1
Using jekyll-feed 0.17.0
Bundle complete! 4 Gemfile dependencies, 36 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

% bundle exec jekyll serve
(..)
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.

Why creating PR #157 and #158 when they contain the changes already introduced in this PR?

You can bundle several commits into single PR so its a functional bundle.