Custom theme and branding
Custom theme and branding
Customising component colours
Some components can have their 'brand' colour changed by using either of the methods below. When the 'brand' colour is changed, components will automatically update.
Other styles on affected components will also adapt accordingly, such as the colour of text or icons.
Components that follow the 'brand' colour will not update in the same way as other components when adapting to dark mode. Instead their appearance will only adjust to match the contrast of the 'brand' colour.
Branding is not the same as theming. With theming, component colours can be modified using a more fine-grained approach, allowing total control over their appearance. Branding focuses on the core structural components of an application, and creates an appearance that is recognisable to a user.
CSS variables
You can set the 'brand' colour by using the three CSS variables (one for each of the RGB values for the colour) shown below:
:root {
--ic-brand-color-primary-r: 92;
--ic-brand-color-primary-g: 9;
--ic-brand-color-primary-b: 72;
}Theme component
Alternatively, if using theic-theme
web component, you can set thebrand-color
attribute:
<ic-theme brand-color="rgb(92, 9, 72)"></ic-theme>
<ic-theme brand-color="#5c0949"></ic-theme>
Or, if using the ReactIcTheme
component, you can set thebrandColor
property:
<IcTheme brandColor="rgb(92, 9, 72)"></IcTheme>
<IcTheme brandColor="#5c0949"></IcTheme>The components that use the 'brand' colour are:
Theme details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
|
|---|---|---|
|
|
The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)". |
|
|
|
The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings. |
|
|
The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)". |
|
The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings. |
Dark mode as a theme
Most component's variants can be displayed using dark mode colours. This creates better colour contrast with backgrounds, borders and text for when components need to be used on dark backgrounds.
These component has been given atheme
prop, taking values ofinherit
(default),light
anddark
. By setting the value to eitherlight
ordark
at the component level, those components will display dark mode colours, independent of any higher level themes or system settings.
By leaving the theme prop as the default value (inherit
), it will decide the colours based on either a high-levelic-theme
component, or if one does not exist, the browser/system settings.
Example
When implementing dark mode into an app without anic-theme
wrapper, the components will default to the browser/system settings unless overridden manually. If using a fixed background colour, this will need to be considered as user's system settings may cause dark components to render on a light background, for example.
See the
Interactive example
<ic-buttononclick="handleClick()">Update ic-theme</ic-button><ic-themeclass="theme-container"theme="light"><ic-alertheading="Set at component level"variant="info"theme="light"></ic-alert><ic-alertheading="Inherits from ic-theme"variant="info"></ic-alert></ic-theme><ic-alertheading="Inherits from system/browser settings"variant="info"></ic-alert><IcButtononClick={handleClick}>Update ic-theme</IcButton><IcThemetheme={theme}className={classes.themeContainer}><IcAlertheading="Set at component level"variant="info"theme="light"/><IcAlertheading="Inherits from ic-theme"variant="info"/></IcTheme><IcAlertheading="Inherits from system/browser settings"variant="info"/>Monochrome
Themonochrome
prop can be set totrue
to remove the colour from components to help them display on certain backgrounds. It will display as either black or white, switching between the two based on the dark mode preference mentioned above.