Home / Design Your Hub / Theme Settings

Theme Settings

Themes can provide settings that allow you to modify the look and feel of the hub without touching code. This is ideal for common options such as branding, headlines, or frequently updating pieces of content. Themes that Clove provide will always come with settings to help make your set up experience as seamless as possible.

Access settings from the "Customize Theme" option on the Theme Management page.

Example Settings

The following images shows what the settings experience may look like. It depends on the particular theme as to what settings are available, if any at all.

In this example, you would be able to customize the page title, logo title, logo URL, primary brand color, and more.

Applying Settings

It's important to note that settings are immediately applied once you hit "Save & Make Live." Settings do not have a staging concept like themes do.

Developer Tip: Create Color Settings

If you're a developer who wants to create an easy way to update your hub's colors, we recommend that you create a setting for the color. For example, Clove defines a "Primary Brand" color for our Cardigan template.

In order to include the style in your hub, you can add the following snippet to the "head" template in the theme:

<style> :root { --theme-primary-brand: {{settings.theme_primary_brand}} } </style>

The name of the setting depends on what is included in the theme-settings.json file. With this, you can use the variable in your CSS like so:

.my-css-class { background-color: var(--theme-primary-brand); }