> ## 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.

# AI widget styling context

> Context to give an AI assistant when generating Remapdb widget custom CSS.

Use this page when you want an external AI assistant, such as ChatGPT, Claude, Cursor, or Codex, to help generate custom CSS for the Remapdb widget.

Remapdb does not require a special AI assistant for styling. Your assistant only needs this styling context, the goal you want to achieve, and any brand colors or website examples you want it to follow.

## Copy this prompt

```text theme={null}
Read this Remapdb widget styling context:
https://docs.remapdb.com/widget/branding/ai-widget-styling-context

Generate only valid CSS for the Remapdb Custom CSS field.
Do not include <style> tags.
Prefer Remapdb CSS variables over deep selectors.
Use :root for light theme variables.
Use [data-bs-theme="dark"] for dark theme variables.
Use RGB channel values, not hex, for variables documented as RGB channels, for example --rdb-primary-color: 202, 0, 0;.
Keep selectors scoped to the widget iframe structure and avoid changing layout unless I ask for it.

Goal:
[describe the style you want]

Brand colors:
[add hex colors, fonts, or website URL]
```

## How widget styling is applied

The Remapdb widget is rendered inside an iframe. Custom CSS is injected into that iframe, after the default widget CSS and after the UI-based customizer variables.

The order is:

```text theme={null}
default widget theme CSS
customizer variables
custom CSS
```

This means Custom CSS can override values set in the UI customizer. When possible, ask the AI assistant to change `--rdb-*` variables first, then use selectors only for details that variables cannot cover.

## Theme model

Light theme variables go in `:root`.

```css theme={null}
:root {
  --rdb-widget-bg-2: #ffffff;
  --rdb-title-color: #17181c;
  --rdb-button-solid-bg: #17181c;
  --rdb-button-solid-color: #ffffff;
}
```

Dark theme variables go in `[data-bs-theme="dark"]`.

```css theme={null}
[data-bs-theme="dark"] {
  --rdb-widget-bg-2: #17181c;
  --rdb-title-color: #ffffff;
  --rdb-button-solid-bg: #ffffff;
  --rdb-button-solid-color: #17181c;
}
```

If the widget is set to **Auto**, Remapdb can switch the iframe theme based on the parent website theme. In that case, include both `:root` and `[data-bs-theme="dark"]` values.

## Recommended variables

Use these variables before targeting element classes:

```css theme={null}
:root {
  --rdb-widget-bg-2: #ffffff;
  --rdb-widget-bg-1: #f7f8fa;
  --car-specs-rdb-car-specs-bg-2: #ffffff;
  --rdb-title-color: #17181c;
  --rdb-table-color-1: #17181c;
  --rdb-table-color-2: #525b75;
  --rdb-form-control-bg: #ffffff;
  --rdb-form-control-color: #17181c;
  --rdb-form-control-border-color: #cbd0dd;
  --rdb-form-label-color: #525b75;
  --rdb-dropdown-bg: #ffffff;
  --rdb-dropdown-link-color: #17181c;
  --rdb-chip-bg: #eff2f6;
  --rdb-chip-color: #17181c;
  --rdb-button-solid-bg: #31374a;
  --rdb-button-solid-color: #ffffff;
  --rdb-button-outline-color: #31374a;
  --rdb-button-outline-border-color: #31374a;
  --rdb-modal-bg: #ffffff;
  --rdb-modal-color: #17181c;
  --rdb-border-radius: 0.125rem;
  --rdb-border-width: 1px;
}
```

See [CSS variable reference](/widget/branding/css-variable-reference) for the larger variable list.

## RGB channel variables

Some Remapdb variables are inserted into CSS like `rgb(var(--name))` or `rgba(var(--name), 0.25)`. These variables must contain only RGB channels, not a hex color.

Correct:

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

Incorrect:

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

If you want to use a hex color, set the final component variable instead:

```css theme={null}
:root {
  --rdb-button-solid-bg: #ca0000;
  --rdb-button-outline-color: #ca0000;
  --rdb-form-control-focus-border-color: #ca0000;
}
```

Common RGB-channel variables:

```css theme={null}
--rdb-primary-color
--rdb-br-primary
--utility-white
--gray-900
--dark-gray-800
```

Do not override derived aliases such as `--rdb-text-primary` unless you understand where they are used. Prefer changing `--rdb-primary-color` as RGB channels, or set final component variables such as `--rdb-title-color` and `--rdb-button-solid-bg`.

## Main widget structure

The initial widget view contains:

```html theme={null}
<div class="container-fluid" data-iframe-size>
  <div id="quoting-success">...</div>
  <div id="vehicle-quote"></div>

  <div id="vehicle-form-content">
    <div id="rdb-alert-info" class="alert alert-info">...</div>

    <div id="vehicle-form" class="row">
      <select id="vehicle-type" class="form-select component-size">...</select>
      <select id="brand" class="form-select component-size">...</select>
      <select id="model" class="form-select component-size">...</select>
      <select id="generation" class="form-select component-size">...</select>
      <select id="engine" class="form-select component-size">...</select>
      <button id="show-remap" class="btn btn-secondary component-size">View remap</button>
      <div id="rdb-alert-danger" class="alert alert-danger">...</div>
    </div>

    <div class="border-disclaimer2 text-disclaimer2">Powered by remapdb.com</div>
  </div>

  <div id="vehicle-content-placeholder" class="bg-widget-content-1 placeholder-glow">...</div>
  <div id="vehicle-content" class="bg-widget-content-1">...</div>
</div>
```

