Command Palette

Search for a command to run...
HQ UI

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

npm i @tabler/icons-react

Next you can create component ThemeSwitcher.tsx

import { IconMoon, IconSun } from '@tabler/icons-react'
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>
)