Styling LiveKit Components

Our approach to styling

All LiveKit components come with carefully designed and beautiful styles that you can use right out of the box. If you're happy with the default styles, that's perfect, but if not, we've got you covered too! We do everything we can to give you the freedom to simply override, extend and change the styles to your liking.

Use the default LiveKit theme

To add styling from our @livekit/components-styles package install and import it.

import '@livekit/components-styles';

Our carefully crafted default theme can be applied by adding the data attribute data-lk-theme="default" to the <LiveKitRoom/> or any HTML container. This will provide all LiveKit components with their default styles and give you access to the theme.

// 🅰️ Set the scope of the theme directly on the `LiveKitRoom` component
<LiveKitRoom data-lk-theme="default" >
  {/* Use the color defined in LiveKit default theme. */}
  <button style={{ background: 'var(--lk-danger)' }} >My Button</button>
</LiveKitRoom>

// 🅱️ or on any regular HTML element.
<div data-lk-theme="default" >
  <LiveKitRoom >
  </LiveKitRoom>
</div>

Style LiveKit Components like a HTML element

Almost all LiveKit components are built on a basic HTML element. For example, the TrackMutedIndicator component is just a div with some hooks that deal with status (e.g. whether a camera track is muted or not). This means that you can treat the TrackMutedIndicator component like a div and pass className or style properties to apply styling.

// Apply custom styling like you would with a regular div element.
<TrackMutedIndictor className="your-classes" style={{ padding: '1rem' }} />

Change global color pallet

All components share a small but carefully selected color palette. Each color from the palette is saved as a CSS custom property (CSS variable). You can find the palette here. Override them as you normally would with CSS custom properties to customize them to your liking.

/* Excerpt of the color palette  */
:root {
  --lk-fg: #111;
  --lk-fg-secondary: #333;
  --lk-fg-tertiary: #555;

  --lk-bg: #fff;
  --lk-bg-secondary: #f5f5f5;
  --lk-bg-tertiary: #fafafa;

  --lk-accent-fg: #fff;
  --lk-accent-bg: #1f8cf9;

  --lk-danger-fg: #fff;
  --lk-danger: #f91f31;
  --lk-danger-text: #6d0311;
  --lk-danger-bg: #fecdd4;

  --lk-success-fg: #fff;
  --lk-success: #1ff968;
  --lk-success-text: #036d26;
  --lk-success-bg: #cdfedd;

  --lk-control-fg: var(--fg);
  --lk-control-bg: var(--bg-secondary);

  --lk-connection-excellent: #06db4d;
  --lk-connection-good: #f9b11f;
  --lk-connection-poor: #f91f31;
  ...

Use of HTML custom data attributes in LiveKit Components

Custom data attributes are an easy way to store additional information on standard HTML elements. We use data attributes on many elements to show what state the component is in, or to provide additional information that can be used for styling.

For example, the ConnectionQualityIndicator shows the connection quality of a participant. The component renders an HTML div element and we add the custom data attribute data-lk-quality to it. The value of the custom data attribute is updated according to the current connection quality and can take the values "unknown", " poor", "good" and "excellent".

// Participant with a excellent connection.
<div data-lk-quality="excellent">
  {/* ... */}
</div>

// Participant with a poor connection.
<div data-lk-quality="poor">
  {/* ... */}
</div>

The data attributes are simple HTML attributes, so we can access them via CSS. For example, to update the ConnectionQualityIndicator background, we can use the attribute selector to change the styles according to the value of the data attribute:

[data-lk-quality='excellent'] {
  background-color: green;
}
[data-lk-quality='poor'] {
  background-color: red;
}