TanStack Start

1
import { createRootRouteWithContext, Outlet } from "@tanstack/solid-router";
2
import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
3
import { ModeWatcher } from "solid-mode-watcher";
4

5
import "@fontsource/inter";
6

7
import Header from "../components/Header";
8

9
export const Route = createRootRouteWithContext()({
10
  component: RootComponent,
11
});
12

13
function RootComponent() {
14
  return (
15
    <>
16
      <Header />
17

18
      <Outlet />
19
      {/* <TanStackRouterDevtools /> */}
20
      <ModeWatcher />
21
    </>
22
  );
23
}

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
}