useLumioTheme

Read the theme of the overlay or widget your extension renders in, so it can style itself to match.

Signature

const theme = useLumioTheme();

Parameters

This hook takes no parameters.

Return value

Type	Description
OverlayTheme	The theme the host sent in lifecycle.init, merged over the SDK default

OverlayTheme shape

interface OverlayTheme {
  colors: {
    primary: string;    // e.g. "#6366f1"
    secondary: string;
    accent: string;
    background: string;
    surface: string;
    text: string;
    muted: string;
    border: string;
  };
  fonts: {
    heading: string;
    body: string;
  };
  borderRadius: {
    sm: string;         // e.g. "4px"
    md: string;
    lg: string;
  };
  spacing: number;      // base spacing unit in px, e.g. 8
}

Example

import { useLumioTheme, Box, Text } from "@zaflun/lumio-sdk";

function ThemeAwareCard() {
  const theme = useLumioTheme();

  return (
    <Box
      style={{
        background: theme.colors.surface,
        border: `1px solid ${theme.colors.border}`,
        borderRadius: theme.borderRadius.md,
        padding: theme.spacing * 2,
      }}
    >
      <Text content="Themed content" style={{ color: theme.colors.text }} />
      <Text content="Secondary text" style={{ color: theme.colors.muted }} />
    </Box>
  );
}

Where the value comes from

• The host sends the theme in lifecycle.init, before your bundle runs. The first render already returns it; there is no render with a placeholder theme.
• Lumio has no per-overlay or per-widget theme setting yet. Overlay layers get the overlay page's default theme; widget pages, the widget editor and the extension designer send none, so the hook returns the SDK default shown above.
• The protocol defines a theme.change notification and the hook applies it, but no Lumio host sends it today. Treat the theme as fixed for the lifetime of the surface.
• The theme never follows the viewer's or the OBS browser's dark/light preference.
• SDK components style themselves; use useLumioTheme() for custom styling in style props.