Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

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 .

Name Description Default
Property brandColor
Attribute brand-color

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)".

type: IcColor | null - `#${string}` | `rgb(${string})` | `rgba(${string})` | null | undefined
null
Property theme
Attribute theme

The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.

type: "dark" | "light" | "system" - "dark" | "light" | "system" | undefined
"light"
Property brandColor
Attribute brand-color

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)".

type: IcColor | null - `#${string}` | `rgb(${string})` | `rgba(${string})` | null | undefined
Default: null
Property theme
Attribute theme

The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.

type: "dark" | "light" | "system" - "dark" | "light" | "system" | undefined
Default: "light"

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 components have 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 using the corresponding theme, 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 Dark mode pattern for an example of how to implement dark mode into an application.

Interactive example

Update ic-theme
<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>

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.

Interactive example

Regular Monochrome

Last reviewed 2 December 2024 .
Navigated to Custom theme and branding - Intelligence Community Design System