GitHub

Solid Start

How to enable dark mode for Solid Start app

Install Solid Mode Watcher#

Start by installing solid-mode-watcher

Add Mode Watcher To Your App#

src/app.tsx
import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { ModeWatcher } from "solid-mode-watcher";
import Nav from "~/components/Nav";
import "./app.css";
export default function App() {
return (
<Router
root={(props) => (
<>
<Nav />
<Suspense>{props.children}</Suspense>
<ModeWatcher />
</>
)}
>
<FileRoutes />
</Router>
);
}

Add A Mode Toggler#

Toggle#

src/components/mode-toggle.tsx
import Moon from "lucide-solid/icons/moon";
import Sun from "lucide-solid/icons/sun";
import { toggleMode } from "solid-mode-watcher";
import { Toggle } from "~/components/ui/toggle";
export default function ModeToggle() {
return (
<Toggle onClick={toggleMode} variant="transparent">
<Moon class="size-5 scale-0 -rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
<Sun class="absolute size-5 scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
</Toggle>
);
}
src/components/mode-toggle.tsx
import Moon from "lucide-solid/icons/moon";
import Sun from "lucide-solid/icons/sun";
import { setMode } from "solid-mode-watcher";
import { Button } from "./ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "./ui/dropdown-menu";
export default function ModeToggle() {
return (
<DropdownMenu>
<DropdownMenuTrigger as={Button} size="icon" variant="neutral-no-shadow">
<Moon class="size-5 scale-0 -rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
<Sun class="absolute size-5 scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
<span class="sr-only">Toggle theme</span>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => setMode("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setMode("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setMode("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}