Vite

1
import { ModeWatcher } from "solid-mode-watcher";
2

3
function App() {
4
  return (
5
    <>
6
      ...
7
      <ModeWatcher />
8
    </>
9
  );
10
}

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
}