Inertia.js

Ready to give your Inertia.js project that sleek, dark mode look? Check out this guide and get your app looking smooth and stylish in the dark.

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

In the terminal, run the following command to begin:
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>
)
Button