Dark Mode

Learn how to use CSS variables to support Dark Mode themes in Kustomer for Klass Views and Widgets.

Kustomer users work on the platform in both Dark Mode and Light Mode. Create an app that supports Dark Mode themes to ensure visual continuity and consistency for your app when users switch between dark and light modes.

You can use CSS variables to support Dark Mode themes in Kustomer for timeline layouts, insight cards, and context cards. CSS variables are available within Klass Views and context cards.

The theme colors control the background and the text. The specific CSS color variables available to control theming for Dark Mode are listed below:

Dark Mode CSS color variables

--background-primary-color 
--background-primary-color-rgb
--background-primary-color-inverse-rgb
--background-primary-color-hover
--background-primary-color-selected
--background-secondary-color
--background-tertiary-color
--background-tertiary-color-rgb
--background-tertiary-color-hover
--background-tertiary-color-hover-rgb
--background-nav-primary-color
--background-modal-overlay-color-rgb
--background-search-results-has-active-users-color
--background-search-results-has-active-users-color-hover
--font-primary-color
--font-primary-color-inverse
--font-secondary-color
--font-secondary-hover-color
--icon-primary-color
--icon-primary-color-disabled
--form-border-color
--form-border-color-hover
--form-border-color-disabled
--color-hint

Here's an example of how to use these color variables in CSS:

CSS

.exampleClass {
	background: var(--background-primary-color);
	color: var(--font-primary-color);
}

You can find examples for how to support Dark Mode for different Klass View (or KView) creation methods:

Support for Klass Views created using the Kustomer visual builder

The visual builder for Klass Views in Kustomer uses Kustomer components. Kustomer already supports Dark Mode for Klass Views created from within the Kustomer platform.

Support for Klass Views created using JSX code

To support Dark Mode in JSX code, you can use the built-in Kustomer JSX components documented in JSX in Kustomer.

To use custom components and CSS, you can reference the CSS variables using the style property of your JSX elements.

Example:

<div style={{background: 'var(--background-primary-color)'>Example</div>

Support for Klass Views created using DynamicCard to embed iFrames, widgets, or context cards

The Kustomer Card SDK allows you to use theme variables within iFrames. When an iFrame calls Kustomer.init() against the SDK, the SDK loads the current theme and updates the CSS variables within the frame. The Kustomer Cards SDK also automatically updates the frame if the theme changes while the user is viewing the card or Klass View.

You can style iFrame elements using CSS.

Example:

CSS

.exampleClass {
  background: var(--background-primary-color);
	color: var(--font-primary-color);
}