rare-sapphire

Suggestions for a dark/light mode theme selector

Is there something like remix-themes / next-themes for tanstack start for using the client system theme without flashing? I'm using shadcn and hoping for class based theming (adding dark class to root element)

14 Replies

fascinating-indigo•14mo ago

@icanflyit Ever solve this? Just started a project to test out tanstack-start and ran into this with the default Shadcn themeprovider & localstorage

exotic-emerald•14mo ago

we don't have this (yet).

rare-sapphireOP•14mo ago

i have a solution adapted from next-themes (which for the most part is not next specific), ping my tonight if I don’t get back to you by then

fascinating-indigo•14mo ago

Thats sick

exotic-emerald•14mo ago

I'd love to have this in start-core so we should definitely upstream this

rare-sapphireOP•14mo ago

I'm not sure if that would make sense vs just having a note in the docs about theming - there a very little adaptions that need to be done from next-themes, so I'm sure something could be upstreamed there that would allow it to "just work" with start (although it seems the maintainer may not be active) Sadly I don't remember specifically what changes I made to next-themes to get it to work, but I'll share the code I have and maybe later I can take another look at what changes would be needed in next-themes Here's what I'm using (code is a mess right now, at some point i'd like to fully rewrite it and potentially put it on npm) https://gist.github.com/elliotnash/e03e1f3da6705bac79f9434d9d7cb45c

Gist

Tanstack Start theme provider

Tanstack Start theme provider. GitHub Gist: instantly share code, notes, and snippets.

conscious-sapphire•9mo ago

i tried to use your theme provider and it works well but for some reason it breaks some streaming/react-query functionality and preloading the query seems to not work anymore using the theme provider it seems like changing the theme break the hydration process

optimistic-gold•9mo ago

im using next-theme and dont have flashing in my tanstack start app @Manuel Schiller i use this script to get rid of flashing with next-theme

 scripts: [{
        children: `(function() {
            const storedTheme = localStorage.getItem('vite-ui-theme');
            if (storedTheme === 'dark' || (!storedTheme && 'dark' === 'dark')) { //handle first time load, if there is nothing in localstorage.
                document.documentElement.classList.add('dark');
            } else if (storedTheme === 'light'){
                document.documentElement.classList.add('light');
            } else if (storedTheme === 'system'){
                 const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
                 document.documentElement.classList.add(systemTheme)
            }
        })()`,
      },]

 scripts: [{
        children: `(function() {
            const storedTheme = localStorage.getItem('vite-ui-theme');
            if (storedTheme === 'dark' || (!storedTheme && 'dark' === 'dark')) { //handle first time load, if there is nothing in localstorage.
                document.documentElement.classList.add('dark');
            } else if (storedTheme === 'light'){
                document.documentElement.classList.add('light');
            } else if (storedTheme === 'system'){
                 const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
                 document.documentElement.classList.add(systemTheme)
            }
        })()`,
      },]

So far this works with everything though i haven't added query or forms in yet to try.

wise-white•9mo ago

There is also a prefers-color-scheme CSS media selector if you want to keep it simple

conscious-sapphire•9mo ago

after spending about a day dealing with it i got it to work well with tanstack query streaming removing some useEffect that was breaking the streaming for some unknown reason

mute-gold•9mo ago

could you please share your code ? I am having the same problem

optimistic-gold•9mo ago

did you try my script with query curious if that works since it loads the theme in first, from what i've looked at it has to do with when its reading the local storage

conscious-sapphire•9mo ago

Sorry I saw your message just now, I’ll send you the link to a gist as soon as I can

conscious-sapphire•9mo ago

here is the modified version: https://gist.github.com/WellDone2094/16107a2a9476b28a5b394bee3fa1b8a3

Gist

Tan Stack Start Theme provider

Tan Stack Start Theme provider. GitHub Gist: instantly share code, notes, and snippets.

Gaming

Programming

Suggestions for a dark/light mode theme selector

Did you find this page helpful?