flat-fuchsia

Darkmode/Themes with Start?

I'm using shadcn ui in my start project, and my themeprovider causes suspense boundary errors. When looking at the shadcn docs, there are specific instructions for NextJs and Remix, so seems like there are some additional steps needed for this to work with SSR Frameworks, has anyone done this yet?

37 Replies

national-gold•10mo ago

yes @Aaron did this https://github.com/nekochan0122/tanstack-boilerplate/blob/main/src/components/theme.tsx

GitHub

tanstack-boilerplate/src/components/theme.tsx at main · nekochan012...

A fully type-safe boilerplate with a focus on UX and DX, complete with multiple examples. - nekochan0122/tanstack-boilerplate

flat-fuchsiaOP•10mo ago

perfect, thank you!

solid-orange•10mo ago

https://github.com/notkamui/time-recorder

GitHub

GitHub - notKamui/time-recorder

Contribute to notKamui/time-recorder development by creating an account on GitHub.

solid-orange•10mo ago

you can also check this out. Contrary to Nekochan, i store the theme in cookies to avoid flashes, and SSR the theme into the provider and the html tag’s class

flat-fuchsiaOP•10mo ago

oh thats really nice actually i do have the flash going on right now, this may be a better approach

metropolitan-bronze•10mo ago

you do have flash with my theme provider?

metropolitan-bronze•10mo ago

flat-fuchsiaOP•10mo ago

no, I did not finish implementing still working on it i really like the pattern of prefixing all server functions with $ here

solid-orange•10mo ago

i’m curious, what prevents the flash in your implementation ?

metropolitan-bronze•10mo ago

metropolitan-bronze•10mo ago

the script

solid-orange•10mo ago

oh, thank you, that makes sense

metropolitan-bronze•10mo ago

the reason I don't use cookie here, is because you can't get correct prefer theme on server side

solid-orange•10mo ago

yeah that was a flaw i was conscious about in my implementation and didn’t know how to solve (which wasn’t a big problem for me) but your solution is nice thanks, it stemmed from the fact that when using useServerFn i literally didn’t know how to name the returned function, so now i have no issues with it const doFoo = useServerFn($doFoo) + it has the added benefit of being clear that it’s a « magic » rpc function

solid-orange•10mo ago

You can just use https://github.com/pacocoursey/next-themes just like shadcn suggests for shad. Despite the name it supports any react framework now

GitHub

GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 li...

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - pacocoursey/next-themes

wise-white•8mo ago

I am getting content layout shift for the content in <outlet/> when I use a ThemeProvider. This is happening for both next-themes and also @Aaron 's implementation. From the video, you also see that the header and footer render first with no issue even though they are also wrapped by the provider. 🤷‍♂️ In the video, I added network throttling so that it is clear what is happening. Demo: https://nekochan-theme-impl.tss-blog-starter.pages.dev/ https://next-theme.tss-blog-starter.pages.dev/ no theme provider https://tss-blog-starter.pages.dev/ Code: https://github.com/ally-ahmed/tss-blog-starter/tree/next-theme https://github.com/ally-ahmed/tss-blog-starter/tree/nekochan-theme-impl I am not sure what I'm doing wrong. Has anyone experienced the same?

deep-jade•8mo ago

@Ahmed Ali ( ..)(..)(._. ) are you using react 19 ?

wise-white•8mo ago

Yup I'm on 19.

deep-jade•8mo ago

I think this is a bug with react 19 I have opened this issue last week about it: https://discord.com/channels/719702312431386674/1328675425270108162

wise-white•8mo ago

The JSON.parse error was fixed with new TanStack Start updates and I'm getting no errors in the console. Also, I think with the new updates, TanStack Start now better supports React-19 . https://x.com/schanuelmiller/status/1882976125657493982 . But let me check if the behaviour is still there with React-18.

Manuel Schiller (@schanuelmiller) on X

react 19 just became the default for @tan_stack router and start!

wise-white•8mo ago

With react-18 it works well in dev but once deployed, I get Minified React error and the flicker is still there. I will go back to react-19 and maybe narrow down what is causing the problem before creating an issue. I am going to start by first seeing if it is just any context providers or is it specifically something to do with the implementations of the ThemeProvider.

fascinating-indigo•8mo ago

I was also looking for a solution. Don't ask me how I did, but it looks that is working. https://stackblitz.com/edit/stackblitz-starters-zqsm4dis

Jaka Daneu

StackBlitz

tanstack-shadcn-theme (forked) - StackBlitz

Starter project for Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine

national-gold•8mo ago

i played with this, a simple fix is this

diff --git a/app/components/theme-provider.tsx b/app/components/theme-provider.tsx
index 760417a..eaf103d 100644
--- a/app/components/theme-provider.tsx
+++ b/app/components/theme-provider.tsx
@@ -25,7 +25,7 @@ const [ThemeContextProvider, useTheme] = createContextFactory<ThemeContext>({
 });
 
 function ThemeProvider({ children }: PropsWithChildren) {
-  const [theme, _setTheme] = useState<Theme>("system");
+  const [theme, _setTheme] = useState<Theme>(getLocalTheme());

diff --git a/app/components/theme-provider.tsx b/app/components/theme-provider.tsx
index 760417a..eaf103d 100644
--- a/app/components/theme-provider.tsx
+++ b/app/components/theme-provider.tsx
@@ -25,7 +25,7 @@ const [ThemeContextProvider, useTheme] = createContextFactory<ThemeContext>({
 });
 
 function ThemeProvider({ children }: PropsWithChildren) {
-  const [theme, _setTheme] = useState<Theme>("system");
+  const [theme, _setTheme] = useState<Theme>(getLocalTheme());

previously, ThemeProvider would render twice on the client. once with theme=system and a second time with e.g. theme=dark now it will only render once

deep-jade•8mo ago

@Manuel Schiller thank you so much that actually worked for me as well 🙌

wise-white•8mo ago

I tried the suggested quick fix. It was working well but getting hydration errors. So parked it. Just saw @Manuel Schiller temp fix to ensure the script runs before hydration https://discord.com/channels/719702312431386674/1333850567533133824/1333874445563072552 I added it and things are working very well right now. So you need to move the script from the theme provider to ssr.tsx . https://github.com/ally-ahmed/tss-blog-starter/blob/main/app/ssr.tsx demo: https://tss-blog-starter.pages.dev/ Thanks @Manuel Schiller

optimistic-gold•8mo ago

Thanks to this because I will be using shadcn next week in a new project.

harsh-harlequin•7mo ago

I'm using this but on hydration for some reason it removes the dataset.theme from the html

harsh-harlequin•7mo ago

modern-teal•7mo ago

This looks at bit like this: https://github.com/TanStack/router/issues/3306

GitHub

Hydration mismatch errors in linked stylesheets. · Issue #3306 · Ta...

Which project does this relate to? Start Describe the bug After making a change that introduces an exception in the css loading, once you've corrected the error, you'll get a persistent hyd...

harsh-harlequin•7mo ago

@Manuel Schiller can you please check this out

national-gold•7mo ago

can you please post the generated HTML of the SSR request?

vicious-gold•7mo ago

Same thing happening to me, using only a route with the count button and added shadcn theme provider using the next-themes approach. Here is the HTML of the SSR Request,

message.txt

national-gold•7mo ago

looks like your script is not injected before hydration see this

vicious-gold•7mo ago

changed my theme provider to the same code @Aaron uses in his boilerplate and added the injection. same thing happening but this time my theme is not defaulting to dark anymore and when i change it directly in the localStorage it does not work

vicious-gold•7mo ago

Here is the HTML from the SSR.

message.txt

national-gold•7mo ago

in v.1.105 the script handling is now robust this should fix all of these issues

national-gold•7mo ago

@Ahmed Ali ( ..)(..)(._. ) I created a PR to remove that hack as it is not necessary anymore: https://github.com/ally-ahmed/tss-blog-starter/pull/1

GitHub

remove theme hack by schiller-manuel · Pull Request #1 · ally-ahmed...

Gaming

Programming

Darkmode/Themes with Start?

Did you find this page helpful?