Remote theme not loading in branded app

Remote theme not loading in branded app

Javier Tejera -
Number of replies: 4

Moodle app version 3.9.4.3 (branded)
Moodle version 3.10.3

I have created a remote theme. For testing purposes, I am just changing the notification's colour of the main menu, and it works perfectly fine on master.apps.moodledemo.net (accessing via Chromium as per here):

ion-tab-bar.mainmenu-tabs{
  --core-bottom-tabs-badge-color: white !important;
}

However, the actual app does not load it (testing it on an Android smartphone, if this is important). I purched caches, logged out and in, deleted the app and reinstall it again, but not working.

Any suggestions?

Thanks

Average of ratings: -
In reply to Javier Tejera

Re: Remote theme not loading in branded app

Javier Tejera -

I've created a new class and it does work perfectly fine on both the branded app and master.apps.moodledemo.net.This is the new CSS class:

.badge-danger { color: #fff; background-color: #ca3120; }

So, the ion codes work only on master.apps.moodledemo.net, but *not* on the branded app. Any idea what I am doing wrong?

Average of ratings: -
In reply to Javier Tejera

Re: Remote theme not loading in branded app

Javier Tejera -
Fixed. The issue was that Ionic 5 starts at version 3.9.5 and my branded app is 3.9.4. Explained here.
Average of ratings: -
In reply to Javier Tejera

Re: Remote theme not loading in branded app

Neal Young -
Hello, Javier. I'm upgrading my branded app from 3.9.4 to 4.0.0. I'm not sure have you upgrade it now. The written codes I put in mobilecssurl cannot be working for a remote theme. Especially, it cannot load my dark theme and light theme complied by own mobiletheme.php file. Do you have an example code for sharing your mobiletheme.php related to mobilecssurl.

My example like below: <?php
require_once __DIR__ . '/../../config.php';
/*** set the content type header ***/
header("Content-type: text/css");

$primary = get_config('local_prebranding', 'primarycolour');
$secondary = 'white';
$secondaryDark = "#999999";
$shadowDark = "#262626";
$shadowLight = '#969696';
?> .scheme-light .pre_button_bottom{
position: absolute;
bottom: 35px;
left: 150px;
color: white !important;
padding: 10px;
border-radius: 7px;
background: <?php echo $primary; ?>;
box-shadow: 5px 5px 10px #bdbdbd, -5px -5px 20px #ffffff;
text-decoration: none;
}
.scheme-dark .pre_button_bottom{
position: absolute;
bottom: 35px;
left: 150px;
color: #FFFFFF !important;;
font-weight: bolder;
padding: 10px;
border-radius: 7px;
background: <?php echo $primary; ?>;
box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 20px #646464;
text-decoration: none;
}

.scheme-light / dark normally can change the styling when users want to switch their color models. But right now, it cannot be working on 4.0 Moodle app.
If you successfully use Ionic 5 fix your issues, may I ask how do you use it for color themes.
Please help, many thanks !
Average of ratings: -
In reply to Neal Young

Re: Remote theme not loading in branded app

Javier Tejera -
Hi Neal,

I am afraid we are still at 3.9.4. We are planning to go for 4.0 late this year, around October. 

Regarding examples, everything here (scroll down and left column code) works for me. Our main theme is hardcoded, so we just use mobilecssurl for very specific things that we want to quickly change without waiting for an upgrade. For example, change the notification color:

core-ion-tabs .tab-badge.badge {
    color: white;
    background: red!important;
}
Javier
Average of ratings: -