Theme Editor

The theme editor gives you visual controls to customize how your course looks. Change colors, fonts, spacing, and layout without writing any code.

Opening the theme editor

Open the theme editor from your course’s settings or management page. It opens as a full-page editor with a sidebar for navigation and a live preview of your changes.

Editor sections

The theme editor sidebar has five sections:

• Colors - set your primary, hover, and border colors
• Fonts - choose heading and body typography
• Layout - adjust border radius, spacing, and course behavior toggles
• Templates - apply a pre-built theme preset
• Custom CSS - write your own CSS overrides

Click a section in the sidebar to edit its settings. See the individual pages in this section for details on each.

Live preview

The editor shows a live preview that updates as you change settings. You can see how your colors, fonts, and layout will look in the finished course before publishing.

Saving changes

Changes auto-save as you work. There’s no manual save button needed - Slate saves your settings automatically after each change.

Layout toggles

The Layout section includes behavioral toggles that control how learners interact with your course:

• Scroll Indicator - show a scroll-down arrow when lesson content overflows the viewport
• Course Search - enable or disable the search feature in the player sidebar
• Locked Navigation - require learners to complete lessons in order before progressing
• Assessment Autoscroll - automatically scroll to the next question after answering in assessment sections. Enabled by default. When disabled, the next question is still unlocked and focused for keyboard accessibility, but the page does not scroll
• Exit Course Button - show an “Exit Course” button at the bottom of the sidebar when the course is viewed in an LMS. When a learner clicks the button, their progress is saved, the SCORM session is closed, and the browser tab is closed. If the LMS launched the course in the same tab (so the tab can’t be closed), a confirmation message is shown instead. Disabled by default. Available on all plans

These toggles are saved with your default theme and preserved when importing or duplicating courses.

Theme presets

Save named theme presets and reuse them across courses. Presets capture everything in the theme editor: colours, fonts, layout, custom CSS, logo, and behavioural settings.

Saving a preset

1. Configure your theme settings across any section (Colors, Fonts, Layout, Templates, Custom CSS)
2. Click Save Theme in the header
3. Enter a name and click Save
4. To update an existing preset with your current settings, click Update next to it

Applying a preset

1. Click the menu button (three dots) in the header
2. Hover My Presets to see your saved presets
3. Click a preset name to apply it — a confirmation shows what will change

Setting a default

Click the star icon next to any preset in the My Presets submenu to mark it as your default. New courses (including AI-generated courses) will start with your default preset applied.

Limits

• Free plan: 1 saved preset
• Standard and Pro plans: Up to 10 saved presets

Users who downgrade keep all existing presets but cannot create new ones beyond the free limit.

Managing presets

Click Manage Presets from the menu to rename, delete, set defaults, or export individual presets.

Export and import themes

Export your theme as a JSON file and import it into another course:

• Export — click Export Theme from the menu to download a .json file
• Import — click Import Theme from the menu and select a file. Choose to apply it directly or save it as a preset for reuse across courses

Theme export/import covers all theme settings: colours, fonts, spacing, layout mode, behavioural toggles, and custom CSS.