Moodle 5 Theme Development

Skill for creating and modifying Moodle 5.1.3+ themes based on Boost (Bootstrap 5.3).

Quick Context

Moodle 5.1+ uses Bootstrap 5.3, themes reside under public/theme/, and layout inheritance from the parent theme is automatic. The SCSS pipeline has three phases: pre-SCSS → main (preset) → extra-SCSS. Templates use Mustache with Moodle-specific helpers ({{#str}}, {{#pix}}, {{#js}}).

Workflow

1. Understand What the User Needs

Before generating code, determine:

• New or existing theme? If new, generate the complete scaffolding. If existing, ask for the theme name (Frankenstyle component theme_name).
• What do they want to change? Styles/colors (→ SCSS), page structure (→ templates/layouts), admin options (→ settings), rendering behavior (→ renderers), icons/images (→ pix_core/pix_plugins).
• Theme name: The Frankenstyle identifier (theme_mytheme) that will be used across all files.

2. Consult the Appropriate Reference