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
m (Text replacement - "</code>" to "</syntaxhighlight>")
Line 33: Line 33:
html.ios body.ionic5.dark {
html.ios body.ionic5.dark {
     --core-header-toolbar-background: red;
     --core-header-toolbar-background: red;
}</code>
}</syntaxhighlight>


  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)]
  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)]
Line 50: Line 50:
ion-button::part(native) {
ion-button::part(native) {
     text-transform: none;
     text-transform: none;
}</code>
}</syntaxhighlight>


# Check css exposed variables:
# Check css exposed variables:
Line 62: Line 62:
ion-button.specific {
ion-button.specific {
     --background: yellow;
     --background: yellow;
}</code>
}</syntaxhighlight>


====More information about shadow DOM:====
====More information about shadow DOM:====
Line 73: Line 73:


<code css>
<code css>
--brand-color: red;</code>
--brand-color: red;</syntaxhighlight>


This will probably reduce all the css you are applying right now.
This will probably reduce all the css you are applying right now.
Line 103: Line 103:
<code css>
<code css>
--background-color: white;
--background-color: white;
--ion-background-color-rgb: 255, 255, 255; // Need to be translated to rgb.</code>
--ion-background-color-rgb: 255, 255, 255; // Need to be translated to rgb.</syntaxhighlight>
===Main text color===
===Main text color===
<code css>
<code css>
--text-color: black;
--text-color: black;
--ion-text-color-rgb: 0, 0, 0; // Need to be translated to rgb.</code>
--ion-text-color-rgb: 0, 0, 0; // Need to be translated to rgb.</syntaxhighlight>


Color used in categories and secondary content.
Color used in categories and secondary content.
<code css>
<code css>
--subdued-text-color: gray;</code>
--subdued-text-color: gray;</syntaxhighlight>


Links color
Links color
<code css>
<code css>
--core-link-color: blue;</code>
--core-link-color: blue;</syntaxhighlight>


==Header toolbar==
==Header toolbar==
Line 127: Line 127:
.toolbar-background-ios {
.toolbar-background-ios {
     background: red;
     background: red;
}</code>
}</syntaxhighlight>
| <code css>--core-header-toolbar-background: red;</code>
| <code css>--core-header-toolbar-background: red;</syntaxhighlight>
|}
|}


Line 139: Line 139:
     color: red;
     color: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-header-toolbar-color: red;</code>
| <code css>--core-header-toolbar-color: red;</syntaxhighlight>
|-
|-
| <code css>
| <code css>
Line 147: Line 147:
     font-weight: normal;
     font-weight: normal;
}
}
</code>
</syntaxhighlight>
| <code css>ion-header ion-toolbar.in-toolbar h1,
| <code 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>
|}
|}
===Buttons color===
===Buttons color===
Line 164: Line 164:
     color: yellow;
     color: yellow;
}
}
</code>
</syntaxhighlight>
| <code css>ion-header ion-toolbar ion-button {
| <code css>ion-header ion-toolbar ion-button {
     --ion-toolbar-color: blue;
     --ion-toolbar-color: blue;
     --color: yellow;
     --color: yellow;
}
}
</code>
</syntaxhighlight>
|}
|}
===Border width and color (new)===
===Border width and color (new)===
Line 175: Line 175:
--core-header-toolbar-border-width: 2px; // 0 will disable it.
--core-header-toolbar-border-width: 2px; // 0 will disable it.
--core-header-toolbar-border-color: yellow;
--core-header-toolbar-border-color: yellow;
</code>
</syntaxhighlight>


==Bottom tab bar (main menu)==
==Bottom tab bar (main menu)==
Line 185: Line 185:
     background: red;
     background: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-bottom-tabs-background: red;</code>
| <code css>--core-bottom-tabs-background: red;</syntaxhighlight>
|}
|}
===Tab icon color===
===Tab icon color===
Line 195: Line 195:
     color: blue;
     color: blue;
}
}
</code>
</syntaxhighlight>
| <code css>--core-bottom-tabs-color: blue;</code>
| <code css>--core-bottom-tabs-color: blue;</syntaxhighlight>
|}
|}
===Selected tab icon color===
===Selected tab icon color===
Line 205: Line 205:
     color: red;
     color: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-bottom-tabs-color-selected: red;</code>
| <code css>--core-bottom-tabs-color-selected: red;</syntaxhighlight>
|}
|}
===Badge color and text===
===Badge color and text===
Line 215: Line 215:
     background: red;
     background: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-bottom-tabs-badge-text-color: white;
| <code css>--core-bottom-tabs-badge-text-color: white;
--core-bottom-tabs-badge-color: red;
--core-bottom-tabs-badge-color: red;
</code>
</syntaxhighlight>
|}
|}


Line 228: Line 228:
   background-color: red;
   background-color: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-tabs-background: red;</code>
| <code css>--core-tabs-background: red;</syntaxhighlight>
|}
|}
===Individual tab background===
===Individual tab background===
Line 237: Line 237:
   background-color: red;
   background-color: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-tab-background: red;</code>
