> ## Documentation Index
> Fetch the complete documentation index at: https://docs.remapdb.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS variable reference

> Remapdb widget CSS variables available for branding and custom CSS.

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:

```css theme={null}
:root {
  --rdb-primary-color: 202, 0, 0;
}
```

Incorrect:

```css theme={null}
:root {
  --rdb-primary-color: #ca0000;
}
```

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

```css theme={null}
--rdb-primary-color: 202, 0, 0;
```

For most component variables, hex colors are fine:

```css theme={null}
: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

```css theme={null}
--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

```css theme={null}
--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

```css theme={null}
--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

```css theme={null}
--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

```css theme={null}
--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

```css theme={null}
--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

```css theme={null}
--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.

```css theme={null}
--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 `%`.