Moodle App Remote Themes

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

How to create your own theme

Due to a framework update (Ionic 1 to Ionic 3), Moodle app version 3.5 onwards is not compatible with the existing custom themes / styles. You can keep your current style sheet so they will work with the Moodle Classic app or old Moodle Mobile versions.

In order to do that, you just need to add this line at the end of your existing theme:

/* 3.5 styles */

And add below this line your 3.5 onwards styles.

See the following file for an example of a theme with styles for the old and new versions of the app:

https://gist.githubusercontent.com/crazyserver/ed49913ac40e606c8ce29696b1b3669f/raw/9ad3549140a77f01c86267c42b85e4fb2505577e/moodlemobileapp.css

This example above is not complete, there are many more colors and styles you can change. It has some clarifications and you can use it as an start for your personalization.

In order to create your own theme we recommend to use the proper webapp. Those will require Chrome or Chromium browser and use the inspection tool to check the classes you need to change. To test your theme loads corretly you should exit and enter the site again so the new file will be reloaded.

Moodle app 3.5.0 onwards (Ionic 3)

Webapp to test 3.5 onwards: https://mobileapp.moodledemo.net/

You can check Ionic version 3 documentation for more info: https://ionicframework.com/docs/

Moodle Classic (Ionic 1)

Sites using Moodle version 3.0 or lesser, should use Moodle Classic app.

Webapp to test classic app: https://prototype.moodle.net/mobile/webapp/

Note: Current Moodle Desktop is based on this app, soon it will be updated to use the same code (using Ionic 3).

You can check Ionic version 1 documentation for more info: https://ionicframework.com/docs/v1/

How remote themes work

1. When you enter a site in the app it checks if there's any file configured on mobilecssurl administration field on the site.
2. The app downloads and load the file.
   1. If the separator /* 3.5 styles */ is found it will load the css before or after depending on the version of the app you are running.
   2. If the separator is not found, it will load the whole css.
3. CSS selectors that contains the platform name (ios, md or wp) will only be used depending on the platform. If you want to apply it to every platform, add the three selectors.
   1. ios is for all apple platforms: including iPhone, iPad and macOS desktop app.
   2. md is for all material design platform: including Android phones and tablets, Chrome OS and Linux desktop app.
   3. wp is for all windows platforms: including Windows phone and Windows Store app.
   4. Example:

.toolbar-background-ios, .toolbar-background-md, .toolbar-background-wp {

 background: #5069A1;

}

Updating your theme in the app

You might see that, after editing your CSS file, the changes aren't reflected in the Mobile or Desktop app. The app only receives the URL of the CSS file, it doesn't receive its timestamp, so the only way it can tell if the CSS file has changed is if the URL changes. This means that the app will only update the file if the URL has changed.

To force a download of the file you can add a hash to the URL to indicate the version of the file. So if your CSS url is like:

https://mysite.com/mobile/mobiletheme.css

Then you can add the hash to the end of it with the version number:

https://mysite.com/mobile/mobiletheme.css#1

Every time you make some changes in the CSS and you want the file to be re-downloaded in the app, just increase this number.

Difference between remote themes and Branded apps

Remote theme styles can be tricky to modify. There are lots of css rules and some of them can change between versions. Using your own branded mobile app will have better style integrations because they use SaSS variables to change all the colors or styles. You can find more info on the Branded App page. Additionally, you will get your icon placed on all the apps stores and a fixed URL site.

You can play with that use the app variables, use sass to compile new css and use it as you personailzation.