Theming

In Fluentic Style, a theme is just a scope. This keeps the model small and composable.

Local theme

const danger = style.scope([
  buttonStyles.root({
    backgroundColor: 'crimson',
    color: 'white',
  }),
  buttonStyles.label({
    fontWeight: 700,
  }),
]);

Conditional theme

<Button theme={[isDanger && danger, props.theme]} />

CssTheme accepts nested arrays and falsy values.

Theme target

Use scopeTarget inside the component to apply incoming theme scopes to a specific slot target.

const target = buttonStyles.root;

const css = useCss(
  buttonStyles,
  ...scopeTarget(target, props.theme),
);

Responsive theme

const mobileCompact = style.scope()
  .media('(max-width: 700px)', [
    buttonStyles.root({
      minHeight: 36,
      padding: '6px 10px',
    }),
  ]);

Best practice

Keep themes semantic:

primaryButton
dangerButton
compactButton

Avoid themes named after a single CSS property unless they are truly utility overrides.