| <code css>--core-tab-background: red;</syntaxhighlight>
|}
|}
===Unselected tab styles===
===Unselected tab styles===
Line 247: Line 247:
   border-bottom-color: red;
   border-bottom-color: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-tab-color: red;
| <code css>--core-tab-color: red;
--core-tab-border-color: red;
--core-tab-border-color: red;
</code>
</syntaxhighlight>
|}
|}
===Selected tab styles===
===Selected tab styles===
Line 260: Line 260:
   font-weigth: normal;
   font-weigth: normal;
}
}
</code>
</syntaxhighlight>
| <code css>--core-tab-color-active: red;
| <code css>--core-tab-color-active: red;
--core-tab-border-color-active: red;
--core-tab-border-color-active: red;
--core-tab-font-weight-active: bold;
--core-tab-font-weight-active: bold;
</code>
</syntaxhighlight>
|}
|}


Line 274: Line 274:
     background: red;
     background: red;
}
}
</code>
</syntaxhighlight>
| <code css>--ion-item-background: red;</code>
| <code css>--ion-item-background: red;</syntaxhighlight>
|}
|}
===Item divider background color===
===Item divider background color===
Line 285: Line 285:
     color: yellow;
     color: yellow;
}
}
</code>
</syntaxhighlight>
| <code css>--item-divider-background: red;
| <code css>--item-divider-background: red;
--item-divider-color: yellow;
--item-divider-color: yellow;
</code>
</syntaxhighlight>
|}
|}
===Empty divider background===
===Empty divider background===
Line 294: Line 294:
|-
|-
| New selector.
| New selector.
| <code css>--spacer-background: red;</code>
| <code css>--spacer-background: red;</syntaxhighlight>
|}
|}
==Buttons==
==Buttons==
Line 302: Line 302:
ion-button {
ion-button {
     --background: red;
     --background: red;
}</code>
}</syntaxhighlight>


[https://ionicframework.com/docs/api/button#css-custom-properties Check Ionic documentation for more information.]
[https://ionicframework.com/docs/api/button#css-custom-properties Check Ionic documentation for more information.]
Line 316: Line 316:
--core-progressbar-text-color: black;
--core-progressbar-text-color: black;
--core-progressbar-background: white;
--core-progressbar-background: white;
</code>
</syntaxhighlight>
==More page==
==More page==
===Icons===
===Icons===
Line 325: Line 325:
     color: red;
     color: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-more-icon: red;</code>
| <code css>--core-more-icon: red;</syntaxhighlight>
|}
|}


Line 336: Line 336:
     color: red;
     color: red;
}
}
</code>
</syntaxhighlight>
| <code css>.addon-privatefiles-handler ion-icon {   
| <code css>.addon-privatefiles-handler ion-icon {   
     color: red;
     color: red;
}
}
</code>
</syntaxhighlight>
|}
|}
===Item border color===
===Item border color===
Line 349: Line 349:
     border-bottom-color: red;
     border-bottom-color: red;
}
}
</code>
</syntaxhighlight>
| <code css>--core-more-item-border: red;</code>
| <code css>--core-more-item-border: red;</syntaxhighlight>
|}
|}


Line 361: Line 361:
--core-login-text-color: blue;
--core-login-text-color: blue;
--core-login-input-background: green;
--core-login-input-background: green;
--core-login-input-color: yellow;</code>
--core-login-input-color: yellow;</syntaxhighlight>




Line 374: Line 374:
--addon-calendar-event-site-color: green;
--addon-calendar-event-site-color: green;
--addon-calendar-today-border-color: orange;
--addon-calendar-today-border-color: orange;
--addon-calendar-border-color: gray;</code>
--addon-calendar-border-color: gray;</syntaxhighlight>


==Messages page==
==Messages page==
Line 387: Line 387:
--addon-messages-message-mine-activated-bg: gray;
--addon-messages-message-mine-activated-bg: gray;
--addon-messages-discussion-badge: orange;
--addon-messages-discussion-badge: orange;
--addon-messages-discussion-badge-text: white;</code>
--addon-messages-discussion-badge-text: white;</syntaxhighlight>


Some modifications on the input field:
Some modifications on the input field:
Line 393: Line 393:
<code css>
<code css>
--core-send-message-input-background: gray-light;
--core-send-message-input-background: gray-light;
--core-send-message-input-color: black;</code>
--core-send-message-input-color: black;</syntaxhighlight>


== Full Example ==
== Full Example ==
Line 427: Line 427:
     background: #004C9C;
     background: #004C9C;
}
}
</code>
</syntaxhighlight>


As you can see we recommend to always add body.ionic as an starter of the css selectors, you can also use :root body.ionic5 or even html before body.
As you can see we recommend to always add body.ionic as an starter of the css selectors, you can also use :root body.ionic5 or even html before body.

Revision as of 13:05, 14 July 2021


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

  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 (link can change in the future) where almost all variables are specified.
  3. As in the previous version, do not use any Saas variable (the ones starting with $). But you can use CSS3 ones (starting with --)
  4. 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).
  5. 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: https://ionic5.apps.moodledemo.net. (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;

}</syntaxhighlight> 

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:

  1. Check shadow parts that you can access.

