DIQTheme

Last updated 8/05/2026

Overview

The

DimensionIQWidget

supports extensive visual customization and runtime configuration through:

• DIQTheme
  - controls appearance and branding
• DIQWidgetConfig
  - controls widget behavior

Both options are supported by:

• DIQWidgetHost
  (React)
• DIQWidgetBridge
  (Vanilla JavaScript)

DIQTheme Example

DIQTheme

controls the visual appearance of the widget. Any omitted values automatically fall back to the default DimensionIQ theme.

import type { DIQTheme } from 'dimensioniq';

const myTheme: DIQTheme = {
    // Brand colours
    colorPrimary:          '#243B67',
    colorAccent:           '#E63428',

    // Backgrounds & surfaces
    colorBackground:       '#f5f7fb',
    colorSurface:          '#ffffff',
    colorSurfaceRaised:    '#ffffff',

    // Text
    colorText:             '#243B67',
    colorTextMuted:        '#4a5d7a',
    colorTextOnPrimary:    '#ffffff',

    // Borders & inputs
    colorBorder:           'rgba(36,59,103,0.10)',
    colorInputBackground:  '#ffffff',
    colorInputBorder:      'rgba(36,59,103,0.10)',
    colorInputFocusBorder: '#243B67',

    // Typography
    fontFamily:            '"Segoe UI", "Roboto", sans-serif',
    fontSizeBase:          13,

    // Shape
    borderRadius:          4,
    borderRadiusDialog:    6,

    // Inputs
    textFieldVariant:      'outlined',

    // Logo
    logoUrl:               'https://example.com/logo.png',
    logoHeight:            28
};

Theme Properties

Brand Colors

Property	Description
colorPrimary	Toolbar background and primary buttons
colorAccent	Action buttons, tab indicators, contained button fills

Backgrounds and Surfaces

Property	Description
colorBackground	Root/page background
colorSurface	Cards, dialogs, and panels
colorSurfaceRaised	Dropdowns, popovers, and tooltips

Text

Property	Description
colorText	Primary body text
colorTextMuted	Secondary/helper text
colorTextOnPrimary	Text shown on primary-colored surfaces

Borders and Inputs

Property	Description
colorBorder	General border color
colorInputBackground	Input field background
colorInputBorder	Input border color (idle state)
colorInputFocusBorder	Input border color (focused state)

Typography

Property	Description
fontFamily	Global widget font family
fontSizeBase	Base font size in pixels

Shape

Property	Description
borderRadius	Border radius for buttons, cards, and inputs
borderRadiusDialog	Border radius used for dialogs

Inputs

Property	Description
textFieldVariant	Input appearance style: outlined , filled , or standard

Logo

Property	Description
logoURL	Replaces the default DimensionIQ logo
logoHeight	Rendered logo height in pixels

Logo Assets

The widget logo can be supplied using either:

• Bundled application assets
• External URLs

Bundled Assets

When using a bundler such as Vite or webpack, import local image assets directly.

import logoURL from './assets/my-logo.svg';

const theme: DIQTheme = {
    logoURL,
    logoHeight: 32
};

External URL

const theme: DIQTheme = {
    logoURL: 'https://cdn.example.com/logo.png',
    logoHeight: 28
};

React - DIQWidgetHost

theme

is passed directly to the widget host component. It can be used in conjunction with

config

.

<DIQWidgetHost
    iframeURL="https://..."
    callbacks={callbacks}
    theme={myTheme}  
/>

The value is transmitted during the initial widget connection handshake. If the value changes after connection, the updated value is not automatically re-sent. To apply updated values, remount or reconstruct the host component.

Vanilla JS - DIQWidgetBridge

theme

can also be supplied when constructing

DIQWidgetBridge

. It can be used in conjunction with

config

.

const bridge = new DIQWidgetBridge({
    container: document.getElementById('widget-container'),
    iframeURL: 'https://...',
    callbacks,
    theme: myTheme
});

The value is sent once during the initial ready handshake.

Runtime Updates

DIQWidgetBridge

supports runtime updates using

sendCommand()

Apply a New Theme

bridge.sendCommand('applyTheme', myUpdatedTheme);