theming

[stunaz]

Did you find a way to apply theming (light/dark theme)
something like next-themes or remix-theme ?

[dotnize]

There is already a <ScriptOnce> component in __root.tsx to toggle the theme on SSR load to avoid FOUC

For toggling the theme via a button, I've been using this and it has been working fine for me so far:

import { MoonIcon, SunIcon } from "lucide-react";
import { Button } from "~/components/ui/button";

export default function ThemeToggle() {
  function toggleTheme() {
    if (
      document.documentElement.classList.contains("dark") ||
      (!("theme" in localStorage) &&
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    ) {
      document.documentElement.classList.remove("dark");
      localStorage.theme = "light";
    } else {
      document.documentElement.classList.add("dark");
      localStorage.theme = "dark";
    }
  }

  return (
    <Button variant="outline" size="icon" type="button" onClick={toggleTheme}>
      <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  );
}

tanstack-boilerplate from nekochan0122 uses a more sophisticated approach to this if you prefer:
https://github.com/nekochan0122/tanstack-boilerplate/blob/main/src/components/theme.tsx