CSS variable reference

The widget theme is built around CSS variables. Use variables before overriding individual Bootstrap or utility classes. Light theme values should be placed in :root. Dark theme values should be placed in [data-bs-theme="dark"].

Important: RGB channel variables

Some variables are used inside CSS functions such as rgb(var(--rdb-primary-color)) or rgba(var(--rdb-primary-color), 0.25). These variables must contain only RGB channels. Correct:

:root {
  --rdb-primary-color: 202, 0, 0;
}

Incorrect:

:root {
  --rdb-primary-color: #ca0000;
}

If an AI assistant outputs --rdb-primary-color: #ca0000;, replace it with:

--rdb-primary-color: 202, 0, 0;

For most component variables, hex colors are fine:

:root {
  --rdb-button-solid-bg: #ca0000;
  --rdb-button-outline-color: #ca0000;
  --rdb-form-control-focus-border-color: #ca0000;
}

Variables exposed in the UI customizer

These variables are part of the widget customizer allowlist.

Free customizer variables

--rdb-widget-bg-2
--rdb-widget-bg-1
--car-specs-rdb-car-specs-bg-2
--rdb-button-solid-color
--rdb-button-solid-bg
--rdb-button-outline-color
--rdb-modal-bg
--rdb-button-solid-hover-color
--rdb-button-solid-active-color
--rdb-button-solid-disabled-color
--rdb-button-solid-active-bg
--rdb-button-solid-disabled-bg
--rdb-button-outline-hover-color
--rdb-button-outline-active-color
--rdb-button-outline-disabled-color
--rdb-button-outline-border-color
--rdb-button-outline-hover-border-color
--rdb-button-outline-active-border-color
--rdb-button-outline-disabled-border-color
--rdb-button-solid-hover-bg
--rdb-button-outline-hover-bg
--rdb-disclaimer1-color
--rdb-disclaimer1-border-color
--rdb-logo1-bg
--rdb-disclaimer2-color
--rdb-disclaimer2-border-color
--rdb-logo2-bg

Full customizer variables

--rdb-widget-bg-2
--rdb-widget-bg-1
--car-specs-rdb-car-specs-bg-2
--rdb-button-solid-color
--rdb-button-solid-bg
--rdb-button-link-color
--rdb-table-color-1
--rdb-title-color
--rdb-form-control-color
--rdb-form-control-placeholder-color
--rdb-form-control-disabled-color
--rdb-form-label-color
--rdb-form-validation-text-color
--rdb-form-control-bg
--rdb-form-control-disabled-bg
--rdb-form-control-border-color
--rdb-form-control-hover-border-color
--rdb-form-check-border-color
--rdb-chip-color
--rdb-chip-bg
--rdb-chart-color-2
--rdb-chart-border-color-1
--rdb-chart-border-color-2
--rdb-chart-axis-color
--rdb-chart-border-color-3
--rdb-dropdown-link-color
--rdb-dropdown-header-color
--rdb-dropdown-bg
--rdb-dropdown-link-hover-bg
--rdb-dropdown-link-active-bg
--rdb-border-radius
--rdb-border-width
--rdb-button-link-active-color
--rdb-button-link-hover-bg
--rdb-button-solid-hover-color
--rdb-button-solid-active-color
--rdb-button-solid-disabled-color
--rdb-button-solid-active-bg
--rdb-button-solid-disabled-bg
--rdb-button-outline-color
--rdb-button-outline-hover-color
--rdb-button-outline-active-color
--rdb-button-outline-disabled-color
--rdb-button-outline-border-color
--rdb-button-outline-hover-border-color
--rdb-button-outline-active-border-color
--rdb-button-outline-disabled-border-color
--rdb-button-solid-hover-bg
--rdb-button-outline-hover-bg
--rdb-form-control-focus-color
--rdb-form-control-focus-bg
--rdb-form-check-bg
--rdb-dropdown-border-color
--rdb-form-control-focus-border-color
--rdb-form-control-focus-shadow-out
--rdb-form-control-disabled-border-color
--rdb-form-check-bg-checked
--rdb-form-check-hover-bg-checked
--rdb-form-check-focus-shadow-out
--rdb-form-check-hover-bg
--rdb-dropdown-link-hover-color
--rdb-dropdown-link-active-color
--rdb-modal-color
--rdb-table-color-2
--rdb-modal-bg
--rdb-disclaimer1-color
--rdb-disclaimer1-border-color
--rdb-logo1-bg
--rdb-disclaimer2-color
--rdb-disclaimer2-border-color
--rdb-logo2-bg

Useful variable groups

Backgrounds

--rdb-widget-bg-1
--rdb-widget-bg-2
--car-specs-rdb-car-specs-bg-2
--rdb-bg-lightest
--rdb-bg-lighter
--rdb-bg-light
--rdb-bg-semi-light
--rdb-bg-mid-light
--rdb-bg-darker
--rdb-bg-darkest
--rdb-modal-bg
--rdb-dropdown-bg
--rdb-success-card-bg

