Some clients use Heartland products but instead require their own specialized branding. For this purpose, theme overriding is possible for creating white labeled designs. In this way, all products are able to use the same Vega functionality but can change the colors on action items and the side navigation bar.
Theme overriding should only be used for white label clients. If you are creating a Heartland-branded product, please do not use this functionality.
For those that have a need to create white label content and must override the color schema for a site, we have created functionality to override both action colors and sidebar colors to match a white label client’s brand.
The following elements will be changed if using theme overriding.
Dark mode is not supported. White labeling features are only available in light mode. If dark mode colors have been applied to the UI, you must programmatically reset the setting to light mode before applying white label overrides. Applying overrides in dark mode will have no effect, and default Vega dark mode colors will be used.
To use a custom color schema with your designs, use the overrideColors method on the VegaThemeManager element.
There are two properties which can be set to match a custom design:
actionColor: This modifies any action buttons or elements within your designssidebarColor: This will change the color of the side nav element. // In React, Vue, or Angular
import {VegaThemeManager} from '@heartlandone/vega';
const customColors = {
actionColor:'#3c9f55',
sidebarColor: '#274f1c'
};
VegaThemeManager.overrideColors(customColors);
Note that if you use VanillaJS, you will need to include the type="module" property in the script tag.
<script type="module">
const customColors = {
actionColor:'#3c9f55',
sidebarColor: '#274f1c'
};
window.VegaThemeManager.overrideColors(customColors);
</script>Note: this example is not supported in dark mode. Dark mode does not currently work with white label overrides.
<vega-flex
direction="col"
gap="size-32"
>
<vega-flex gap="size-12" align-item="center" >
<vega-color-picker
id="actionColorPicker"
label="Select an Action Color"
hint="Not supported in dark mode"
> </vega-color-picker>
<div class="v-pt-size-8">
<vega-button-circle
variant="icon-only"
size="small"
icon='delete-bin'
id="resetBtn"
disabled
danger
> </vega-button-circle>
</div>
</vega-flex>
<vega-flex
gap="size-12"
>
<vega-button>
Primary Button
</vega-button>
<vega-button-circle
icon='search'
label='Example Circle Button'
> </vega-button-circle>
</vega-flex>
<vega-flex gap="size-12" >
<vega-button
variant="secondary"
> Secondary Button
</vega-button>
<vega-button-circle
variant="secondary"
icon='search'
> </vega-button-circle>
</vega-flex>
<vega-flex
gap="size-12"
align-item="center"
>
<vega-button-link
icon='hb-menu'
type='icon-left'
link="https://heartland.us"
icon-type='icon'
> Link Button
</vega-button-link>
<vega-button-circle
variant="icon-only"
icon='search'
> </vega-button-circle>
</vega-flex>
<vega-toggle-switch
size="small"
checked="true"
label='Toggle Switch'
>
</vega-toggle-switch>
<div style="width:320px;">
<vega-input-select
label="Select Menu"
size="small"
id ="example-select"
placeholder="Choose your favorite car brand"
max-height="300"
>
</vega-input-select>
</div>
<vega-flex gap="size-12" >
<vega-checkbox-group
label="Checkboxes"
class="v-flex-grow"
>
<vega-checkbox
identifier="apples"
> Apples
</vega-checkbox>
<vega-checkbox
identifier="oranges"
>
Oranges
</vega-checkbox>
</vega-checkbox-group>
<vega-radio-group
label="Radio Buttons"
name="cheese"
value="no"
class="v-flex-grow"
>
<vega-radio value="no">
No Cheese
</vega-radio>
<vega-radio value="normal">
Regular Cheese
</vega-radio>
<vega-radio value="extra">
Extra Cheese
</vega-radio>
</vega-radio-group>
</vega-flex>
<div class="v-w-full v-h-px v-bg-divider"></div>
<vega-flex direction="col">
<p class="v-text-primary v-font-field-label">Table</p>
<vega-table></vega-table>
</vega-flex>
</vega-flex>
const picker = document.querySelector('#actionColorPicker');
const resetBtn = document.querySelector('#resetBtn');
picker.colors = [
'#3c9f55','#7c2a00','#61177c','#006d8f','#a96800'
]
picker.addEventListener("vegaChange", (e) => {
const customColors = {actionColor:e.currentTarget.value};
window.VegaThemeManager.overrideColors(customColors);
resetBtn.disabled = "false";
})
resetBtn.addEventListener('vegaClick', () => {
window.VegaThemeManager.reset();
picker.value = null;
resetBtn.disabled = "true";
});
// Additional layout scripts
const checkboxes = document.querySelector('vega-checkbox-group');
checkboxes.vegaFlexProp = {
gap: 'size-8',
direction: 'col',
};
checkboxes.value = ['apples'];
const radios = document.querySelector('vega-radio-group');
radios.vegaFlexProp = {
gap: 'size-8',
direction: 'col',
};
const selectMenu = document.getElementById("example-select");
selectMenu.source = [
{id: "id1", displayName: "Ford"},
{id: "id2", displayName: "Toyota"},
{id: "id3", displayName: "Hyundai"},
{id: "id4", displayName: "Tesla"},
];
const table = document.querySelector('vega-table');
table.columns = [
{label:'Date', prop:'date'},
{label:'Amount', prop:'amount'},
{label:'Balance', prop:'balance'},
];
table.dataSource = [
{
amount: 100,
balance: '$100',
date: '01/01/2022',
key: '1',
status: 'In Progress'
},
{
amount: 300,
balance: '$200',
date: '01/02/2022',
key: '2',
status: 'In Progress'
},
{
amount: 400,
balance: '$300',
date: '01/03/2022',
key: '3',
status: 'Not Started'
},
{
amount: 200,
balance: '$400',
date: '01/04/2022',
key: '4',
status: 'Pending'
},
];
table.rowSelection = {}
table.setSelection(["1"]);
For more examples, please check Storybook.
Vega is designed with accessibility included; particularly color contrast. For this reason, we only allow overriding of the primary colors to retain accessibility of individual elements within the Vega design system.
In situations where the primary color override is used, we perform basic accessibility checks to ensure that any text displayed over this custom color is readable and passes AA contrast ratio requirements. For example, the text color within a primary button will always be a shade of white to ensure that the selected custom color will be dark enough to provide enough contrast against the button’s label.