Vite

Adding dark mode to your Vite app.

Install Kobalte

Start by installing @kobalte/core.

npm install @kobalte/core

Wrap your app

Add the ColorModeProvider and ColorModeScript to your app.tsx.

import { ColorModeProvider, ColorModeScript, createLocalStorageManager } from "@kobalte/core"
 
export default function App() {
  const storageManager = createLocalStorageManager("vite-ui-theme")
  return (
    <Router
      root={(props) => (
        <>
          <ColorModeScript storageType={storageManager.type} />
          <ColorModeProvider storageManager={storageManager}>
            <Nav />
            <Suspense>{props.children}</Suspense>
          </ColorModeProvider>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

Add needed components

Make sure you have the button and dropdown-menu components installed.

npx solidui-cli@latest add button dropdown-menu

Add a mode toggle

Place a mode toggle on your site to toggle between light and dark mode.