Text

--rdb-title-color
--rdb-table-color-1
--rdb-table-color-2
--rdb-text-primary
--rdb-text-darker
--rdb-text-mid-dark
--rdb-text-mid
--rdb-text-lightest
--rdb-modal-color
--rdb-form-label-color
--rdb-form-validation-text-color
--rdb-disclaimer1-color
--rdb-disclaimer2-color

Buttons

--rdb-button-solid-bg
--rdb-button-solid-color
--rdb-button-solid-border-color
--rdb-button-solid-hover-bg
--rdb-button-solid-hover-color
--rdb-button-solid-active-bg
--rdb-button-solid-active-color
--rdb-button-solid-disabled-bg
--rdb-button-solid-disabled-color
--rdb-button-outline-bg
--rdb-button-outline-color
--rdb-button-outline-border-color
--rdb-button-outline-hover-bg
--rdb-button-outline-hover-color
--rdb-button-outline-hover-border-color
--rdb-button-link-bg
--rdb-button-link-color
--rdb-button-link-hover-bg
--rdb-button-link-hover-color

Forms and dropdowns

--rdb-form-control-bg
--rdb-form-control-color
--rdb-form-control-placeholder-color
--rdb-form-control-border-color
--rdb-form-control-hover-border-color
--rdb-form-control-focus-bg
--rdb-form-control-focus-color
--rdb-form-control-focus-border-color
--rdb-form-control-disabled-bg
--rdb-form-control-disabled-color
--rdb-form-control-disabled-border-color
--rdb-form-check-bg
--rdb-form-check-bg-checked
--rdb-form-check-border-color
--rdb-dropdown-bg
--rdb-dropdown-color
--rdb-dropdown-border-color
--rdb-dropdown-link-color
--rdb-dropdown-link-hover-bg
--rdb-dropdown-link-hover-color
--rdb-dropdown-link-active-bg
--rdb-dropdown-link-active-color

Chips, charts, alerts, and sizing

--rdb-chip-bg
--rdb-chip-color
--rdb-chart-color-2
--rdb-chart-border-color-1
--rdb-chart-border-color-2
--rdb-chart-border-color-3
--rdb-chart-axis-color
--rdb-alert-success-bg
--rdb-alert-success-color
--rdb-alert-info-bg
--rdb-alert-info-color
--rdb-alert-warning-bg
--rdb-alert-warning-color
--rdb-alert-danger-bg
--rdb-alert-danger-color
--rdb-font-size
--rdb-border-radius
--rdb-border-width

Full internal `--rdb-*` variable list

These variables are extracted from the current widget CSS. Some are lower-level implementation variables, so prefer the customizer variables above when possible.

