Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Moodle App Remote Themes Upgrade Guide: Difference between revisions

From MoodleDocs
Moodle App

Upgrade from previous versions:

For user documentation see Moodle Mobile

No edit summary
(Update migration status and path)
 
(14 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Template:Ionic5}}
{{Template:Migrated|newDocId=/general/app/upgrading/remote-themes-upgrade-guide}}
{{Moodle App (Ionic 5)}}


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.
In the following guide, you will find some examples to migrate your styles from an older version to work with the Ionic 5 Moodle App (starting at version 3.9.5). You will find 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.
We recommend that you keep your old CSS rules for older versions (see [[#Before_starting_the_migration|Before starting the migration]]), by doing so users who are still using Moodle App 3.9.4 and earlier will see the same styling you had until now.


==Before starting the migration==
== 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)
# Remove all styles using ionic classes ending with <code>-wp</code> (Windows Phone is not supported, therefore it’s not necessary to specify it).
# Check [https://github.com/moodlehq/moodleapp/blob/ionic5/src/theme/theme.light.scss the theme file (link can change in the future)] where almost all variables are specified.
# Check [https://github.com/moodlehq/moodleapp/blob/master/src/theme/theme.light.scss the theme file], where most 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 --)
# As in the previous version, do not use any Saas variables (the ones starting with <code>$</code>). But now you can use [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties CSS custom properties] (the ones starting with <code>--</code>).
# 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).
# We recommend prepending all CSS rules with <code>body.ionic5</code> in order to make them only available for Ionic 5, and prepending the old ones with <code>body:not(.ionic5)</code> 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.
# Be aware that example rules may differ from your CSS, which could be more specific.


=== How to inspect the app styles and CSS ===
=== How to upgrade my theme ===


We recommend you to install the Chromium browser and follow this guide: [[Moodle Mobile development using Chrome or Chromium]]
You can follow the same process that is documented in the [[Moodle App Remote Themes#How_can_you_create_your_own_theme.3F|Moodle App Remote Themes]] page.


For opening the new version of the app you can use this link: [https://ionic5.apps.moodledemo.net/]. This link can change in a near future.
Make sure to read it in order to understand how to style your application for newer versions of the app. If you're upgrading your styles, it is likely that the documentation has been updated since you read it.


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.
== Colors ==


=== Platform based styles ===
The main color in the app is Moodle Orange, but you can now change it by using the <code>--brand-color</code> variable. This will probably reduce the CSS you are applying right now, but this only covers the main color.


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.
For other colors, check out [[Moodle App Remote Themes#Working_with_colors|the colors section in the main documentation]].


===Dark mode styles===
==Header toolbar==
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:
On the header toolbar, we’ve added a bottom border that you can disable.


<code css>
===Border width and color (new)===
html.ios body.ionic5.dark {
<syntaxhighlight lang="css">
     --core-header-toolbar-background: red;
ion-header ion-toolbar {
}</code>
     --core-header-toolbar-border-width: 2px; /* Use 0 to disable it */
 
    --core-header-toolbar-border-color: yellow;
Bear in mind that you can disable Dark Mode for all your users following [https://docs.moodle.org/en/Moodle_app_guide_for_admins#Disabled_features 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 [https://ionicframework.com/docs/components 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:
 
<code css>
ion-button::part(native) {
    text-transform: none;
}</code>
 
# Check css exposed variables:
You can change all buttons background, or just the ones with an specific class:
 
<code css>
ion-button {
    --background: red;
}
}
 
</syntaxhighlight>
ion-button.specific {
    --background: yellow;
}</code>
 
====More information about shadow DOM:====
* [https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM Using shadow DOM - Web Components | MDN]
* [https://ionicframework.com/docs/theming/css-shadow-parts CSS Shadow Parts - Ionic Documentation]
* [https://ionicframework.com/blog/shadow-dom-in-ionic-and-why-its-awesome/ Shadow DOM in Ionic (and Why it's Awesome) - Ionic Blog]
 
== Main colors ==
The main color in the app is Moodle orange, but you can change it just using:
 
<code css>
--brand-color: red;</code>
 
This will probably reduce all the css you are applying right now.
===Named Colors===
 
--blue, --red, --green, --yellow, --turquoise, --purple but you’ll have to define also the variants: --blue-light, --blue-dark, --red-light, --red-dark, and also for green and yellow (purple and turquoise don’t use any variant).
 
===Purpose colors===
* --primary (brand-color)
* --danger (red)
* --warning (yellow)
* --success (green)
* --info (blue)
* --light (gray-lighter)
* --medium (gray-light)
* --dark (black)
 
For those you’ll have to define also some variants, ie, primary color:
 
* --ion-color-primary-rgb: RGB list of the color, ie 245, 233, 222;
* --ion-color-primary-contrast: Black or white depending on which color gives more contrast.
* --ion-color-primary-contrast-rgb: RGB version of the contrast color: 0, 0, 0 or 255, 255, 255
* --ion-color-primary-shade: Slightly darker color. (mix 12% of black)
* --ion-color-primary-tint: Slightly lighter color. (mix 10% of white)
 
There are limitations on copying those colors (blue, red) to the purpose colors (primary, secondary, success, etc) and, the changes won’t apply to both of them so you’ll have to define all the variables to have a complete change.
 
===Page background===
<code css>
--background-color: white;
--ion-background-color-rgb: 255, 255, 255; // Need to be translated to rgb.</code>
===Main text color===
<code css>
--text-color: black;
--ion-text-color-rgb: 0, 0, 0; // Need to be translated to rgb.</code>
 
Color used in categories and secondary content.
<code css>
--subdued-text-color: gray;</code>
 
Links color
<code css>
--core-link-color: blue;</code>
 
==Header toolbar==
On the header toolbar, we’ve added a bottom border that you can disable.


===Background===
===Background===
{| class="wikitable" border="1"
{| class="wikitable" border="1"
|-
|-
| <code css>
| <syntaxhighlight lang="css">
.toolbar-background-md,
.toolbar-background-md,
.toolbar-background-ios {
.toolbar-background-ios {
     background: red;
     background: red;
}</code>
}</syntaxhighlight>
| <code css>--core-header-toolbar-background: red;</code>
| <syntaxhighlight lang="css">
ion-header ion-toolbar {
    --core-header-toolbar-background: red;
}</syntaxhighlight>
|}
|}


Line 134: Line 55:
{| class="wikitable" border="1"
{| class="wikitable" border="1"
|-
|-
| <code css>
| <syntaxhighlight lang="css">
.toolbar-title-md,
.toolbar-title-md,
.toolbar-title-ios {
.toolbar-title-ios {
     color: red;
     color: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-header-toolbar-color: red;</code>
| <syntaxhighlight lang="css">
ion-header ion-toolbar {
    --core-header-toolbar-color: red;
}</syntaxhighlight>
|-
|-
| <code css>
| <syntaxhighlight lang="css">
.toolbar-title-md,
.toolbar-title-md,
.toolbar-title-ios {
.toolbar-title-ios {
     font-weight: normal;
     font-weight: normal;
}
}
</code>
</syntaxhighlight>
| <code css>ion-header ion-toolbar.in-toolbar h1,
| <syntaxhighlight lang="css">ion-header ion-toolbar.in-toolbar h1,
ion-header ion-toolbar.in-toolbar h2 {
ion-header ion-toolbar.in-toolbar h2 {
     font-weight: normal;
     font-weight: normal;
}
}
</code>
</syntaxhighlight>
|}
 
==Bottom tab bar (main menu)==
===Background===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">.tabs-md .tabbar,
.tabs-ios .tabbar {
    background: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">
ion-tab-bar.mainmenu-tabs {
    --core-bottom-tabs-background: red;
    --core-bottom-tabs-background-selected: transparent;
}
</syntaxhighlight>
|}
===Tab icon color===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">.tabs-md .tab-button-icon,
.tabs-ios .tab-button-icon {
    color: blue;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">
ion-tab-bar.mainmenu-tabs {
    --core-bottom-tabs-color: blue;
}
</syntaxhighlight>
|}
===Selected tab icon color===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">tabs-md .tab-button[aria-selected=true] .tab-button-icon,
.tabs-ios .tab-button[aria-selected=true] .tab-button-icon {
    color: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">
ion-tab-bar.mainmenu-tabs {
    --core-bottom-tabs-color-selected: red;
}
</syntaxhighlight>
|}
===Badge color and text===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">core-ion-tabs .tab-badge.badge {
    color: white;
    background: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">
ion-tab-bar.mainmenu-tabs {
    --core-bottom-tabs-badge-text-color: white;
    --core-bottom-tabs-badge-color: red;
}
</syntaxhighlight>
|}
 
==Top tabs==
===Tabs background===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">.core-tabs-bar {
  background-color: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">
core-tabs, core-tabs-outlet {
    --core-tabs-background: red;
}
</syntaxhighlight>
|}
===Individual tab background===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">.core-tabs-bar .tab-slide {
  background-color: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">
core-tabs, core-tabs-outlet {
    --core-tab-background: red;
}</syntaxhighlight>
|}
===Unselected tab styles===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">.core-tabs-bar .tab-slide {
  color: red;
  border-bottom-color: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">core-tabs, core-tabs-outlet {
    --core-tab-color: red;
}
</syntaxhighlight>
|}
===Selected tab styles===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">.core-tabs-bar .tab-slide[aria-selected=true]{
  color: red;
  border-bottom-color: red;
  font-weigth: normal;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">
core-tabs, core-tabs-outlet {
    --core-tab-color-active: red;
    --core-tab-border-color-active: red;
    --core-tab-font-weight-active: bold;
}
</syntaxhighlight>
|}
 
==Items==
===Items background color===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">ion-item {
    background: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">body {
    --ion-item-background: red;
}</syntaxhighlight>
|}
|}
===Buttons color===
===Item divider background color===
{| class="wikitable" border="1"
{| class="wikitable" border="1"
|-
|-
| <code css>
| <syntaxhighlight lang="css">.item-divider-md,
.bar-button-clear-md-default, .bar-button-default-md, .bar-button-md-default,
.item-divider-ios {
.bar-button.button-md,
    background: red;
.bar-button-clear-ios-default, .bar-button-default-ios, .bar-button-ios-default,
.bar-button.button-ios {
     color: yellow;
     color: yellow;
}
}
</code>
</syntaxhighlight>
| <code css>ion-header ion-toolbar ion-button {
| <syntaxhighlight lang="css">body {
     --ion-toolbar-color: blue;
    --item-divider-background: red;
     --color: yellow;
    --item-divider-color: yellow;
}
</syntaxhighlight>
|}
===Empty divider background===
{| class="wikitable" border="1"
|-
| New selector.
| <syntaxhighlight lang="css">body {
    --spacer-background: red;
}</syntaxhighlight>
|}
==Progress bar==
You can now easily style progress bars.
 
<syntaxhighlight lang="css">
core-progress-bar {
    --core-progressbar-height: 8px;
    --core-progressbar-color: red;
    --core-progressbar-text-color: black;
    --core-progressbar-background: white;
}
</syntaxhighlight>
 
==More page==
 
===Icons===
 
The icons in the More page can now easily change their color:
 
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">page-core-mainmenu-more ion-icon {
    color: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">
page-core-mainmenu-more {
    --core-more-icon: red;
}</syntaxhighlight>
|}
 
To change a color on a particular icon, you’ll have to use the class of each handler. For example, to change the color of the folder icon on the menu item named Files:
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">page-core-mainmenu-more .ion-md-folder,
page-core-mainmenu-more .ion-ios-folder {
     color: red;
}
</syntaxhighlight>
| <syntaxhighlight lang="css">page-core-mainmenu-more .addon-privatefiles-handler ion-icon { 
    color: red !important;
}
</syntaxhighlight>
|}
===Item border color===
{| class="wikitable" border="1"
|-
| <syntaxhighlight lang="css">page-core-mainmenu-more .item-block.item-ios .item-inner,
page-core-mainmenu-more .item-block.item-md .item-inner {
     border-bottom-color: red;
}
}
</code>
</syntaxhighlight>
| <syntaxhighlight lang="css">page-core-mainmenu-more {
    --core-more-item-border: red;
}</syntaxhighlight>
|}
|}
===Border width and color (new)===
 
<code css>
The dividers background color can now be overridden using <code>--spacer-background</code>:
--core-header-toolbar-border-width: 2px; // 0 will disable it.
 
--core-header-toolbar-border-color: yellow;
<syntaxhighlight lang="css">
</code>
page-core-mainmenu-more {
    --spacer-background: blue;
}
</syntaxhighlight>
 
==Login page==
 
You can now personalise some colors in the Login page, but keep in mind that this only includes the credentials page (the one after you select the site).
 
<syntaxhighlight lang="css">
body {
    --core-login-background: red;
    --core-login-text-color: blue;
    --core-login-input-background: green;
    --core-login-input-color: yellow;
}
</syntaxhighlight>
 
==Calendar page ==
 
Calendar page can be personalised.
 
<syntaxhighlight lang="css">
body {
    --addon-calendar-event-category-color: purple;
    --addon-calendar-event-course-color: red;
    --addon-calendar-event-group-color: yellow;
    --addon-calendar-event-user-color: blue;
    --addon-calendar-event-site-color: green;
    --addon-calendar-today-border-color: orange;
    --addon-calendar-border-color: gray;
}
</syntaxhighlight>
 
==Messages page==
 
Message discussion page, including chat activity and comments:
 
<syntaxhighlight lang="css">
body {
    --addon-messages-message-bg: white;
    --addon-messages-message-activated-bg: gray-light;
    --addon-messages-message-note-text: gray-dark;
    --addon-messages-message-mine-bg: gray-light;
    --addon-messages-message-mine-activated-bg: gray;
    --addon-messages-discussion-badge: orange;
    --addon-messages-discussion-badge-text: white;
}</syntaxhighlight>
 
You can also make some modifications on the input field:
 
<syntaxhighlight lang="css">
body {
    --core-send-message-input-background: gray-light;
    --core-send-message-input-color: black;
}</syntaxhighlight>
 
== Full example ==
 
This is a full example showcasing how to handle multiple versions:
 
<syntaxhighlight lang="css">
/* ----- Ionic 5 styles ----- */
 
body.ionic5 {
    --core-header-toolbar-background: red;
}
 
/* Dark mode */
body.ionic5.dark {
    --core-header-toolbar-background: blue;
}
 
/* iOS only */
html.ios body.ionic5 {
    --core-link-color: green;
}
 
/* Android only */
html.md body.ionic5 {
    --core-link-color: yellow;
}
 
 
/* ----- Ionic 3 styles (legacy) ----- */
 
body:not(.ionic5) .toolbar-background {
    border-color: #004C9C;
    background: #004C9C;
}
</syntaxhighlight>
 
As you can see we recommend to always add <code>body.ionic</code> to start the CSS selectors, you can also use <code>:root body.ionic5</code> or even <code>html</code> before <code>body</code>.

Latest revision as of 13:03, 14 July 2022

Important:

This content of this page has been updated and migrated to the new Moodle Developer Resources. The information contained on the page should no longer be seen up-to-date.

Why not view this page on the new site and help us to migrate more content to the new site!


In the following guide, you will find some examples to migrate your styles from an older version to work with the Ionic 5 Moodle App (starting at version 3.9.5). You will find 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 keep your old CSS rules for older versions (see Before starting the migration), by doing so users who are still using Moodle App 3.9.4 and earlier will see the same styling you had until now.

Before starting the migration

  1. Remove all styles using ionic classes ending with -wp (Windows Phone is not supported, therefore it’s not necessary to specify it).
  2. Check the theme file, where most variables are specified.
  3. As in the previous version, do not use any Saas variables (the ones starting with $). But now you can use CSS custom properties (the ones starting with --).
  4. We recommend prepending all CSS rules with body.ionic5 in order to make them only available for Ionic 5, and prepending the old ones with body:not(.ionic5) for the previous versions of the Moodle App (3.9.4, 3.9.3, and so on).
  5. Be aware that example rules may differ from your CSS, which could be more specific.

How to upgrade my theme

You can follow the same process that is documented in the Moodle App Remote Themes page.

Make sure to read it in order to understand how to style your application for newer versions of the app. If you're upgrading your styles, it is likely that the documentation has been updated since you read it.

Colors

The main color in the app is Moodle Orange, but you can now change it by using the --brand-color variable. This will probably reduce the CSS you are applying right now, but this only covers the main color.

For other colors, check out the colors section in the main documentation.

Header toolbar

On the header toolbar, we’ve added a bottom border that you can disable.

Border width and color (new)

ion-header ion-toolbar {
    --core-header-toolbar-border-width: 2px; /* Use 0 to disable it */
    --core-header-toolbar-border-color: yellow;
}

Background

.toolbar-background-md,
.toolbar-background-ios {
    background: red;
}

ion-header ion-toolbar {
    --core-header-toolbar-background: red;
}

Text and buttons

.toolbar-title-md,
.toolbar-title-ios {
    color: red;
}

ion-header ion-toolbar {
    --core-header-toolbar-color: red;
}

.toolbar-title-md,
.toolbar-title-ios {
    font-weight: normal;
}

ion-header ion-toolbar.in-toolbar h1,
ion-header ion-toolbar.in-toolbar h2 {
    font-weight: normal;
}

Bottom tab bar (main menu)

Background

.tabs-md .tabbar,
.tabs-ios .tabbar {
    background: red;
}

ion-tab-bar.mainmenu-tabs {
    --core-bottom-tabs-background: red;
    --core-bottom-tabs-background-selected: transparent;
}

Tab icon color

.tabs-md .tab-button-icon,
.tabs-ios .tab-button-icon {
    color: blue;
}

ion-tab-bar.mainmenu-tabs {
    --core-bottom-tabs-color: blue;
}

Selected tab icon color

tabs-md .tab-button[aria-selected=true] .tab-button-icon,
.tabs-ios .tab-button[aria-selected=true] .tab-button-icon {
    color: red;
}

ion-tab-bar.mainmenu-tabs {
    --core-bottom-tabs-color-selected: red;
}

Badge color and text

core-ion-tabs .tab-badge.badge {
    color: white;
    background: red;
}

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

Top tabs

Tabs background

.core-tabs-bar {
  background-color: red;
}

core-tabs, core-tabs-outlet {
    --core-tabs-background: red;
}

Individual tab background

.core-tabs-bar .tab-slide {
  background-color: red;
}

core-tabs, core-tabs-outlet {
    --core-tab-background: red;
}

Unselected tab styles

.core-tabs-bar .tab-slide {
  color: red;
  border-bottom-color: red;
}

core-tabs, core-tabs-outlet {
    --core-tab-color: red;
}

Selected tab styles

.core-tabs-bar .tab-slide[aria-selected=true]{
   color: red;
   border-bottom-color: red;
   font-weigth: normal;
}

core-tabs, core-tabs-outlet {
    --core-tab-color-active: red;
    --core-tab-border-color-active: red;
    --core-tab-font-weight-active: bold;
}

Items

Items background color

ion-item {
    background: red;
}

body {
    --ion-item-background: red;
}

Item divider background color

.item-divider-md,
.item-divider-ios {
    background: red;
    color: yellow;
}

body {
    --item-divider-background: red;
    --item-divider-color: yellow;
}

Empty divider background

New selector. 
body {
    --spacer-background: red;
}

Progress bar

You can now easily style progress bars. 

core-progress-bar {
    --core-progressbar-height: 8px;
    --core-progressbar-color: red;
    --core-progressbar-text-color: black;
    --core-progressbar-background: white;
}

More page

Icons

The icons in the More page can now easily change their color: 

page-core-mainmenu-more ion-icon {
    color: red;
}

page-core-mainmenu-more {
    --core-more-icon: red;
}

To change a color on a particular icon, you’ll have to use the class of each handler. For example, to change the color of the folder icon on the menu item named Files: 

page-core-mainmenu-more .ion-md-folder,
page-core-mainmenu-more .ion-ios-folder {
    color: red;
}

page-core-mainmenu-more .addon-privatefiles-handler ion-icon {  
    color: red !important;
}

Item border color

page-core-mainmenu-more .item-block.item-ios .item-inner,
page-core-mainmenu-more .item-block.item-md .item-inner {
    border-bottom-color: red;
}

page-core-mainmenu-more {
    --core-more-item-border: red;
}

The dividers background color can now be overridden using --spacer-background: 

page-core-mainmenu-more {
    --spacer-background: blue;
}

Login page

You can now personalise some colors in the Login page, but keep in mind that this only includes the credentials page (the one after you select the site). 

body {
    --core-login-background: red;
    --core-login-text-color: blue;
    --core-login-input-background: green;
    --core-login-input-color: yellow;
}

Calendar page

Calendar page can be personalised. 

body {
    --addon-calendar-event-category-color: purple;
    --addon-calendar-event-course-color: red;
    --addon-calendar-event-group-color: yellow;
    --addon-calendar-event-user-color: blue;
    --addon-calendar-event-site-color: green;
    --addon-calendar-today-border-color: orange;
    --addon-calendar-border-color: gray;
}

Messages page

Message discussion page, including chat activity and comments: 

body {
    --addon-messages-message-bg: white;
    --addon-messages-message-activated-bg: gray-light;
    --addon-messages-message-note-text: gray-dark;
    --addon-messages-message-mine-bg: gray-light;
    --addon-messages-message-mine-activated-bg: gray;
    --addon-messages-discussion-badge: orange;
    --addon-messages-discussion-badge-text: white;
}

You can also make some modifications on the input field: 

body {
    --core-send-message-input-background: gray-light;
    --core-send-message-input-color: black;
}

Full example

This is a full example showcasing how to handle multiple versions: 

/* ----- Ionic 5 styles ----- */

body.ionic5 {
    --core-header-toolbar-background: red;
}

/* Dark mode */
body.ionic5.dark {
    --core-header-toolbar-background: blue;
}

/* iOS only */
html.ios body.ionic5 {
    --core-link-color: green;
}

/* Android only */
html.md body.ionic5 {
    --core-link-color: yellow;
}


/* ----- Ionic 3 styles (legacy) ----- */

body:not(.ionic5) .toolbar-background {
    border-color: #004C9C;
    background: #004C9C;
}

As you can see we recommend to always add body.ionic to start the CSS selectors, you can also use :root body.ionic5 or even html before body.

Retrieved from "https://docs.moodle.org/dev/index.php?title=Moodle_App_Remote_Themes_Upgrade_Guide&oldid=63546"
Powered by MediaWiki