Theming

Every @avnology/id-elements component is rendered via @avnology/design-system, a Carbon-based primitives layer. Theming hooks into Carbon's CSS custom-property system.

1. Wrap in the provider

Supports "light" and "dark". "auto" (match system preference) is on the v1.1 roadmap.

2. Override semantic tokens

Set Carbon tokens in CSS to retheme every component at once:

:root {
  --cds-interactive:     #0F62FE; /* primary buttons */
  --cds-focus:           #0F62FE; /* focus outlines */
  --cds-background:      #ffffff; /* page bg */
  --cds-layer-01:        #f4f4f4; /* surfaces */
  --cds-text-primary:    #161616;
  --cds-text-secondary:  #525252;
  --cds-support-error:   #DA1E28

Carbon ships a much longer token list -- see the Carbon theme tokens spec.

3. Component-level overrides

Most components accept a className prop that lands on the root element. Scope your own selectors against it:

<LoginForm

.my-sign-in button[type="submit"] {
  border-radius: 12px;
}

Custom domains + branding API

If you're using hosted Universal Login, set per-org branding via the Branding API. The hosted pages pick up logo, favicon, primary color, and custom CSS automatically.

For embedded components, the branding API values are NOT auto-applied; read them yourself:

import { useOrgBranding } 

Dark mode

<DesignSystemProvider

Pair with a theme toggle in your app's chrome:

import { useState } 

Related

• Accessibility
• Design system docs (internal)