TanStack Router

1
import { render } from "solid-js/web";
2
import { createRouter, RouterProvider } from "@tanstack/solid-router";
3
import { ModeWatcher } from "solid-mode-watcher";
4

5
import { routeTree } from "./routeTree.gen";
6

7
import "./styles.css";
8

9
const router = createRouter({
10
  routeTree,
11
  defaultPreload: "intent",
12
  scrollRestoration: true,
13
  defaultPreloadStaleTime: 0,
14
});
15

16
declare module "@tanstack/solid-router" {
17
  interface Register {
18
    router: typeof router;
19
  }
20
}
21

22
function App() {
23
  return (
24
    <>
25
      <RouterProvider router={router} />
26
      <ModeWatcher />
27
    </>
28
  );
29
}
30

31
const rootElement = document.getElementById("app");
32
if (rootElement) {
33
  render(() => <App />, rootElement);
34
}

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
}