Skip to content

Conversation

@siddhitripathi25
Copy link

@cederom 2nd part of solving issue #148

Summary

Adds HTML components for theme switching functionality. This is the second step in implementing dark mode support for the NuttX website, providing the user interface elements needed for theme toggling.

Changes Made

  • Created _includes/theme-toggle.html with accessible theme toggle button
  • Button includes both light and dark mode icons (sun/moon)
  • Implemented proper ARIA labels for accessibility
  • Structured for easy JavaScript integration

Component Details

Theme Toggle Button Features:

  • Dual Icons: Sun (☀️) for light mode, Moon (🌙) for dark mode
  • ARIA Support: aria-label="Toggle dark mode" for screen readers
  • CSS Ready: Includes theme-toggle class for styling
  • Semantic Structure: Clear HTML for easy JavaScript targeting

Impact

  • Visual Addition: Theme toggle button appears in navigation (positioning handled by CSS)
  • Non-functional: Button is visible but not yet interactive (requires JavaScript)
  • Accessibility First: Built with ARIA attributes from the start
  • Progressive Enhancement: Degrades gracefully without JavaScript

Testing

  • Verified HTML validity
  • Confirmed button renders in correct location
  • Checked accessibility attributes with screen reader testing tools
  • No visual regressions on existing pages
  • Works with CSS from PR #XXX (CSS variables)

Dependencies

Depends on: PR #XXX (website: add CSS custom properties for theme support)

Notes

  • This is step 2 of 3 in the dark mode implementation
  • JavaScript functionality will be implemented in coordination with the final CSS application
  • Button visibility may be adjusted via CSS in the final implementation
  • Follows WAI-ARIA best practices for interactive controls

Next Steps

The final PR will:

  1. Apply theme variables across all site components
  2. Add JavaScript for theme switching logic
  3. Implement localStorage for preference persistence
  4. Add system preference detection (prefers-color-scheme)

Related

Part of dark mode implementation to improve user experience, accessibility, and modern web standards compliance.

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.

1 participant