Start by installing solid-mode-watcher
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> );}
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> );}
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> );}