Moodle App Remote Themes Upgrade Guide
This template is unused and can be deleted.
In the following guide you will find some examples to migrate your styles to apply ionic5 based Moodle app (3.9.5). It contains tables where each row is a migration to do, the left part is the old code and the right part the new one.
We recommend that you prepend your old CSS rules (see ‘Before starting the migration’), by doing so users that are still using Moodle App 3.9.4 (or earlier versions) will see the same styling you had until now.
Before starting the migration
- Remove all styles using ionic classes ending with -wp (Windows Phone is not supported therefore it’s not necessary to specify it)
- Check the theme file (link can change in the future) where almost all variables are specified.
- As in the previous version, do not use any Saas variable (the ones starting with $). But you can use CSS3 ones (starting with --)
- We recommend prepending all css rules with body.ionic5 in order to make them only available for ionic5 and the old ones prepend them with body:not(.ionic5) for the previous versions of the Moodle App (3.9.4, 3.9.3, and so on).
- Be aware that example rules may differ from your css that could be more specific.
How to inspect the app styles and CSS
We recommend you to install the Chromium browser and follow this guide: Moodle Mobile development using Chrome or Chromium
For opening the new version of the app you can use this link: [1]. This link can change in a near future.
Please, notice that it is very important to launch the browser with the indicated flags in the previous document, otherwise your custom CSS will not load.
Platform based styles
To apply a variable or a rule only to iOS or Android, prepend the whole rule with html.ios for ios or html.md for android devices. Note the correct rule is to place html before body.
Dark mode styles
To apply a variable or a rule only to dark mode, prepend the rule with body.dark.
Example, toolbar background color on ios dark mode:
html.ios body.ionic5.dark {
--core-header-toolbar-background: red;
}
Bear in mind that you can disable Dark Mode for all your users following Moodle app guide for admins (Disabled features)
Shadow DOM
Ionic is a set of web components and shadow DOM is a way to encapsulate them and make them a little less transparent to the developer and user (hiding markup structure, style, and behavior) but avoiding clash when using them.
This makes it more difficult to personalize and change some parts of those components. However you can check the Ionic documentation of each to check the parts that are customizable.
Example, to change ion-button:
- Check shadow parts that you can access.
You can style “native” part this way:
ion-button::part(native) {
text-transform: none;
}
- Check css exposed variables:
You can change all buttons background, or just the ones with an specific class:
ion-button {
--background: red;
}
ion-button.specific {
--background: yellow;
}
