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

Create a provider called theme-provider.tsx and drop it in the resources/js/components folder.

Root App

If you are using Laravel, you can put it inside 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({ variant = 'outline' }: { variant?: 'outline' | 'ghost' }) {
  const { theme, setTheme } = useTheme()
 
  return (
    <Button
       variant={variant}
       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

If you are using react-aria-components, you can wrap your ThemeProvider with RouterProvider. 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 like this:

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