Dark Mode

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.

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 justd-icons package.

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

Loading source code...

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