Does the chat widget support dark mode?

Yes: light, dark, or automatic. Automatic follows the storefront, the page the widget sits on, not the shopper's OS or browser dark-mode setting. You configure it in the Shopify theme editor on the Simple Chat app block, the same place as colors and border radius.

The three appearance options

• Light mode: 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: a dark palette for a night-friendly or dark-theme brand experience.
• Automatic (system preference): matches a light or dark storefront. A light theme stays light even when the shopper's device is in dark mode, so chat controls stay readable. Dual-mode themes that actually switch the page to dark still get a dark widget.

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

Setting it

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 control and choose light, dark, or automatic.
5. Preview on mobile and desktop; to test automatic behavior, open a light product page with your device in dark mode.
6. Save when the widget looks correct against your header and product pages.

Multiple themes? Configure each one that embeds the chat block.

Checking the result

Contrast is the usual casualty, so after switching modes, send a test message and confirm both AI and customer bubbles are readable. Saturated brand colors may need different hex choices in dark mode; trust the theme preview rather than assuming parity. And note what this setting doesn't touch: the assistant's name and avatar come from Branding, while mode only changes the widget shell and message chrome.

Dark mode is native to the widget. With automatic enabled, you don't need a separate script or a cookie banner toggle for chat alone.