useTheme

Hooks

useTheme

Returns resolved theme values, configuration, and update functions.

Signature

Reads the nearest ThemeProvider. config contains the configured theme inputs. theme contains the resolved palette, radius, font-size, and spacing scales. Setters support controlled and uncontrolled state.

SignatureTypeScript

function useTheme(): {
  theme: ResolvedTheme;
  config: ThemeConfig;
  setBaseColor: (hex: string) => void;
  setRadiusBase: (px: number) => void;
  setFontSizeBase: (px: number) => void;
  setSpacingBase: (px: number) => void;
  setMode: (mode: "light" | "dark") => void;
};

Usage

ExampleTSX

import { useTheme } from "@solarius/onset";

function DensityToggle() {
  const { config, setFontSizeBase } = useTheme();
  const dense = config.fontSizeBase <= 11;

  return (
    <button onClick={() => setFontSizeBase(dense ? 13 : 11)}>
      {dense ? "Comfortable" : "Compact"}
    </button>
  );
}