Modern UI
Buy Modern UI

Modern UI documentation

Modern UI Theme Guide

Build a Moodle experience that feels unmistakably yours.

Modern UI is a configurable Boost child theme for Moodle 4.5 and later. This guide takes you from a clean installation to a complete visual system—without Moodle core edits.

Start here

Take these three steps in order for the most predictable setup.

  1. 1
    Install the theme

    Place the clean release folder in theme/modernui and complete the Moodle upgrade.

    Go to installation →
  2. 2
    Add your brand

    Choose a preset or set your logo, colours, typography, and layout.

    Customise appearance →
  3. 3
    Shape the experience

    Select navigation, footer, course, dashboard, and login presentations.

    Explore the guide →

01

Installation

Modern UI requires Moodle 4.5 or later, the bundled Boost parent theme, and a PHP/database combination supported by your Moodle release.

  1. Back up first.Back up your Moodle code, database, and moodledata before changing a production site.
  2. Use a clean theme folder.Replace the existing directory with the release archive’s modernui directory. Do not merge over an older copy.
  3. Run the Moodle upgrade.From your Moodle root, use the official CLI command below.
Terminal
php admin/cli/upgrade.php --non-interactive
php admin/cli/purge_caches.php

02

Appearance

Open Site administration → Appearance → Themes → Modern UI. Start with a brand preset, then adjust only the settings your organisation needs.

6starter brand presets
3font source modes
AAcontrast guidance

Recommended order

  • Upload light and dark logo variants.
  • Choose primary, text, surface, and focus colours.
  • Select system, Google, or uploaded typography.
  • Review the result in both light and dark presentation where enabled.

05

Learning experience

Configure dashboards, course catalogues, course cards, profiles, H5P presentation, and page templates around the learner’s next action. Page design remains permission-aware in Design this page on the target page while editing is enabled.

06

Login page

Select a login presentation that suits your audience and authentication flow. Always test manual login, external identity providers, password reset, and error messages before publishing a new design.

Explore the live login style gallery →

07

Accessibility

Use the built-in contrast feedback, keep focus-visible states distinct, provide meaningful image alternatives, and test the full learner path with keyboard-only navigation. Reduced-motion preferences are respected by supported effects.

08

Advanced

Add custom CSS only after exhausting the theme settings, and document every override for future upgrades. Advertising supports managed image/video campaigns and a structured Google AdSense provider; establish consent before allowing third-party requests.