How do you create a button to toggle day and night mode, like the Shopify.dev sight has? I’m in love with it! My guess is the dev help site is built on hydrogen. Anyway to code this with online 2.0 (venue)?
When implementing dark/light mode features keep in mind above all that web features like prefers-color-scheme are USER centric and meant to be respected like an accessibility mode, as such websites cannot alter them only read them.
And that if you’ve never done some thing like this there is a non-zero change you will impact accessibility such as text contrast and by extension conversions; so test thoroughly and use an accessibility checker.
Generally a website needs to be coded with this feature in mind in advance.
Slapping it in after the fact can lead to all types of headaches.
It can help if a theme has it’s color values well organized so that switching variables/values or doing color-math on them is a sane process.
The cheapest trick of course just have two themes setup with different color palettes and then either make the other stylesheets available over the CDN , or extra cheap and use the url parameter ?preview_theme_id= to switch between them with a page reload. The preview_theme_id method can have it’s own headaches like making sure to hide the footer-admin bar shopify injects for unpublished themes, and the duplicate work if you don’t have a theme code process in place to keep other theme changes in sync between the themes.
Adam argyle has a great video on it:
Thinking on ways to solve a DARK/LIGHT THEME SWITCH
