SolidStart

Adding dark mode to your SolidStart app.

Install Kobalte

Start by installing @kobalte/core.

npm install @kobalte/core

Wrap your app

Create a function to fetch the cookie from the server and add the ColorModeProvider and ColorModeScript to your app.tsx.

import { isServer } from "solid-js/web"
 
import { ColorModeProvider, ColorModeScript, cookieStorageManagerSSR } from "@kobalte/core"
import { getCookie } from "vinxi/http"
 
function getServerCookies() {
  "use server"
  const colorMode = getCookie("kb-color-mode")
  return colorMode ? `kb-color-mode=${colorMode}` : ""
}
 
export default function App() {
  const storageManager = cookieStorageManagerSSR(isServer ? getServerCookies() : document.cookie)
  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.