Theme Provider
When you’re rockin' Inertia.js, gotta whip up a provider called theme-provider.tsx
and drop it in the resources/js/components
folder.
Root App
Not sure if you're rollin' with Inertia.js on Ruby or Laravel, but if it's Laravel, you can stash it in your resources/js/app.tsx
like this:
Theme Switcher
npm i hq-icons
Next you can create component ThemeSwitcher.tsx
import { IconMoon, IconSun } from 'hq-icons'
import { Button } from '@/Components/ui/button'
import { useTheme } from '@/Components/theme-provider'
export function ThemeSwitcher() {
const { theme, setTheme } = useTheme()
return (
<Button
variant="outline"
size="icon"
aria-label={'Switch to ' + theme === 'light' ? 'dark' : 'light' + 'mode'}
onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}
>
<IconSun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"/>
<IconMoon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"/>
</Button>
)
}
Group Providers
When you're juggling multiple providers, like React Aria Components, you need a RouterProvider
. To combine 'em all, just create a new file called providers.tsx
in your resources/js
folder and drop in this code:
import { ThemeProvider } from '@/Components/theme-provider'
import { router } from '@inertiajs/react'
import React from 'react'
import { RouterProvider } from 'react-aria-components'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<RouterProvider navigate={(to, options) => router.visit(to, options as any)}>
<ThemeProvider defaultTheme="system" storageKey="theme">
{children}
</ThemeProvider>
</RouterProvider>
)
}
Next up, tweak your resources/js/app.tsx
file to includwe this:
import { Provider } from './providers'
const appElement = (
<Providers>
<App {...props} />
</Providers>
)