grommet / grommet-site

Site for Grommet v2
Apache License 2.0
32 stars 64 forks source link

Add control to switch between dark, light, or system default theme #436

Open jcfilben opened 1 year ago

jcfilben commented 1 year ago

The site now displays in light/dark based on the users browsers preferences. We should have a way for them to toggle the site between light/dark or revert back to the browser preference.

ho823 commented 11 months ago

Hi ! I would like use this toggle button : https://design-system.hpe.design/components/button#toggle-buttons for this issue. But I'm not sure to understand, how to use it. In my mind toggle button seems like this : https://www.google.com/search?sca_esv=570620249&rlz=1C1CHBF_frFR1073FR1073&q=toggle+button&tbm=isch&source=lnms&sa=X&sqi=2&ved=2ahUKEwiM3oqzj9yBAxWjSfEDHUeOA_cQ0pQJegQIChAB&biw=1920&bih=931&dpr=1

So if someone can help me, it would be nice :)

jcfilben commented 11 months ago

Hi @ho823 great to hear you are interested in working on this! I think the tricky part of this issue is that we need to support 3 states (light, dark, or system default). So a toggle button might not be the best choice since it only supports 2 states. I realize the language used in the issue title and descriptions may be a bit confusing since it uses the word 'toggle'. Hopefully this clarifies the issue though and I will go back and edit the issue title and description to make this more clear.