Widget Themes & Colors

You can completely change the colors of the widget to match your website style. You can check out some sample themes (and corresponding widget code) in the Widget Demo.

1. Select 'Light' or 'Dark' base theme

First, decide whether you want the light or the dark version of the widget.

• Light Theme is the default. You do not have to do anything to get the default Light theme.
• To get the Dark Theme, just add the HTML attribute dark-theme, in the tag.

2. Change theme colors to match your website

After selecting a base color (Light or Dark), you can change any of its colors to match your own website theme.

You can change colors by setting the HTML attribute "theme-colors" in the tag with different color values in JSON format, as explained below.

eg:

The easiest way to match the widget to your own theme is by changing the Accent Color to match your website's primary or accent color. Change accent color by setting:

👍

Easiest Way To Match Your Website's Theme:

You can start by just changing the --accent-color to match your website's primary or accent color.

Please do not forget to also set the lighter version of your --accent-color.

Eg:

Here are the different color values that you can change. Please play around with these values to see how they affect the theme: