🎨 TanStack Start SSR-Friendly Theme Provider

A complete theme management system for React applications with SSR support! ✨

🎭 The Provider: ThemeProvider.tsx

Key Features:

🔧 Manages theme state ('dark' | 'light' | 'system')

🗄️ Handles localStorage persistence

👂 Listens to system preference changes

⚡ Updates DOM classes dynamically

tsx

1import { createContext, use, useEffect, useMemo, useState } from 'react'
2import { FunctionOnce } from './lib/function-once'
3
4export type ResolvedTheme = 'dark' | 'light'
5export type Theme = ResolvedTheme | 'system'
6
7interface ThemeProviderProps {
8  children: React.ReactNode
9  defaultTheme?: Theme
10  storageKey?: string
11}
12
13interface ThemeProviderState {
14  theme: Theme
15  resolvedTheme: ResolvedTheme
16  setTheme: (theme: Theme) => void
17}
18
19const initialState: ThemeProviderState = {
20  theme: 'system',
21  resolvedTheme: 'light',
22  setTheme: () => null,
23}
24
25const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
26
27const isBrowser = typeof window !== 'undefined'
28
29export function ThemeProvider({
30  children,
31  defaultTheme = 'system',
32  storageKey = 'conar.theme',
33}: ThemeProviderProps) {
34  const [theme, setTheme] = useState<Theme>(
35    () => (isBrowser ? (localStorage.getItem(storageKey) as Theme) : defaultTheme) || defaultTheme,
36  )
37  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('light')
38
39  useEffect(() => {
40    const root = window.document.documentElement
41    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
42
43    function updateTheme() {
44      root.classList.remove('light', 'dark')
45
46      if (theme === 'system') {
47        const systemTheme = mediaQuery.matches ? 'dark' : 'light'
48        setResolvedTheme(systemTheme)
49        root.classList.add(systemTheme)
50        return
51      }
52
53      setResolvedTheme(theme as ResolvedTheme)
54      root.classList.add(theme)
55    }
56
57    mediaQuery.addEventListener('change', updateTheme)
58    updateTheme()
59
60    return () => mediaQuery.removeEventListener('change', updateTheme)
61  }, [theme])
62
63  const value = useMemo(() => ({
64    theme,
65    resolvedTheme,
66    setTheme: (theme: Theme) => {
67      localStorage.setItem(storageKey, theme)
68      setTheme(theme)
69    },
70  }), [theme, resolvedTheme, storageKey])
71
72  return (
73    <ThemeProviderContext value={value}>
74      <FunctionOnce param={storageKey}>
75        {(storageKey) => {
76          const theme: string | null = localStorage.getItem(storageKey)
77
78          if (
79            theme === 'dark'
80            || (
81              (theme === null || theme === 'system')
82              && window.matchMedia('(prefers-color-scheme: dark)').matches
83            )
84          ) {
85            document.documentElement.classList.add('dark')
86          }
87        }}
88      </FunctionOnce>
89      {children}
90    </ThemeProviderContext>
91  )
92}
93
94// eslint-disable-next-line react-refresh/only-export-components
95export function useTheme() {
96  const context = use(ThemeProviderContext)
97
98  if (context === undefined)
99    throw new Error('useTheme must be used within a ThemeProvider')
100
101  return context
102}

1import type { QueryClient } from '@tanstack/react-query'

2import { Toaster } from '@conar/ui/components/sonner'

3import appCss from '@conar/ui/globals.css?url'

4import { useMountedEffect } from '@conar/ui/hookas/use-mounted-effect'

5import { ThemeProvider } from '@conar/ui/theme-provider'

6import { QueryClientProvider } from '@tanstack/react-query'

7import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

8import { createRootRouteWithContext, HeadContent, Outlet, Scripts, useRouterState } from '@tanstack/react-router'

9import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

10import { ErrorPage } from '~/error-page'

11import { getLatestReleaseOptions, getRepoOptions, getUsersCountOptions } from '~/queries'

12import { seo } from '~/utils/seo'

14if (import.meta.env.DEV) {

15 import('react-scan').then(({ scan }) => {

16 scan()

17 })

18}

