​
Overview

NEW: You can use the Theme Playground to customize and test your themes.

  • Customize the appearance of all Velt components to match your product’s design system.
  • Theme customization works even when Velt’s Shadow DOM is enabled, as long as you set the CSS variables on the <body> tag.
  • You can customize:
    • Border radius
    • Spacing
    • Typography
    • Colors for light and dark modes
      • Base Colors
      • Accent Colors
      • Text Shades
      • Background Shades
      • Border Shades
      • Status Colors (error, warning, success)
      • Transparent colors
  • The following components now support theming (others will be added soon):
    • Comment Components
    • Recording Components
    • Reactions

​
Available Theme Variables

--velt-border-radius-2xs: 0.125rem; // 2px
--velt-border-radius-xs: 0.25rem; // 4px
--velt-border-radius-sm: 0.5rem; // 8px
--velt-border-radius-md: 0.75rem; // 12px
--velt-border-radius-lg: 1rem; // 16px
--velt-border-radius-xl: 1.25rem; // 20px
--velt-border-radius-2xl: 1.5rem; // 24px
--velt-border-radius-3xl: 2rem; // 32px
--velt-border-radius-full: 5rem; // 80px

​
Example

  • You can update the following variables in <body> tag to change the theme.
  • For testing, try copy pasting the following sample themes in body tag:
body {
  --velt-light-mode-accent: #0BA528;
  --velt-light-mode-accent-text: #0BA528;
  --velt-light-mode-accent-hover: #08841F;
  --velt-light-mode-accent-foreground: #FFFFFF;
  --velt-light-mode-accent-light: #DFF9E4;
  --velt-light-mode-accent-transparent: rgba(11, 165, 40, 0.08);

  --velt-dark-mode-accent: #0BA528;
  --velt-dark-mode-accent-text: #0BA528;
  --velt-dark-mode-accent-hover: #08841F;
  --velt-dark-mode-accent-foreground: #FFFFFF;
  --velt-dark-mode-accent-light: #DFF9E4;
  --velt-dark-mode-accent-transparent: rgba(11, 165, 40, 0.08);

  --velt-border-radius-2xs: 2px;
  --velt-border-radius-xs: 2px;
  --velt-border-radius-sm: 2px;
  --velt-border-radius-md: 2px;
  --velt-border-radius-lg: 2px;
  --velt-border-radius-xl: 2px;
  --velt-border-radius-2xl: 2px;
  --velt-border-radius-3xl: 2px;
  --velt-border-radius-full: 2px;
}

Was this page helpful?

Reorder ComponentsRemove Shadow DOM