Vite

Starter Kit

If you want, you always use the starter kit to get started. You can find it Here.

Provider and Switcher

First of all, you need to install the @heroicons/react package.

npm i @heroicons/react

After that, we need two files: theme-provider.tsx and theme-switcher.tsx.

Usage

Then you can wrap your app with the provider. For example if you are using Laravel with Inertia.js, you can put it inside your app.tsx like so:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { ThemeProvider } from './components/theme-provider.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
)