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;

}

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.