Does the chat widget support dark mode?

Yes. The storefront chat widget supports light mode, dark mode, and automatic appearance that follows the shopper’s system preference (light or dark OS/browser setting).

You configure this in the Shopify theme editor on the Simple Chat app block—the same place you set colors and border radius.

Appearance options explained

• Light mode — Widget uses a light palette regardless of the visitor’s device settings. Good when your storefront is consistently light and you want chat to match.
• Dark mode — Widget uses a dark palette for a night-friendly or dark-theme brand experience.
• Automatic (system preference) — Widget switches based on the customer’s device light/dark setting, useful when your theme supports both or shoppers split across modes.

Pick the option that matches how your theme presents the rest of the store; a jarring chat bubble undermines an otherwise cohesive design.

How to set dark mode (or auto) on your theme

1. Go to Online Store → Themes in Shopify Admin.
2. Click Customize on the theme that includes Simple Chat.
3. Select the Simple Chat app block.
4. Find the appearance / theme control (light, dark, or automatic).
5. Preview on mobile and desktop—toggle your device dark mode when testing automatic behavior.
6. Save the theme when the widget looks correct against your header and product pages.

If you operate multiple themes, configure each one that embeds the chat block.

Tips for readable widgets in both modes

• Contrast — After switching modes, send a test message and confirm AI and customer bubbles are readable.
• Brand colors — Saturated brand colors may need different hex choices in dark mode; use theme preview rather than assuming parity.
• Coordinate with Branding — Assistant name and avatar come from Branding settings; mode only changes shell and message chrome.

Dark mode support is native to the widget—you do not need a separate script or cookie banner toggle for chat alone when automatic mode is enabled.