Theming

Every reelcn component reads its colors, fonts, corner radius and default motion from a theme. Wrap a scene once and everything inside restyles:

import { Center, Stage, ThemeProvider } from "./reelcn/core";
import { TextReveal } from "./reelcn/text-reveal";

<ThemeProvider theme="paper">
  <Stage>
    <Center>
      <TextReveal text="Hello" />
    </Center>
  </Stage>
</ThemeProvider>;

theme takes a preset name or a Theme object. Without a <ThemeProvider>, components use midnight.

Presets

Every color a component uses — including ones not in this table, like surface, foreground, muted and border — comes from the same Theme.colors object. Read the whole shape with useTheme():

import { useTheme } from "./reelcn/core";

function Badge() {
  const theme = useTheme();
  return <div style={{ background: theme.colors.surface, color: theme.colors.accent }}>New</div>;
}

Building a brand kit

createTheme starts from a preset and overrides only what you name; colors and fonts merge shallowly, so the rest of the preset stays intact:

import { createTheme, ThemeProvider } from "./reelcn/core";

const brand = createTheme("midnight", { colors: { accent: "#ff5a1f" }, radius: 12 });

<ThemeProvider theme={brand}>{/* … */}</ThemeProvider>;

Every component also takes its own color props, so a single instance can break from the theme without a new one.

Opacity

alpha(color, amount) returns any CSS color at amount opacity (0–1), via color-mix:

import { alpha, useTheme } from "./reelcn/core";

const theme = useTheme();
const glass = alpha(theme.colors.surface, 0.6);

Next steps