Implement Dark and Light Theme Switch

Not sure if this idea has been mentioned before for the ASF site.

See in desktop mode the "web dot dev" site has implemented a theme switch with both light and dark

The theme switch button is located in the header top right

https://web.dev/

https://web.dev/patterns/theming/theme-switch

Also note that some mobile phones have a default dark mode already set. You can go into your mobile phone setting and change this default dark setting so that theme switchers work on your mobile.

So GitHub also has both a light and dark mode.

"Offering both light and dark modes with a theme switch on your website provides greater user accessibility by accommodating diverse visual needs, enhances user comfort by reducing eye strain in various lighting conditions, conserves battery life on compatible devices, caters to different reading comprehension preferences, and allows for creative stylistic choices to align with a site's brand or purpose"

And finally congratulations on the new amazing ASF website.

Looks stunning 👨‍🎨

Start by reviewing the ASF site's header and the linked web.dev theme-switch example. Define the light and dark appearance, the header control, and mobile behavior before locating the relevant site entry points. Done means visitors can switch between both themes on desktop and mobile.

Written by the indexing model from the issue text.