velt-presence, velt-presence-tooltip {
	// Below values are for demo purpose only,
  // you can use different avatar-size and colors according to your usecase
  --velt-presence-avatar-size: 6rem !important;
  --velt-presence-primary-text-color: red !important;
  --velt-presence-secondary-text-color: blue !important;
  --velt-presence-tooltip-bg-color: grey !important;
  --velt-presence-tooltip-border-color: red !important;
  --velt-presence-more-users-color: purple !important;
}
1

Select the Presence component

You can select the Presence component. Our CSS variables are set at the component level.

2

Modify a CSS variable

Set the variable to anything you want.

We expose a set of variables so you can customize the component to better match your UI.

3

Check out the table below

Reference the table below to see what variables we expose.

Alternatively, you can directly inspect the component CSS to see what variables are available.

Variable NameDefault (light)Default (dark)What does it do?
—velt-presence-avatar-size2rem2remSets the Presence avatar size
—velt-presence-primary-text-color#141416#E5E5E9Sets the primary text color
—velt-presence-secondary-text-color#777E90#91919CSets the secondary text color
—velt-presence-tooltip-bg-color#FCFCFD#141416Sets the tooltip background color
—velt-presence-tooltip-border-color#E6E8EC#303034Sets the tooltip border color
—velt-pressence-more-users-color#D4D6DF#404044Sets the more users color
velt-presence, velt-presence-tooltip {
	// Below values are for demo purpose only,
  // you can use different avatar-size and colors according to your usecase
  --velt-presence-avatar-size: 6rem !important;
  --velt-presence-primary-text-color: red !important;
  --velt-presence-secondary-text-color: blue !important;
  --velt-presence-tooltip-bg-color: grey !important;
  --velt-presence-tooltip-border-color: red !important;
  --velt-presence-more-users-color: purple !important;
}

Was this page helpful?

PartsCreate Your Own UI