Dark Mode

:root {
  --ig-primary-background: 255, 255, 255;
  --ig-primary-text: 0, 0, 0;
  /* ...every themed token defined once, light values */
}

[data-theme="dark"] {
  --ig-primary-background: 12, 16, 20;
  --ig-primary-text: 245, 245, 245;
  /* ...same token names, dark values only */
}

/* Usage anywhere in the system: */
.surface {
  background: rgb(var(--ig-primary-background));
  color: rgb(var(--ig-primary-text));
}

"use client";
import { useEffect, useState } from "react";

export default function ThemeToggle() {
  const [theme, setTheme] = useState(null);

  useEffect(() => {
    setTheme(document.documentElement.getAttribute("data-theme") || "light");
  }, []);

  function toggle() {
    const next = theme === "dark" ? "light" : "dark";
    document.documentElement.setAttribute("data-theme", next);
    window.localStorage.setItem("ig-theme", next);
    setTheme(next);
  }

  return (
    <button onClick={toggle} aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}>
      {theme === "dark" ? "☀️" : "🌙"}
    </button>
  );
}

// Runs before paint, in <head>, reads saved preference or system setting
(function () {
  var saved = localStorage.getItem("ig-theme");
  var theme = saved || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  document.documentElement.setAttribute("data-theme", theme);
})();