--rdb-alert-danger-bg
--rdb-alert-danger-border-color
--rdb-alert-danger-color
--rdb-alert-danger-link-color
--rdb-alert-info-bg
--rdb-alert-info-border-color
--rdb-alert-info-color
--rdb-alert-info-link-color
--rdb-alert-offset
--rdb-alert-success-bg
--rdb-alert-success-border-color
--rdb-alert-success-color
--rdb-alert-success-link-color
--rdb-alert-warning-bg
--rdb-alert-warning-border-color
--rdb-alert-warning-color
--rdb-alert-warning-link-color
--rdb-bg-danger-light
--rdb-bg-danger-lighter
--rdb-bg-darker
--rdb-bg-darkest
--rdb-bg-info
--rdb-bg-light
--rdb-bg-lighter
--rdb-bg-lightest
--rdb-bg-mid-light
--rdb-bg-semi-light
--rdb-bg-success
--rdb-bg-warning
--rdb-border-radius
--rdb-border-width
--rdb-br-danger
--rdb-br-dark
--rdb-br-info
--rdb-br-light
--rdb-br-mid-light
--rdb-br-primary
--rdb-br-success
--rdb-br-warning
--rdb-button-link-active-bg
--rdb-button-link-active-border-color
--rdb-button-link-active-color
--rdb-button-link-bg
--rdb-button-link-border-color
--rdb-button-link-color
--rdb-button-link-danger-active-color
--rdb-button-link-danger-color
--rdb-button-link-danger-disabled-color
--rdb-button-link-danger-hover-color
--rdb-button-link-disabled-bg
--rdb-button-link-disabled-border-color
--rdb-button-link-disabled-color
--rdb-button-link-hover-bg
--rdb-button-link-hover-border-color
--rdb-button-link-hover-color
--rdb-button-link-success-active-color
--rdb-button-link-success-color
--rdb-button-link-success-disabled-color
--rdb-button-link-success-hover-color
--rdb-button-outline-active-bg
--rdb-button-outline-active-border-color
--rdb-button-outline-active-color
--rdb-button-outline-bg
--rdb-button-outline-border-color
--rdb-button-outline-color
--rdb-button-outline-disabled-border-color
--rdb-button-outline-disabled-color
--rdb-button-outline-hover-bg
--rdb-button-outline-hover-border-color
--rdb-button-outline-hover-color
--rdb-button-solid-active-bg
--rdb-button-solid-active-border-color
--rdb-button-solid-active-color
--rdb-button-solid-bg
--rdb-button-solid-border-color
--rdb-button-solid-color
--rdb-button-solid-disabled-bg
--rdb-button-solid-disabled-border-color
--rdb-button-solid-disabled-color
--rdb-button-solid-hover-bg
--rdb-button-solid-hover-border-color
--rdb-button-solid-hover-color
--rdb-chart-axis-color
--rdb-chart-border-color-1
--rdb-chart-border-color-1-rgb
--rdb-chart-border-color-2
--rdb-chart-border-color-3
--rdb-chart-color-2
--rdb-chip-bg
--rdb-chip-color
--rdb-disclaimer1-border-color
--rdb-disclaimer1-color
--rdb-disclaimer2-border-color
--rdb-disclaimer2-color
--rdb-dropdown-bg
--rdb-dropdown-border-color
--rdb-dropdown-color
--rdb-dropdown-divider-bg
--rdb-dropdown-header-color
--rdb-dropdown-link-active-bg
--rdb-dropdown-link-active-color
--rdb-dropdown-link-color
--rdb-dropdown-link-danger-color
--rdb-dropdown-link-danger-hover-color
--rdb-dropdown-link-disabled-color
--rdb-dropdown-link-hover-bg
--rdb-dropdown-link-hover-color
--rdb-font-size
--rdb-form-check-bg
--rdb-form-check-bg-checked
--rdb-form-check-border-color
--rdb-form-check-color
--rdb-form-check-focus-shadow-out
--rdb-form-check-hover-bg
--rdb-form-check-hover-bg-checked
--rdb-form-control-bg
--rdb-form-control-border-color
--rdb-form-control-color
--rdb-form-control-disabled-bg
--rdb-form-control-disabled-border-color
--rdb-form-control-disabled-color
--rdb-form-control-error-border-color
--rdb-form-control-error-focus-shadow-out
--rdb-form-control-focus-bg
--rdb-form-control-focus-border-color
--rdb-form-control-focus-color
--rdb-form-control-focus-shadow-in
--rdb-form-control-focus-shadow-out
--rdb-form-control-hover-border-color
--rdb-form-control-placeholder-color
--rdb-form-label-color
--rdb-form-radio-bg-checked
--rdb-form-section-color
--rdb-form-validation-error-color
--rdb-form-validation-text-color
--rdb-logo1-bg
--rdb-logo2-bg
--rdb-modal-bg
--rdb-modal-color
--rdb-offcanvas-footer-height
--rdb-offcanvas-header-height
--rdb-placeholder-bg
--rdb-primary-color
--rdb-success-card-bg
--rdb-success-card-color-1
--rdb-success-card-color-2
--rdb-table-color-1
--rdb-table-color-2
--rdb-text-danger-dark
--rdb-text-danger-light
--rdb-text-darker
--rdb-text-lightest
--rdb-text-mid
--rdb-text-mid-dark
--rdb-text-primary
--rdb-text-success-dark
--rdb-text-success-light
--rdb-title-color
--rdb-tooltip-bg
--rdb-tooltip-color
--rdb-widget-bg-1
--rdb-widget-bg-2

Notes for AI assistants

Prefer variables that describe the result, such as --rdb-button-solid-bg, over low-level aliases such as --rdb-bg-darker.
Some variables expect RGB channel lists because they are used in rgb(var(...)), for example --rdb-primary-color: 202, 0, 0;.
Most color variables accept hex, RGB, RGBA, HSL, or another CSS variable.
Sizing variables should use CSS units such as px, rem, or %.

Get started

Widget

Important: RGB channel variables

Variables exposed in the UI customizer

Free customizer variables

Full customizer variables

Useful variable groups

Backgrounds

Text

Buttons

Forms and dropdowns

Chips, charts, alerts, and sizing

Full internal `--rdb-*` variable list

Notes for AI assistants

​Important: RGB channel variables

​Variables exposed in the UI customizer

​Free customizer variables

​Full customizer variables

​Useful variable groups

​Backgrounds

​Text

​Buttons

​Forms and dropdowns

​Chips, charts, alerts, and sizing

​Full internal --rdb-* variable list

​Notes for AI assistants

Important: RGB channel variables

Variables exposed in the UI customizer

Free customizer variables

Full customizer variables

Useful variable groups

Backgrounds

Text

Buttons

Forms and dropdowns

Chips, charts, alerts, and sizing

Full internal `--rdb-*` variable list

Notes for AI assistants