Vite

Got a Vite project? Let's flip the switch to dark mode and get that cool, sleek look in a snap. Here’s how to do it.

Theme Provider

First, you need to create a provider called theme-provider.tsx in your components folder.

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>,
)

Theme Switcher

Then for the switcher, you can use the useTheme hook to get the current theme.

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

If you spot typos or wrong implementations, feel free to contribute here.