Chatbox Color Playground
Each mascot keeps independent light & dark colours. Nothing here follows the site theme.
Recolours Glow and the chatbox UI in light mode. Rename a theme to match the integration it belongs to.
Click a theme to apply it, drag to reorder, ✎ to rename.
Only the selected mascot's controls are shown below. Other mascots keep their own colours.
☀️ Light mode coloursshowing in preview
🌙 Dark mode colours
Only affects Glow. Size, animation and behaviour are untouched.
Styles the support widget itself, independently of the mascot. Switch to the LIVE Chat Bubble Preview tab to see these applied.
Palettes (light mode)
☀️ Light custom hex
Preview background
Code
Covers the selected mascot (Glow) only, so it stays clean to paste.
CONTAINER BACKGROUND
Light: #ffffff
Dark: #0f172a
CHATBOX UI
Light:
Header #6D28D9
Header text #FFFFFF
Chat background #F8F7FC
Bot bubble #FFFFFF
Bot bubble text #171429
User bubble #6D28D9
User bubble text #FFFFFF
Scrollbar #C9C4DC
Dark:
Header #4C1D95
Header text #FFFFFF
Chat background #16132A
Bot bubble #221E3C
Bot bubble text #EDEAF7
User bubble #7C3AED
User bubble text #FFFFFF
Scrollbar #4A4270
SPEECH BUBBLE
Light: BG #1E1B4B | Text #A78BF7 | Border #7C6EBE
Dark: BG #0A091B | Text #A78BF7 | Border #6D5FA0
MASCOT — Glow (Bottom mascot (launcher))
Light:
Primary: #4A4569
Secondary: #2F2B50
Highlight: #6EE7F9
Glow: #A78BF7
Accent: #A78BF7
Outline: #1E1B4B (default)
Dark:
Primary: #302C4E
Secondary: #1C1936
Highlight: #6EE7F9
Glow: #A78BF7
Accent: #A78BF7
Outline: #0A091B (default)
Theme: none selected
Accessibility Mode: OFF (gradients)Save your progress
Edits already save automatically in this browser. Download a progress file to keep a backup or continue on another machine.
Live preview
Bubble on the left, mascot on the right. Toggling ☀️/🌙 swaps each mascot to its own light variant.