The vehicle details content is loaded dynamically after a vehicle is selected and **View remap** is clicked.

## Quote form structure

When quoting is enabled, the quote panel contains:

```html theme={null}
<div id="quote-title" class="bg-modal">
  <div class="modal-title text-modal">Request a quote</div>
  <button class="btn btn-link close-quote">...</button>
</div>

<form id="quote-form">
  <input id="quote-name" class="form-control component-size">
  <input id="quote-email" class="form-control component-size">
  <input id="quote-phone" class="form-control component-size">
  <input id="quote-location" class="form-control component-size">
  <input id="quote-reg" class="form-control component-size">
  <input id="quote-vin" class="form-control component-size">
  <select id="quote-service" class="form-select component-size">...</select>
  <select id="quote-dealer" class="form-select component-size">...</select>
  <textarea id="quote-text" class="form-control component-size"></textarea>
  <div id="quote-files">...</div>
  <button id="quote-submit" class="btn component-size">...</button>
</form>
```

Optional quoting features may add pricing, services, options, dealer map controls, file upload, and custom message areas.

## Useful selectors

Prefer variables first. Use selectors only for targeted adjustments.

```css theme={null}
/* Vehicle selector row */
#vehicle-form .form-select {}
#show-remap {}

/* Vehicle result area */
#vehicle-content {}
.text-title {}
.text-table-1 {}
.bg-widget-content-1 {}
.bg-car-spec2 {}
.brand-logo {}

/* Disclaimer */
.text-disclaimer2 {}
.border-disclaimer2 {}

/* Quote panel */
#vehicle-quote {}
#quote-title {}
#quote-form .form-control {}
#quote-form .form-select {}
#quote-submit {}
.quote-container {}
.quote-file-dropzone {}
.quote-custom-message {}

/* Feedback and placeholders */
#rdb-alert-info {}
#rdb-alert-danger {}
#quoting-success {}
#vehicle-content-placeholder {}
```

## CSS rules for AI assistants

Ask the assistant to follow these rules:

* Output CSS only.
* Do not include `<style>` tags.
* Prefer `--rdb-*` variables over raw Bootstrap class overrides.
* Use `202, 0, 0` format, not `#ca0000`, for RGB-channel variables such as `--rdb-primary-color`.
* Include both light and dark theme values when the widget can use Auto theme.
* Avoid global website selectors. The CSS runs inside the widget iframe, but broad rules still make future maintenance harder.
* Avoid `@import`, external `url(...)`, fixed positioning, very large `z-index`, and layout resets.
* Avoid hiding required controls, validation messages, quote fields, or the View remap button.
* Avoid changing IDs or relying on generated option IDs.
* Test on desktop and mobile after saving.

## Example: dark premium style

```css theme={null}
:root {
  --rdb-widget-bg-2: #0f1115;
  --rdb-widget-bg-1: #171a21;
  --car-specs-rdb-car-specs-bg-2: #0f1115;
  --rdb-title-color: #f8fafc;
  --rdb-table-color-1: #f8fafc;
  --rdb-table-color-2: #cbd5e1;
  --rdb-form-control-bg: #111827;
  --rdb-form-control-color: #f8fafc;
  --rdb-form-control-border-color: #374151;
  --rdb-dropdown-bg: #111827;
  --rdb-dropdown-link-color: #f8fafc;
  --rdb-chip-bg: #242936;
  --rdb-chip-color: #f8fafc;
  --rdb-button-solid-bg: #d6b25e;
  --rdb-button-solid-color: #111111;
  --rdb-button-solid-hover-bg: #e8c772;
  --rdb-modal-bg: #0f1115;
  --rdb-modal-color: #f8fafc;
  --rdb-border-radius: 0.25rem;
}

[data-bs-theme="dark"] {
  --rdb-widget-bg-2: #0f1115;
  --rdb-widget-bg-1: #171a21;
  --car-specs-rdb-car-specs-bg-2: #0f1115;
  --rdb-title-color: #f8fafc;
  --rdb-table-color-1: #f8fafc;
  --rdb-table-color-2: #cbd5e1;
  --rdb-form-control-bg: #111827;
  --rdb-form-control-color: #f8fafc;
  --rdb-form-control-border-color: #374151;
  --rdb-dropdown-bg: #111827;
  --rdb-dropdown-link-color: #f8fafc;
  --rdb-chip-bg: #242936;
  --rdb-chip-color: #f8fafc;
  --rdb-button-solid-bg: #d6b25e;
  --rdb-button-solid-color: #111111;
  --rdb-button-solid-hover-bg: #e8c772;
  --rdb-modal-bg: #0f1115;
  --rdb-modal-color: #f8fafc;
}

#show-remap,
#quote-submit {
  text-transform: uppercase;
  font-weight: 800;
}
```

## More references

* [Custom CSS styling](/widget/branding/custom-css-styling)
* [CSS variable reference](/widget/branding/css-variable-reference)
* [Widget HTML and selectors](/widget/branding/widget-html-and-selectors)