Solid Start

1
import { Suspense } from "solid-js";
2
import { Router } from "@solidjs/router";
3
import { FileRoutes } from "@solidjs/start/router";
4
import { ModeWatcher } from "solid-mode-watcher";
5

6
import Nav from "~/components/Nav";
7

8
import "./app.css";
9

10
export default function App() {
11
  return (
12
    <Router
13
      root={(props) => (
14
        <>
15
          <Nav />
16
          <Suspense>{props.children}</Suspense>
17
          <ModeWatcher />
18
        </>
19
      )}
20
    >
21
      <FileRoutes />
22
    </Router>
23
  );
24
}

1
import Moon from "lucide-solid/icons/moon";
2
import Sun from "lucide-solid/icons/sun";
3
import { toggleMode } from "solid-mode-watcher";
4

5
import { Toggle } from "~/components/ui/toggle";
6

7
export default function ModeToggle() {
8
  return (
9
    <Toggle onClick={toggleMode} variant="transparent">
10
      <Moon class="size-5 scale-0 -rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
11
      <Sun class="absolute size-5 scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
12
    </Toggle>
13
  );
14
}

1
import Moon from "lucide-solid/icons/moon";
2
import Sun from "lucide-solid/icons/sun";
3
import { setMode } from "solid-mode-watcher";
4

5
import { Button } from "./ui/button";
6
import {
7
  DropdownMenu,
8
  DropdownMenuContent,
9
  DropdownMenuItem,
10
  DropdownMenuTrigger,
11
} from "./ui/dropdown-menu";
12

13
export default function ModeToggle() {
14
  return (
15
    <DropdownMenu>
16
      <DropdownMenuTrigger as={Button} size="icon" variant="neutral-no-shadow">
17
        <Moon class="size-5 scale-0 -rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
18
        <Sun class="absolute size-5 scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
19
        <span class="sr-only">Toggle theme</span>
20
      </DropdownMenuTrigger>
21
      <DropdownMenuContent>
22
        <DropdownMenuItem onClick={() => setMode("light")}>
23
          Light
24
        </DropdownMenuItem>
25
        <DropdownMenuItem onClick={() => setMode("dark")}>
26
          Dark
27
        </DropdownMenuItem>
28
        <DropdownMenuItem onClick={() => setMode("system")}>
29
          System
30
        </DropdownMenuItem>
31
      </DropdownMenuContent>
32
    </DropdownMenu>
33
  );
34
}