While the base technologies used within Tui-based themes have changed, a number of theme features from older versions of Totara are still available. Totara 13's new Ventura theme provides a variable and override approach for other custom themes that inherit from Ventura. Ventura itself inherits the new Legacy theme, which provides a pathway to migration away from older technology, while retaining support for Totara Learn and applying a level of visual consistency with Totara Perform and Totara Engage.
Custom theme inheriting from Ventura
To create a new theme targeting the new features in Totara 13, you will need to create files in both the server and client directories. The naming convention for your custom theme must follow these rules:
- The name should start with one or more lowercase alpha characters (a-z).
- If there are any underscores:
- All characters before the first underscore need to be lowercase alpha characters (a-z).
- The character directly following the first underscore needs to be lowercase alpha (a-z), the following characters can be any combination of underscores and lowercase alphanumeric values.
- The name should end with lowercase alphanumeric values (a-z, 0-9).
The files you'll need are:
server/theme/mytheme/version.php (copy from the Ventura version.php and update the "version" and "component" fields)
If you want to enable the Theme Settings page for your custom theme, you'll also need to copy the following files from Ventura and update them to match your theme's name:
That takes care of the files in the server directory, but if we want to apply customisations to the Tui styling or components, we also need to create a folder in the client/component directory with the right files.
This can be done in one step by running
npm run tui-init theme_mytheme vendor (where
vendor is a unique string identifying your organisation. Lowercase is suggested for ease of typing - Totara internal components use "'totara" ' for example).
At this point you're now ready to start customising.
Follow the same steps as above, but remove "'ventura" ' from the array in config.php.
CSS is included in the following order:
- Legacy CSS.
- SCSS variables in the same order as below (typically not present as we prefer CSS variables for their greater flexibility).
- CSS variables and CSS from Tui core.
- CSS variables and CSS from each Tui component.
- CSS variables and CSS from each Tui theme.
- Theme customisations via UI - CSS variable overrides.
- Theme customisations - user-defined custom CSS.
Tips and known limitations