Theming
Choose a color preset and a light/dark mode for your widget.
Theming
Lumio's appearance is controlled by two settings, both configured in the Theme section of your widget's page in the dashboard.
Presets
A preset is a named set of colors that styles the launcher and panel — accents, backgrounds, and interactive elements. Choose the preset that best matches your product's brand.
Presets are selected in the dashboard. The change takes effect the next time the widget loads on your site (no re-embed needed).
Mode
| Mode | Behavior |
|---|---|
light | Always render in light mode |
dark | Always render in dark mode |
auto | Follow the user's OS preference (prefers-color-scheme) |
The default is auto.
Placement & launcher
The Placement & launcher section of the Appearance tab controls where the
launcher sits and how it looks — position (left/right), corner offsets, launcher
style (icon / text / iconAndText / manual), the icon glyph, and the button
text. Like the theme, these are dashboard-controlled and apply on every page that
embeds the widget. A snippet display option overrides them per-embed — see
Installing the Widget.
Applying changes
Appearance changes are dashboard-only — you don't need to update the embed snippet. The widget pulls the latest settings from Lumio on each page load.
What's on the roadmap
A fully custom launcher image upload and a custom brand color override are planned. For now, pick a preset for color and choose from the built-in icon glyphs.