Theme

Control the brand-specific primary application colors via a theme applied to the <body> element. Anything that uses a brand class name will automatically inherit the selected theme.

Theme basics

Brand themes are controlled by the data-hc-theme attribute on the <body> element. Setting it to attend, boost, connect, or forms will apply that brand’s colors to any supported component with a *--brand class name.


<body class="hc-app-body" data-hc-theme="boost">
  ...
  <button class="hc-button hc-button--primary hc-button--brand">Button</button>
</body>

Currently only these four main themes are supported, in addition to the default when no value is applied, though Connect’s custom themes are in the works.

When a theme is applied this way, all components that have a brand class applied will inherit that theme’s colors. This includes apps embedded as an iframe within a parent app; this is by design so that the embedded app follows the parent’s color scheme.

Supported components

The following list of components have brand variants that will inherit a theme applied this way: Button, Icon, Pagination, Toast, and Loading. See those component pages for more information on what that looks like and how to apply their classes.

Theme:

This is a default Toast message

HTML

Expand Edit in Playground Copy


<!-- controls for demo purposes -->
<div class="w-1/2 mx-auto flex flex-row items-center gap-2 pt-2 mb-4">
    <span class="whitespace-nowrap">Theme:</span>
    <select class="hc-select" onchange="document.querySelector('body').dataset.hcTheme=this.value">
        <option value="ss">Default</option>
        <option value="attend">Attend</option>
        <option value="boost">Boost</option>
        <option value="connect">Connect</option>
        <option value="forms">Forms &amp; Flows</option>
    </select>
</div>
<!-- components -->
<div class="flex flex-row justify-center items-center gap-4 mb-2">
    <i class="hc-icon hc-icon--32 hc-icon--brand hc-icon--globe hc-icon--solid"></i>
    <span class="hc-loading hc-loading--brand"></span>
    <button type="button" class="hc-button hc-button--brand hc-button--primary">
        <i class="hc-icon hc-icon--settings"></i>
        Primary
    </button>
</div>
<div class="flex flex-col justify-center items-center gap-6 pb-2">
    <div class="hc-pagination" role="navigation" aria-label="Paginated navigation">
        <button class="hc-pagination-item" aria-label="Previous page">
            <i class="hc-icon hc-icon--chevron-left hc-icon--16"></i>
        </button>
        <button class="hc-pagination-item">1</button>
        <button class="hc-pagination-item">2</button>
        <button class="hc-pagination-item hc-is--active" aria-current="true">3</button>
        <button class="hc-pagination-item">4</button>
        <button class="hc-pagination-item">5</button>
        <button class="hc-pagination-item">...</button>
        <button class="hc-pagination-item">100</button>
        <button class="hc-pagination-item" aria-label="Next page">
            <i class="hc-icon hc-icon--chevron-right hc-icon--16"></i>
        </button>
    </div>
    <div class="hc-toast hc-toast--brand hc-is--active" role="status">
        <i class="hc-icon hc-icon--check-circle hc-icon--solid"></i>
        <span class="hc-toast-content">
            This is a default Toast message
        </span>
        <button class="hc-button hc-button--primary hc-button--sm">Button</button>
        <span class="hc-toast-close">
            <button class="hc-button hc-button--tertiary hc-button--icon hc-button--sm" aria-label="Close message">
                <i class="hc-icon hc-icon--close"></i>
            </button>
        </span>
    </div>
</div>