Advanced Website: Configuring theme colors

Theme colors allow you to define a color palette and link individual colors to any widget with color settings. Any element linked to the theme colors automatically updates when you change the linked color in the theme colors settings. This allows you to quickly make color changes, which reduces design time and ensures the site's style remains consistent across all pages.

Configure theme colors

Follow the steps below to manually set up your theme colors.

1. In the side panel, click Theme, then select the arrow next to Colors.
2. Click the Plus icon next to Primary, or whichever setting you need to define.
3. Type the HEX or RGB value of the desired color, or use the eye dropper tool to select a color.

3. (Optional) You can generate colors from your logo. Click to open the primary color, then open the Brand tab and click +Add Logo (if you added a logo to your Business Info in the Content Library, it will appear here). After adding your logo, a set of colors is generated.

   If you need to remove or replace the logo, click the three dot icon next to your logo and select either Remove or Replace Image. Note that you need Content Library permission to upload, remove, or replace the logo.

Repeat these steps as necessary for each theme color. Next, you need to connect the colors to widgets on your site.

Automatically configure theme colors

If the site or template does not have colors connected, Guesty can connect them automatically. The automatic theme colors generator scans your site to detect the most frequently used colors and generates a list for you to select from.

1. In the side panel, click Theme, then select the arrow next to Colors.
2. Click Set Theme Colors.
3. Click Connect it for me or I'll connect it myself.
4. (Optional) If you selected I'll connect it myself, click the Plus icon next to each color in the design panel and select the colors individually.
5. Select which of the generated colors you want to use.
8. Click Save & Connect Colors.

The colors will populate in the Colors section of the Site Theme panel.

Connect theme colors to widgets

Follow the steps below to link a specific widget to your theme palette.

1. Click a widget to open it’s settings menu.
2. Open the color settings and select one of the theme colors listed at the top.
3. Repeat as necessary for other elements.
4. (Optional) If you need to edit one of the theme colors, click the pencil icon and the theme colors settings will open where you can edit the desired color.

Once a widget is connected to theme colors it will automatically update when the linked theme color is updated.

Remove theme colors

You can disconnect widgets from individual theme colors or remove the colors from the palette entirely.

1. In the side panel, click Theme.
2. Click Colors.
3. Click the three horizontal dot icon next to the Colors text and select Remove theme colors.
4. Select which colors to remove, then click Remove Selected Colors.

Rename theme colors

Follow the instructions below to rename theme colors.

1. In the side panel, click Theme, then click Colors.
2. Hover over the desired color name and click the pencil icon.
3. Type a new name.

The new name is automatically saved and will appear when hovering over the color in the color picker.