You can style “native” part this way:

ion-button::part(native) { 

   text-transform: none;

}</syntaxhighlight>

  1. 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;

}</syntaxhighlight>

More information about shadow DOM:

Main colors

The main color in the app is Moodle orange, but you can change it just using:

--brand-color: red;</syntaxhighlight>

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

--background-color: white; --ion-background-color-rgb: 255, 255, 255; // Need to be translated to rgb.</syntaxhighlight>

Main text color

--text-color: black; --ion-text-color-rgb: 0, 0, 0; // Need to be translated to rgb.</syntaxhighlight>

Color used in categories and secondary content. --subdued-text-color: gray;</syntaxhighlight>

Links color --core-link-color: blue;</syntaxhighlight>

Header toolbar

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

Background

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

   background: red;

}</syntaxhighlight>

--core-header-toolbar-background: red;</syntaxhighlight>

Text and buttons

.toolbar-title-md, .toolbar-title-ios { 

   color: red;

} </syntaxhighlight>

--core-header-toolbar-color: red;</syntaxhighlight>

.toolbar-title-md, .toolbar-title-ios { 

   font-weight: normal;

} </syntaxhighlight>

ion-header ion-toolbar.in-toolbar h1,

ion-header ion-toolbar.in-toolbar h2 { 

   font-weight: normal;

} </syntaxhighlight>

Buttons color

.bar-button-clear-md-default, .bar-button-default-md, .bar-button-md-default, .bar-button.button-md, .bar-button-clear-ios-default, .bar-button-default-ios, .bar-button-ios-default, .bar-button.button-ios { 

   color: yellow;

} </syntaxhighlight>

ion-header ion-toolbar ion-button { 
   --ion-toolbar-color: blue;
   --color: yellow;

} </syntaxhighlight>

Border width and color (new)

--core-header-toolbar-border-width: 2px; // 0 will disable it. --core-header-toolbar-border-color: yellow; </syntaxhighlight>

Bottom tab bar (main menu)

Background

.tabs-md .tabbar,

.tabs-ios .tabbar { 

   background: red;

} </syntaxhighlight>

--core-bottom-tabs-background: red;</syntaxhighlight>

Tab icon color

.tabs-md .tab-button-icon,

.tabs-ios .tab-button-icon { 

   color: blue;

} </syntaxhighlight>

--core-bottom-tabs-color: blue;</syntaxhighlight>

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;

} </syntaxhighlight>

--core-bottom-tabs-color-selected: red;</syntaxhighlight>

Badge color and text

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

} </syntaxhighlight>

--core-bottom-tabs-badge-text-color: white;

--core-bottom-tabs-badge-color: red; </syntaxhighlight>

Top tabs

Tabs background

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

} </syntaxhighlight>

--core-tabs-background: red;</syntaxhighlight>

Individual tab background

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

} </syntaxhighlight>

--core-tab-background: red;</syntaxhighlight>

Unselected tab styles

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

} </syntaxhighlight>

--core-tab-color: red;

--core-tab-border-color: red; </syntaxhighlight>

Selected tab styles

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

} </syntaxhighlight>

--core-tab-color-active: red;

--core-tab-border-color-active: red; --core-tab-font-weight-active: bold; </syntaxhighlight>

Items

Items background color

ion-item { 
   background: red;

} </syntaxhighlight>

--ion-item-background: red;</syntaxhighlight>

Item divider background color

.item-divider-md,

.item-divider-ios { 

   background: red;
   color: yellow;

} </syntaxhighlight>

--item-divider-background: red;

--item-divider-color: yellow; </syntaxhighlight>

Empty divider background

New selector. --spacer-background: red;</syntaxhighlight>

Buttons

To change button colors, see Purpose buttons section. Also you can set some properties checking like:

ion-button { 

   --background: red;

}</syntaxhighlight>

Check Ionic documentation for more information.

Use ion-fab-button to change Floating action buttons.

Progress bar

You can now easily style the progress bars.

--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 the color:

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

} </syntaxhighlight>

--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:

page-core-mainmenu-more .ion-md-folder,

page-core-mainmenu-more .ion-ios-folder { 

   color: red;

} </syntaxhighlight>

.addon-privatefiles-handler ion-icon { 
   color: red;

} </syntaxhighlight>

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;

} </syntaxhighlight>

--core-more-item-border: red;</syntaxhighlight>

The dividers background color can be overridden using --spacer-background: red;

Login page

You can personalize some colors in the login page: (only credentials page, after selecting the site).

--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 personalized.

--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)

--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>

Some modifications on the input field:

--core-send-message-input-background: gray-light; --core-send-message-input-color: black;</syntaxhighlight>

Full Example

This is an example to use some cases explained before: /* Ionic5 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;

}


/* Legacy ionic3 styles */

body:not(.ionic5) .toolbar-background { 

   border-color: #004C9C;
   background: #004C9C;

} </syntaxhighlight>

As you can see we recommend to always add body.ionic as an starter of 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=59447"
Powered by MediaWiki