`color-scheme: normal` causes incorrect colors when embedded in pages with dark mode

### Description

The Front Chat widget sets `color-scheme: normal` on its container/iframe, which prevents it from properly inheriting the page's color scheme. This causes visual issues when embedding the widget in pages that use dark mode or have `color-scheme: light dark` set.

### Expected Behavior

The widget should respect the embedding page's color scheme by using `color-scheme: light dark` instead of `color-scheme: normal`.

### Current Behavior

The widget always renders with a forced color scheme that doesn't adapt to the page context, causing color mismatches and visual inconsistencies.

### Impact

This bug is currently **blocking a GitBook integration PR** that has been waiting for months:
- PR: https://github.com/GitbookIO/integrations/pull/1054
- - The GitBook team completed their fix (moving script injection from `<head>` to `<body>` per Front's documentation)
- - - During testing, this color-scheme issue was discovered as a blocker
- - - - Multiple customers (including Backpack) are waiting on this fix
### Suggested Fix

Change the CSS property from:
```css
color-scheme: normal;
```

To:
```css
color-scheme: light dark;
```

This allows the widget to support both light and dark color schemes based on the embedding context.

### Workaround

Until this is fixed in `chat.bundle.js`, consumers can inject a CSS override:

```javascript
const styleOverride = document.createElement('style');
styleOverride.textContent = `
  [data-front-chat-container],
  [data-front-chat-container] iframe {
    color-scheme: light dark !important;
  }
`;
document.head.appendChild(styleOverride);
```

### References

- GitBook Integration PR (blocked): https://github.com/GitbookIO/integrations/pull/1054
- - Front Chat Bundle: `https://chat-assets.frontapp.com/v1/chat.bundle.js`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`color-scheme: normal` causes incorrect colors when embedded in pages with dark mode #32

Description

Expected Behavior

Current Behavior

Impact

Suggested Fix

Workaround

References

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

color-scheme: normal causes incorrect colors when embedded in pages with dark mode #32

Description

Description

Expected Behavior

Current Behavior

Impact

Suggested Fix

Workaround

References

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`color-scheme: normal` causes incorrect colors when embedded in pages with dark mode #32