Theming

import { ThemeToggle, ThemeMenu, useTheme } from "marclayui";

// Drop-in pill button:
<ThemeToggle />

// Navbar menu with mode, style preset and color swatches:
<ThemeMenu />

// Or build your own from the hook:
const { mode, preference, setPreference, toggle } = useTheme();
setPreference("dark");     // force dark
setPreference("system");   // follow the OS
toggle();                  // flip light/dark

import { MarclayProvider, PRESETS } from "marclayui";

// Pick a preset — it swaps the ENTIRE light + dark palette pair:
<MarclayProvider preset="neo">…</MarclayProvider>   // neumorphism
<MarclayProvider preset="clay">…</MarclayProvider>  // claymorphism (default)

// Or switch at runtime (persisted to localStorage):
const { preset, setPreset } = useTheme();
setPreset("neo");

// Under the hood it's just an attribute — pure CSS theming works too:
// <html data-preset="neo" data-theme="dark">

import { useTheme } from "marclayui";

const { setColors, resetColors } = useTheme();

// One call repaints gradients, clay glows, focus rings
// and readable text colors across every component:
setColors({ primary: "#7c5cff", bg: "#ece7f6" });

resetColors(); // back to the stylesheet defaults

// Static colors for the whole app:
<MarclayProvider
  defaultMode="dark"
  colors={{ primary: "#4a90d9", secondary: "#7fb5c9" }}
>
  <App />
</MarclayProvider>

/* Or theme purely in CSS — override the tokens on :root */
:root {
  --mcl-primary: #7c5cff;
  --mcl-bg: #ece7f6;
}
[data-theme="dark"] {
  --mcl-primary: #9d85ff;
  --mcl-bg: #221e2e;
}