Toggle Theme Functions

[cadbox1]

Hello! I've been using vanilla-extract on a side project recently and I've been enjoying it but I found it a bit tedious to setup a toggle theme functionality, similar to the one on the site.

I setup some functions here, usage here and live demo here.

Would we be interested in documenting this or making the functions more robust and adding them to the library? Should this be a separate library?

Keen for feedback!

[badsyntax]

i agree it would be useful to have this documented. fyi i'm seeing a white flash. it's only evident on first page load when scripts haven't cached yet. you can replicate by having dark mode enabled, then in chrome, in the network tab, select "Disable cache" then refresh. you'll see a white flash before it switches to dark mode. so this implementation of dark mode is not great imo. to fix the flash i believe you need to adopt a technique where the dark root class is set as soon as possible using something like (taken from https://vanilla-extract.style/):

<script>
((d)=>{try{var p=localStorage.getItem('vanilla-theme-pref');if(p==d||(p!='light'&&matchMedia('(prefers-color-scheme:dark)').matches)) document.documentElement.classList.add(d)}catch(e){}})('dark')
</script>

[cadbox1]

hey @badsyntax, nice spot, thanks!

I've just updated the [functions] and usage in _app and _document to use an inline function like you suggested and I think it solves the flash now. Live demo

Can you confirm on your end?

[badsyntax]

@cadbox1 nice, LGTM! (confirmed, cannot see white flash anymore)