Dark Mode

Docs

Dark Mode

Adding dark mode to your site.

Wrap your root layout

Add the ColorModeProvider and ColorModeScript to your app.

src/app.tsx

import { ColorModeProvider, ColorModeScript } from "@kobalte/core";
import { MetaProvider } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import { Suspense } from "solid-js";
import { isServer } from "solid-js/web";
import { getCookie } from "vinxi/http";
 
export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Suspense>
            <ColorModeScript />
            <ColorModeProvider>{props.children}</ColorModeProvider>
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Add a mode toggle

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

Theming CLI