website: apply theme variables and add toggle UI

[siddhitripathi25]

@cederom 3rd part of pr of issue #148

Summary

Applies theme variables across the website and completes the dark mode implementation. This is the final step of the 3-part dark mode implementation.

Changes Made

• Updated _sass/_base.scss to use CSS custom properties
• Updated _sass/_layout.scss to use theme variables
• Modified index.md homepage for theme consistency

What This PR Does

1. Applies Theme Variables: Uses var(--color-*) throughout site CSS
2. Completes Dark Mode: Enables full theme switching functionality
3. Maintains Accessibility: Ensures proper contrast in both themes
4. Adds Smooth Transitions: CSS transitions for theme changes

Impact

• Complete Dark Mode: Users can switch between light/dark themes
• Improved UX: Better readability in low-light environments
• Accessibility: WCAG-compliant contrast ratios maintained
• Modern Standards: Uses CSS Custom Properties (CSS Variables)

Testing

• Tested theme switching between light/dark modes
• Verified no visual regressions in existing pages
• Checked accessibility contrast ratios
• Confirmed localStorage persistence works
• Tested system preference detection (prefers-color-scheme)

Dependencies

Depends on:

1. PR #XXX - CSS variables foundation
2. PR #YYY - Theme toggle components

Notes

• This completes the 3-part dark mode implementation
• All theme variables from PR 1 are now utilized
• Toggle button from PR 2 is fully functional
• Follows progressive enhancement principles

[cederom]

Thanks @siddhitripathi25 this change is already provided in PR #156 why creating in separate PR?

[cederom]

Please provide functionality in a single PR as requested before.