Themes offers a powerful way to manage subtle colour variations across your website projects. By grouping colours into themes, you gain granular control over the appearance of elements and text against various backgrounds, enhancing design precision and efficiency.

The colour values for each theme can be accessed and edited using the CSS variables panel in Webflow. In our free clonable starter template these names have been categorised into popular use cases to allow a high level of flexibility and control.

Once a theme value has been applied to the body or parent wrapper we can "paint" our page elements using the following class names. It's recommended to add these classes to the parent div and not directly to the text element itself (This method avoids duplicate classes when copy pasting).

Often during a website build one background colour is not enough. It important to have multiple backgrounds (Themes) as well as tints and shades that live inside each theme. We can use these colours on elements such as sidebars, cards, buttons and more.

For flexibility we include three buttons styles inside each colour theme. These colour values can be updated using the Webflow CSS Variables panel.

When working with text links always ensure colour classes are stacked on top of a ".text-link" class. This method allows us to adjust the link hover state without affecting other globals.

We can recolour borders by stacking classes on top of components. These combo classes only declare the border hex colour and not the width. This means we need to define the border width on the component class that's being targeted.

We use the following combo classes to apply colour to different form elements.