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.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

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

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

import { IconMoon, IconSun } from 'justd-icons'
import { Button } from '@/Components/ui/button'
import { useTheme } from '@/Components/theme-provider'
 
export function ThemeSwitcher() {
  const { theme, setTheme } = useTheme()
 
  return (
    <Button
       appearance="outline"
       size="square-petite"
       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 Provider({ children }: { children: React.ReactNode }) {
  return (
    <RouterProvider navigate={(to, options) => router.visit(to, options as any)}>
      <ThemeProvider defaultTheme="system" storageKey="irsyad-ui-theme">
        {children}
      </ThemeProvider>
    </RouterProvider>
  )
}

Next up, tweak your resources/js/app.tsx file to include this:

import { Provider } from './provider'
 
const appElement = (
  <Provider>
    <App {...props} />
  </Provider>
)