20export const Route = createRootRouteWithContext<{

21 queryClient: QueryClient

22}>()({

23 beforeLoad: async ({ context }) => {

24 if (typeof window !== 'undefined') {

25 context.queryClient.prefetchQuery(getRepoOptions)

26 context.queryClient.prefetchQuery(getLatestReleaseOptions)

27 context.queryClient.prefetchQuery(getUsersCountOptions)

28 }

29 },

30 head: () => ({

31 meta: [

32 {

33 charSet: 'utf-8',

34 },

35 {

36 name: 'viewport',

37 content: 'width=device-width, initial-scale=1',

38 },

39 ...seo({

40 title: 'Conar.app - AI-powered connections management tool',

41 description: 'AI-powered tool that makes database operations easier. Built for PostgreSQL. Modern alternative to traditional database management tools.',

42 image: '/og-image.png',

43 }),

44 { name: 'apple-mobile-web-app-title', content: 'Conar' },

45 ],

46 links: [

47 { rel: 'stylesheet', href: appCss },

48 { rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', sizes: '96x96' },

49 { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },

50 { rel: 'shortcut icon', href: '/favicon.ico' },

51 { rel: 'apple-touch-icon', href: '/apple-touch-icon.png', sizes: '180x180' },

52 { rel: 'manifest', href: '/site.webmanifest' },

53 ],

54 scripts: [

55 {

56 defer: true,

57 src: 'https://assets.onedollarstats.com/stonks.js',

58 ...(import.meta.env.DEV ? { 'data-debug': 'conar.app' } : {}),

59 },

60 ],

61 }),

62 component: RootComponent,

63 errorComponent: props => <ErrorPage {...props} />,

64})

66function RootComponent() {

67 const { queryClient } = Route.useRouteContext()

68 const pathname = useRouterState({ select: state => state.location.pathname })

70 useMountedEffect(() => {

71 window.scrollTo({

72 top: 0,

73 })

74 }, [pathname])

76 return (

77 <html suppressHydrationWarning>

78 <head>

79 <HeadContent />

80 </head>

81 <body className="bg-gray-100 dark:bg-neutral-950">

82 <QueryClientProvider client={queryClient}>

83 <ThemeProvider>

84 <Outlet />

85 <ReactQueryDevtools buttonPosition="bottom-left" />

86 </ThemeProvider>

87 </QueryClientProvider>

88 <Toaster />

89 <TanStackRouterDevtools position="bottom-right" />

90 <Scripts />

91 </body>

92 </html>

93 )

94}

🎨 TanStack Start SSR-Friendly Theme Provider

Reasons to Still Use Next.js from a TanStack Start Enjoyer

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Building Android Widgets in Expo with Custom Native Modules

🎨 TanStack Start SSR-Friendly Theme Provider

Reasons to Still Use Next.js from a TanStack Start Enjoyer

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Building Android Widgets in Expo with Custom Native Modules

🌟 Overview

🎭 The Provider: `ThemeProvider.tsx`

🛠️ FunctionOnce Utility: `/lib/function-once.ts`

🏗️ Implementation Flow

🎯 Example Usage: `/src/routes/__root.tsx`

🌈 Benefits & Features

✅ Production-Ready Advantages

🎯 Usage Tips

🚀 Quick Setup

📚 References

More posts

Reasons to Still Use Next.js from a TanStack Start Enjoyer

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Building Android Widgets in Expo with Custom Native Modules

More posts

Reasons to Still Use Next.js from a TanStack Start Enjoyer

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Building Android Widgets in Expo with Custom Native Modules

🌟 Overview

🎭 The Provider: ThemeProvider.tsx

🛠️ FunctionOnce Utility: /lib/function-once.ts

🏗️ Implementation Flow

🎯 Example Usage: /src/routes/__root.tsx

🌈 Benefits & Features

✅ Production-Ready Advantages

🎯 Usage Tips

🚀 Quick Setup

📚 References

🎭 The Provider: `ThemeProvider.tsx`

🛠️ FunctionOnce Utility: `/lib/function-once.ts`

🎯 Example Usage: `/src/routes/__root.tsx`