Customize theme colors (basic)

All plans have options to change colors in theme designer. This article includes the basic theme color options available on all plans.

 ❗️ Note:  Pro plans have advanced color customization options. 

Who can use this feature?

👀 Creators, primary admins, and admins

🏳️ Available on all plans

Contents of this article:

• Color presets
• Accent
• Accessibility highlight
• Interface buttons
• Component buttons
• Text boxes
• Enhance readability

This guide shows you how to customize basic theme colors to control the look and feel of your lessons.

Color presets

There are a range of preset color palettes to choose from that are already tested for accessible color contrast. Color presets also allow you to choose a light or dark theme. If you don’t choose a preset, your theme will default to a ‘Light’ theme. After choosing a preset, you are still able to edit basic items to suit your branding or style. 

To choose a preset color palette, select the Color preset button, choose one of the options and select the Apply button.

 ❗️ Note:  Pro accounts can create and save their own color presets in their Color library.

Accent

The accent color displays on active or selected elements within a block. It also applies to feature text on the “Feature text” block type. The accent color is also used for a border around: 

• selected accordion buttons 
• selected question choices
• the dots on a carousel (indicates progress through the carousel).  

Accessibility highlight

The color you choose for accessibility highlights can be seen on elements of the page when using the tab on your keyboard to navigate through the content or when using a screen reader with highlights switched on. 

 ❗️ Note:  For accessibility compliance your accessibility highlight color should achieve at least WCAG 2.1 AA contrast to the backgrounds being used in your lessons.

Interface buttons 

The interface buttons are Menu, left right navigation buttons or scrolling block indicators. 

Component buttons

Component buttons are interactive elements included within the chosen block type. For example, the Next and Back buttons on a carousel, or a Submit button on a question, a play button on a video block.

Text boxes

Block types with text boxes can appear with a background behind the text to enhance readability if required. A default color will be chosen when you toggle the Text box background to ‘on’.

Text box color

Allows you to change the Fill Color as desired. This color can affect readability and user experience. It's important to choose a color that provides good contrast with the text to ensure that it’s easy to read.

Enhance readability

Blurs the background slightly to make it easier for learners to read the text