Choose the widget's theme and accent in the admin panel. Ask your website developer to use CSS variables for fonts, spacing and other styling.
Note: Website widgets V2 are scheduled to launch on 1 November 2026. These steps apply once V2 is available in your event.
Choose the look in Widgets
Open Widgets and select the widget type.
Under Look > Theme, choose Follow the event, Light or Dark.
Open Accent colour to choose the color used for buttons, links and selected items.
Check Desktop and Phone previews. Open a detail dialog if the widget offers one.
Select Copy embed code, or Share with developer, and update the website.
Follow the event follows the event's light or dark theme. Choosing Light or Dark overrides that choice for this widget.
To remove your custom accent, select Use the event’s colour next to the color control. This restores the event-derived accent for the selected theme. It does not change Theme: select Follow the event separately if needed.
The builder's changes do not update code already installed on your website. Copy or share again after changing them.
Give styling instructions to your developer
Send the developer link with your website font and preferred colors. Ask the developer to open Styling for the supported CSS variables and use those instead of internal component class names.
Developer example
Put this in the site's stylesheet. It uses a system font, a purple accent, smaller corners and adjusted spacing. Change the values to match your design.
.brella {
--brella-font-family: system-ui, sans-serif;
--brella-color-accent: #6d28d9;
--brella-color-accent-contrast: #ffffff;
--brella-radius-md: 4px;
--brella-modal-radius: 4px;
--brella-space-4: 18px;
}
.brella[data-theme="light"] {
--brella-color-accent-text: #6d28d9;
}
.brella[data-theme="dark"] {
--brella-color-accent-text: #c4b5fd;
}
--brella-color-accent-contrast controls text on an accent background. --brella-color-accent-text controls the accent used as text, including links. Check both against the actual backgrounds; changing the CSS accent alone does not choose those colors for you.
If you choose a custom font, load it on the website as well. Setting the font-family variable does not download a font.
The shared page lists the full variable reference. Internal classes and markup can change, so avoid styling individual generated elements to reproduce what a supported variable already controls.
Include dialogs
Use .brella or a theme selector such as .brella[data-theme="dark"] for shared styles. Detail dialogs render outside the widget container, with their own .brella scope and matching theme.
A selector such as #my-section .brella may style the embedded view while missing its dialog. If widgets need different accents or themes, use each widget's Look settings. Check the result before adding more specific CSS.
Custom .brella CSS variables override the widget's built-in color defaults, including its event-derived accent. If a builder change seems to have no effect, check the site's CSS overrides.
Check before sharing
Reload the installed page after the CSS update.
Check buttons, links, selected items and readable text in the chosen theme.
Open a detail dialog and check the same colors and font.
Check desktop and phone widths, including long titles.
For a ticket shop, check Details and Review on the installed website without submitting an order.
To undo custom styling, remove the added variable overrides from the site's stylesheet. To undo builder choices, reset the accent and choose Follow the event, then copy the updated embed.