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

Theme

Guidance Code

Component demo

Interactive example

View example in new window
Web component React
StackBlitz
Show code

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: IcThemeSettings - "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: IcThemeSettings - "dark" | "light" | "system" | undefined
Default: "light"

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name Description Signature
Web component icThemeChange
React onIcThemeChange
Emitted when the theme is changed.
"dark" | "light" | "system"
Web component icThemeChange
React onIcThemeChange
Emitted when the theme is changed.
"dark" | "light" | "system"

Variants

Hex code brand

Interactive example

View example in new window
Web component React
StackBlitz
Show code

Dark mode

See the Dark mode pattern for an example of how to implement dark mode into an application.

Interactive example

Update ic-theme
Web component React
StackBlitz
Show full code 
<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>
Last reviewed 2 July 2025 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website Go to HMGCC website
Navigated to Theme - Intelligence Community Design System