Skip to main content

useLumioTheme

Read the current Lumio theme (dark, light, or a custom theme). Use this to adapt your extension's appearance to match the streamer's dashboard preferences.

Signature​

const theme = useLumioTheme();

Parameters​

This hook takes no parameters.

Return value​

TypeDescription
LumioThemeThe current theme object

LumioTheme shape​

interface LumioTheme {
  mode: "dark" | "light" | "custom";
  colors: {
    background: string;       // e.g. "#0f0f0f"
    foreground: string;       // e.g. "#ffffff"
    primary: string;          // e.g. "#6366f1"
    primaryForeground: string; // e.g. "#ffffff"
    muted: string;            // e.g. "#374151"
    mutedForeground: string;  // e.g. "#9ca3af"
    border: string;           // e.g. "#1f2937"
    card: string;             // e.g. "#111827"
    cardForeground: string;   // e.g. "#f9fafb"
  };
}

Example​

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

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

  return (
    <Box
      style={{
        background: theme.colors.card,
        border: `1px solid ${theme.colors.border}`,
        borderRadius: 8,
        padding: 16,
      }}
    >
      <Text
        content="Themed content"
        style={{ color: theme.colors.foreground }}
      />
      <Text
        content="Secondary text"
        style={{ color: theme.colors.mutedForeground }}
      />
    </Box>
  );
}

Adapting to dark/light mode​

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

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

  const shadowColor = theme.mode === "dark"
    ? "rgba(0, 0, 0, 0.5)"
    : "rgba(0, 0, 0, 0.1)";

  return (
    <Box style={{ boxShadow: `0 4px 16px ${shadowColor}` }}>
      ...
    </Box>
  );
}

Notes​

  • The theme updates in real time if the user switches themes while the extension is open
  • On the layer surface (OBS), the theme reflects the dashboard theme setting — it does not react to viewer's OS dark/light mode preference
  • SDK components automatically use the current theme for their default styling — useLumioTheme() is for custom styling in style props