TanStack Start | uni-themes

src/routes/__root.tsx

import {
  createRootRoute,
  HeadContent,
  Outlet,
  Scripts,
} from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { getRequest } from '@tanstack/react-start/server'
import { ThemeProvider } from 'uni-themes'
import { ThemeScript } from 'uni-themes/script'
import { getThemeFromRequest } from 'uni-themes/server'

const getServerTheme = createServerFn().handler(() =>
  getThemeFromRequest(getRequest()),
)

export const Route = createRootRoute({
  loader: () => getServerTheme(),
  component: RootComponent,
})

function RootComponent() {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeScript storage="cookie" />
        <HeadContent />
      </head>
      <body>
        <ThemeProvider storage="cookie">
          <Outlet />
        </ThemeProvider>
        <Scripts />
      </body>
    </html>
  )
}

Read the root loader's value anywhere with useLoaderData({ from: '__root__' }).

The playground runs this end to end.