Theming

All three UI kits share a single CSS design-token system. Customize any token to match your brand.

Setting the Theme

<!-- Default: dark theme -->
<div data-theme="dark">...</div>

<!-- Light theme -->
<div data-theme="light">...</div>

Or via the component prop:

<VideoConference call={call} theme="light" />

Design Tokens

Override any of these in your CSS:

:root {
  /* Backgrounds */
  --rtc-bg: #0f0f1a;           /* Outermost container */
  --rtc-surface-1: #1a1a2e;   /* Cards, panels */
  --rtc-surface-2: #252540;   /* Elevated surfaces */

  /* Text */
  --rtc-text: #e8e8f0;
  --rtc-text-muted: #9090a8;

  /* Borders */
  --rtc-border: #2a2a45;

  /* Brand */
  --rtc-accent: #6366f1;       /* Buttons, active states */
  --rtc-accent-hover: #5254cc;

  /* Status */
  --rtc-danger: #ef4444;       /* Leave button, errors */
  --rtc-danger-hover: #dc2626;
  --rtc-success: #22c55e;      /* Active speaking ring */
  --rtc-warning: #f59e0b;      /* Poor connection */

  /* Video tiles */
  --rtc-tile-bg: #1a1a2e;
  --rtc-tile-radius: 12px;
  --rtc-tile-gap: 8px;

  /* Control bar */
  --rtc-ctrl-bg: rgba(15, 15, 26, 0.9);
  --rtc-ctrl-btn-size: 48px;
  --rtc-ctrl-btn-radius: 50%;

  /* Chat */
  --rtc-chat-bg: #1a1a2e;
  --rtc-chat-width: 320px;

  /* Typography */
  --rtc-font: system-ui, -apple-system, sans-serif;
  --rtc-font-size: 14px;

  /* Speaking indicator */
  --rtc-speaking-ring: 2px solid var(--rtc-success);
  --rtc-speaking-glow: 0 0 8px rgba(34, 197, 94, 0.4);

  /* Z-indices */
  --rtc-z-overlay: 100;
  --rtc-z-modal: 200;
}

Light Theme Overrides

[data-theme="light"] {
  --rtc-bg: #f8f8fc;
  --rtc-surface-1: #ffffff;
  --rtc-surface-2: #f0f0f8;
  --rtc-text: #1a1a2e;
  --rtc-text-muted: #6060a0;
  --rtc-border: #e0e0f0;
  --rtc-tile-bg: #ffffff;
  --rtc-ctrl-bg: rgba(248, 248, 252, 0.95);
}

Example: Brand Customization

/* Indigo brand */
:root {
  --rtc-accent: #4f46e5;
  --rtc-accent-hover: #4338ca;
  --rtc-success: #059669;
  --rtc-tile-radius: 8px;
  --rtc-font: 'Inter', sans-serif;
}

/* Minimal dark with tighter tiles */
:root {
  --rtc-bg: #000000;
  --rtc-surface-1: #111111;
  --rtc-surface-2: #1c1c1c;
  --rtc-border: #333333;
  --rtc-tile-gap: 4px;
  --rtc-tile-radius: 4px;
  --rtc-ctrl-btn-radius: 8px;
}

CSS Classes

If you need deeper customization, the generated class names are stable:

Class	Element
.rtc-conference	Root conference container
.rtc-grid	Video tile grid
.rtc-grid--1/2/4/9/many	Grid size variants
.rtc-tile	Individual participant tile
.rtc-tile--speaking	Active speaker tile
.rtc-tile--screen	Screen share tile
.rtc-tile__name	Name label overlay
.rtc-tile__muted	Muted microphone icon
.rtc-controls	Control bar container
.rtc-controls__btn	Individual control button
.rtc-controls__btn--active	Active/on state
.rtc-controls__btn--danger	Leave/end button
.rtc-chat	Chat panel container
.rtc-chat__messages	Scrollable message list
.rtc-chat__input	Message input area