Solid UI Neobrutalism

Create An Inline Theme Script#

1
import '../styles/globals.css'
2

3
<html lang="en">
4
  <body>
5
    <h1>Astro</h1>
6
  </body>
7
</html>
8
<script is:inline>
9
  const getThemePreference = () => {
10
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
11
      return localStorage.getItem("theme");
12
    }
13
    return window.matchMedia("(prefers-color-scheme: dark)").matches
14
      ? "dark"
15
      : "light";
16
  };
17
  const isDark = getThemePreference() === "dark";
18
  document.documentElement.classList[isDark ? "add" : "remove"]("dark");
19

20
  if (typeof localStorage !== "undefined") {
21
    const observer = new MutationObserver(() => {
22
      const isDark = document.documentElement.classList.contains("dark");
23
      localStorage.setItem("theme", isDark ? "dark" : "light");
24
    });
25
    observer.observe(document.documentElement, {
26
      attributes: true,
27
      attributeFilter: ["class"],
28
    });
29
  }
30
</script>

Add A Mode Toggler#

Toggle#

1
import { createEffect, createSignal, onMount } from "solid-js";
2
import Moon from "lucide-solid/icons/moon";
3
import Sun from "lucide-solid/icons/sun";
4

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

7
export default function ModeToggle() {
8
  const [theme, setTheme] = createSignal<"light" | "dark" | "system">("light");
9

10
  onMount(() => {
11
    const isDarkMode = document.documentElement.classList.contains("dark");
12
    setTheme(isDarkMode ? "dark" : "light");
13
  });
14

15
  createEffect(() => {
16
    const isDark =
17
      theme() === "dark" ||
18
      (theme() === "system" &&
19
        window.matchMedia("(prefers-color-scheme: dark)").matches);
20
    document.documentElement.classList[isDark ? "add" : "remove"]("dark");
21
    document.documentElement.dataset.theme = isDark
22
      ? "catppuccin-macchiato"
23
      : "catppuccin-latte";
24
    ``;
25
  });
26

27
  const toggleMode = () => {
28
    if (theme() === "light") {
29
      setTheme("dark");
30
    } else if (theme() === "dark") {
31
      setTheme("light");
32
    }
33
  };
34

35
  return (
36
    <Toggle onClick={toggleMode} variant="transparent">
37
      <Moon class="size-5 scale-0 -rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
38
      <Sun class="absolute size-5 scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
39
    </Toggle>
40
  );
41
}

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
}

Display The Mode Toggler#

1
---
2
import { ModeToggle } from "~/components/mode-toggle"; import "~/styles/global.css";
3
---
4
<html lang="en">
5
  <body>
6
    <slot />
7
    <ModeToggle client:load />
8
  </body>
9
</html>

Astro

Create An Inline Theme Script#

Add A Mode Toggler#

Toggle#

Dropdown Menu#

Display The Mode Toggler#