From 70694c839ab9e48f1eeb6a580e1a8464f4758d94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 2 Jan 2019 14:31:38 +0100
Subject: [PATCH] MOBILE-2795 ux: Control divider color from css

---
 .../badges/pages/issued-badge/issued-badge.html    | 14 +++++++-------
 .../addon-block-activitymodules.html               |  2 +-
 .../myoverview/addon-block-myoverview.html         |  2 +-
 .../addon-block-recentlyaccessedcourses.html       |  2 +-
 .../addon-block-recentlyaccesseditems.html         |  2 +-
 .../sitemainmenu/addon-block-sitemainmenu.html     |  2 +-
 .../starredcourses/addon-block-starredcourses.html |  2 +-
 .../components/timeline/addon-block-timeline.html  |  2 +-
 .../contacts/addon-messages-contacts.html          |  2 +-
 .../discussions/addon-messages-discussions.html    |  2 +-
 .../group-conversations/group-conversations.html   |  6 +++---
 src/addon/messages/pages/search/search.html        |  2 +-
 src/addon/messages/pages/settings/settings.html    |  4 ++--
 .../addon-mod-assign-submission-file.html          |  2 +-
 .../addon-mod-assign-submission-onlinetext.html    |  2 +-
 .../components/index/addon-mod-choice-index.html   |  4 ++--
 src/addon/mod/feedback/pages/attempt/attempt.html  |  2 +-
 src/addon/mod/feedback/pages/form/form.html        |  2 +-
 .../pages/nonrespondents/nonrespondents.html       |  2 +-
 .../feedback/pages/respondents/respondents.html    |  4 ++--
 .../mod/forum/pages/discussion/discussion.html     |  2 +-
 .../components/index/addon-mod-glossary-index.html |  4 ++--
 src/addon/mod/glossary/pages/edit/edit.html        |  4 ++--
 .../mod/lesson/pages/menu-modal/menu-modal.html    |  4 ++--
 src/addon/mod/lesson/pages/player/player.html      |  2 +-
 src/addon/mod/quiz/pages/player/player.html        |  2 +-
 .../pages/preflight-modal/preflight-modal.html     |  2 +-
 src/addon/mod/quiz/pages/review/review.html        |  2 +-
 .../components/index/addon-mod-wiki-index.html     |  2 +-
 .../addon-mod-wiki-subwiki-picker.html             |  2 +-
 .../components/index/addon-mod-workshop-index.html | 12 ++++++------
 src/addon/mod/workshop/pages/phase/phase.html      |  2 +-
 .../notifications/pages/settings/settings.html     |  2 +-
 src/core/courses/pages/categories/categories.html  |  4 ++--
 .../pages/course-preview/course-preview.html       |  4 ++--
 src/core/courses/pages/search/search.html          |  2 +-
 .../login/pages/email-signup/email-signup.html     | 14 +++++++-------
 .../forgotten-password/forgotten-password.html     |  2 +-
 src/core/mainmenu/pages/more/more.html             |  2 +-
 src/core/settings/pages/about/about.html           |  6 +++---
 .../settings/pages/space-usage/space-usage.html    |  2 +-
 .../pages/synchronization/synchronization.html     |  4 ++--
 .../components/index/core-sitehome-index.html      |  2 +-
 src/core/user/pages/about/about.html               |  6 +++---
 src/theme/variables.scss                           |  8 ++++++++
 45 files changed, 84 insertions(+), 76 deletions(-)

diff --git a/src/addon/badges/pages/issued-badge/issued-badge.html b/src/addon/badges/pages/issued-badge/issued-badge.html
index f1e232737..111cc8a8f 100644
--- a/src/addon/badges/pages/issued-badge/issued-badge.html
+++ b/src/addon/badges/pages/issued-badge/issued-badge.html
@@ -19,7 +19,7 @@
         </ion-item-group>
 
         <ion-item-group *ngIf="user.fullname">
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap>
@@ -31,7 +31,7 @@
         </ion-item-group>
 
         <ion-item-group>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="badge.issuername">
@@ -49,7 +49,7 @@
         </ion-item-group>
 
         <ion-item-group>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="badge.name">
@@ -100,7 +100,7 @@
         </ion-item-group>
 
         <ion-item-group>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="badge.dateissued">
@@ -121,7 +121,7 @@
 
         <!-- Endorsement -->
         <ion-item-group *ngIf="badge.endorsement">
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.bendorsement' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="badge.endorsement.issuername">
@@ -160,7 +160,7 @@
 
         <!-- Related badges -->
         <ion-item-group *ngIf="badge.relatedbadges">
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.relatedbages' | translate}}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngFor="let relatedBadge of badge.relatedbadges">
@@ -173,7 +173,7 @@
 
         <!-- Competencies alignment -->
         <ion-item-group *ngIf="badge.competencies">
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'addon.badges.alignment' | translate}}</h2>
             </ion-item-divider>
             <a ion-item text-wrap *ngFor="let competency of badge.competencies" [href]="competency.targeturl" core-link auto-login="no">
diff --git a/src/addon/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addon/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
index 8d42ff51c..7711b65f6 100644
--- a/src/addon/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
+++ b/src/addon/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
diff --git a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
index bc00beb27..9b3cfa183 100644
--- a/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
     <!-- Download all courses. -->
     <div *ngIf="downloadEnabled && courses[selectedFilter] && courses[selectedFilter].length > 1 && !showFilter" class="core-button-spinner" item-end>
diff --git a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index a7b89c595..0d83e5a7e 100644
--- a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     <div *ngIf="downloadEnabled && courses && courses.length > 1" class="core-button-spinner" item-end>
         <button *ngIf="prefetchCoursesData.icon && prefetchCoursesData.icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index 2f419264f..f3538163d 100644
--- a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
diff --git a/src/addon/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addon/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
index 74ec899a7..e1a3c10a5 100644
--- a/src/addon/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
+++ b/src/addon/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_sitemainmenu.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
diff --git a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index 6e6c4856a..a900b1f0f 100644
--- a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
     <div *ngIf="downloadEnabled && courses && courses.length > 1" class="core-button-spinner" item-end>
         <button *ngIf="prefetchCoursesData.icon && prefetchCoursesData.icon != 'spinner'" ion-button icon-only clear color="dark" (click)="prefetchCourses()">
diff --git a/src/addon/block/timeline/components/timeline/addon-block-timeline.html b/src/addon/block/timeline/components/timeline/addon-block-timeline.html
index cee03f5eb..0e160fdf0 100644
--- a/src/addon/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addon/block/timeline/components/timeline/addon-block-timeline.html
@@ -1,4 +1,4 @@
-<ion-item-divider color="light">
+<ion-item-divider>
     <h2>{{ 'addon.block_timeline.pluginname' | translate }}</h2>
     <core-context-menu item-end>
         <core-context-menu-item *ngIf="loaded" [priority]="900" [content]="'addon.block_timeline.sortbydates' | translate" (action)="switchSort('sortbydates')" [iconAction]="sort == 'sortbydates' ? 'radio-button-on' : 'radio-button-off'"></core-context-menu-item>
diff --git a/src/addon/messages/components/contacts/addon-messages-contacts.html b/src/addon/messages/components/contacts/addon-messages-contacts.html
index 009412aba..4722b4d74 100644
--- a/src/addon/messages/components/contacts/addon-messages-contacts.html
+++ b/src/addon/messages/components/contacts/addon-messages-contacts.html
@@ -12,7 +12,7 @@
 
         <ion-list *ngFor="let contactType of contactTypes" no-margin>
             <ng-container *ngIf="contacts[contactType] && (contacts[contactType].length > 0 || contactType === searchType)">
-                <ion-item-divider color="light">
+                <ion-item-divider>
                     <h2>{{ 'addon.messages.type_' + contactType | translate }}</h2>
                     <ion-note item-end>{{ contacts[contactType].length }}</ion-note>
                 </ion-item-divider>
diff --git a/src/addon/messages/components/discussions/addon-messages-discussions.html b/src/addon/messages/components/discussions/addon-messages-discussions.html
index 0d4a834aa..23c9c6f34 100644
--- a/src/addon/messages/components/discussions/addon-messages-discussions.html
+++ b/src/addon/messages/components/discussions/addon-messages-discussions.html
@@ -8,7 +8,7 @@
     <core-loading [hideUntil]="loaded" [message]="loadingMessage">
 
         <ion-list *ngIf="search.showResults" no-margin>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 <h2>{{ 'core.searchresults' | translate }}</h2>
                 <ion-note item-end>{{ search.results.length }}</ion-note>
             </ion-item-divider>
diff --git a/src/addon/messages/pages/group-conversations/group-conversations.html b/src/addon/messages/pages/group-conversations/group-conversations.html
index 5452f9ebb..3e0b0a06e 100644
--- a/src/addon/messages/pages/group-conversations/group-conversations.html
+++ b/src/addon/messages/pages/group-conversations/group-conversations.html
@@ -27,7 +27,7 @@
             </a>
             <ion-list>
                 <!-- Favourite conversations. -->
-                <ion-item-divider color="light" text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)" class="core-expandable">
+                <ion-item-divider text-wrap *ngIf="favourites.conversations" (click)="toggle(favourites)" class="core-expandable">
                     <core-icon *ngIf="!favourites.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="favourites.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'core.favourites' | translate }} ({{ favourites.count }})
@@ -43,7 +43,7 @@
                 </div>
 
                 <!-- Group conversations. -->
-                <ion-item-divider color="light" text-wrap *ngIf="group.conversations" (click)="toggle(group)" class="core-expandable">
+                <ion-item-divider text-wrap *ngIf="group.conversations" (click)="toggle(group)" class="core-expandable">
                     <core-icon *ngIf="!group.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="group.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})
@@ -58,7 +58,7 @@
                     </ion-item>
                 </div>
 
-                <ion-item-divider color="light" text-wrap *ngIf="individual.conversations" (click)="toggle(individual)" class="core-expandable">
+                <ion-item-divider text-wrap *ngIf="individual.conversations" (click)="toggle(individual)" class="core-expandable">
                     <core-icon *ngIf="!individual.expanded" name="fa-caret-right" item-start></core-icon>
                     <core-icon *ngIf="individual.expanded" name="fa-caret-down" item-start></core-icon>
                     {{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})
diff --git a/src/addon/messages/pages/search/search.html b/src/addon/messages/pages/search/search.html
index 33ccff7eb..43dfbd4c5 100644
--- a/src/addon/messages/pages/search/search.html
+++ b/src/addon/messages/pages/search/search.html
@@ -24,7 +24,7 @@
 
 <!-- Template to render a list of results -->
 <ng-template #resultsTemplate let-item="item">
-    <ion-item-divider color="light" text-wrap>{{ item.titleString | translate }}</ion-item-divider>
+    <ion-item-divider text-wrap>{{ item.titleString | translate }}</ion-item-divider>
     <ion-item text-wrap *ngIf="item.results.length == 0">
         {{ item.emptyString | translate }}
     </ion-item>
diff --git a/src/addon/messages/pages/settings/settings.html b/src/addon/messages/pages/settings/settings.html
index 36d895958..4048bb8f6 100644
--- a/src/addon/messages/pages/settings/settings.html
+++ b/src/addon/messages/pages/settings/settings.html
@@ -16,7 +16,7 @@
             </ion-item>
 
             <ion-list *ngIf="advancedContactable" text-wrap radio-group [(ngModel)]="contactablePrivacy" (ionChange)="saveContactablePrivacy(contactablePrivacy)">
-                <ion-item-divider color="light">{{ 'addon.messages.contactableprivacy' | translate }}</ion-item-divider>
+                <ion-item-divider>{{ 'addon.messages.contactableprivacy' | translate }}</ion-item-divider>
                 <ion-item>
                     <ion-label>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</ion-label>
                     <ion-radio [value]="onlyContactsValue"></ion-radio>
@@ -35,7 +35,7 @@
         <ng-container *ngIf="preferences">
             <div *ngFor="let component of preferences.components">
                 <ion-card list *ngFor="let notification of component.notifications">
-                    <ion-item-divider color="light" text-wrap>
+                    <ion-item-divider text-wrap>
                         <ion-row no-padding>
                             <ng-container *ngIf="!groupMessagingEnabled">
                                 <ion-col no-padding>{{ notification.displayname }}</ion-col>
diff --git a/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html b/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
index 779bff313..69d048e0c 100644
--- a/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
+++ b/src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html
@@ -14,6 +14,6 @@
 
 <!-- Edit -->
 <div *ngIf="edit">
-    <ion-item-divider text-wrap color="light">{{plugin.name}}</ion-item-divider>
+    <ion-item-divider text-wrap>{{plugin.name}}</ion-item-divider>
     <core-attachments [files]="files" [maxSize]="configs.maxsubmissionsizebytes" [maxSubmissions]="configs.maxfilesubmissions" [component]="component" [componentId]="assign.cmid" [acceptedTypes]="configs.filetypeslist" [allowOffline]="allowOffline"></core-attachments>
 </div>
diff --git a/src/addon/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html b/src/addon/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
index fde89ebe0..a231c0cfa 100644
--- a/src/addon/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
+++ b/src/addon/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
@@ -9,7 +9,7 @@
 
 <!-- Edit -->
 <div *ngIf="edit && loaded">
-    <ion-item-divider text-wrap color="light">{{ plugin.name }}</ion-item-divider>
+    <ion-item-divider text-wrap>{{ plugin.name }}</ion-item-divider>
     <ion-item text-wrap *ngIf="configs.wordlimitenabled && words >= 0">
         <h2>{{ 'addon.mod_assign.wordlimit' | translate }}</h2>
         <p>{{ 'core.numwords' | translate: {'$a': words + ' / ' + configs.wordlimit} }}</p>
diff --git a/src/addon/mod/choice/components/index/addon-mod-choice-index.html b/src/addon/mod/choice/components/index/addon-mod-choice-index.html
index 82d44f856..58eeaefe7 100644
--- a/src/addon/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addon/mod/choice/components/index/addon-mod-choice-index.html
@@ -62,7 +62,7 @@
 
     <!-- Choice results -->
     <div *ngIf="canSeeResults">
-        <ion-item-divider color="light" text-center>
+        <ion-item-divider text-center>
             {{ 'addon.mod_choice.responses' | translate }}
         </ion-item-divider>
         <ion-grid no-padding>
@@ -77,7 +77,7 @@
                 </ion-col>
                 <ion-col *ngIf="choice.publish && results" col-12 col-lg-7>
                     <ion-item-group *ngFor="let result of results">
-                        <ion-item-divider text-wrap color="light">
+                        <ion-item-divider text-wrap>
                             <h2><core-format-text [text]="result.text"></core-format-text></h2>
                             <p>{{ 'addon.mod_choice.numberofuser' | translate }}: {{ result.numberofuser }} ({{ 'core.percentagenumber' | translate: {$a: result.percentageamount} }})</p>
                         </ion-item-divider>
diff --git a/src/addon/mod/feedback/pages/attempt/attempt.html b/src/addon/mod/feedback/pages/attempt/attempt.html
index e071278a0..f897a0d48 100644
--- a/src/addon/mod/feedback/pages/attempt/attempt.html
+++ b/src/addon/mod/feedback/pages/attempt/attempt.html
@@ -18,7 +18,7 @@
             </ion-item >
             <ng-container *ngIf="items && items.length">
                 <ng-container *ngFor="let item of items">
-                    <ion-item-divider *ngIf="item.typ == 'pagebreak'" color="light"></ion-item-divider>
+                    <ion-item-divider *ngIf="item.typ == 'pagebreak'"></ion-item-divider>
                     <ion-item text-wrap *ngIf="item.typ != 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''">
                         <h2 *ngIf="item.name" [core-mark-required]="item.required">
                             <span *ngIf="feedback.autonumbering && item.itemnumber">{{item.itemnumber}}. </span><core-format-text  [component]="component" [componentId]="componentId" [text]="item.name"></core-format-text>
diff --git a/src/addon/mod/feedback/pages/form/form.html b/src/addon/mod/feedback/pages/form/form.html
index 4a65c41c2..29405ccb4 100644
--- a/src/addon/mod/feedback/pages/form/form.html
+++ b/src/addon/mod/feedback/pages/form/form.html
@@ -13,7 +13,7 @@
                     <p *ngIf="!access.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                 </ion-item>
                 <ng-container *ngFor="let item of items">
-                    <ion-item-divider *ngIf="item.typ == 'pagebreak'" color="light"></ion-item-divider>
+                    <ion-item-divider *ngIf="item.typ == 'pagebreak'"></ion-item-divider>
                     <ion-item text-wrap *ngIf="item.typ != 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''" [class.core-danger-item]="item.isEmpty || item.hasError">
                         <ion-label *ngIf="item.name" [core-mark-required]="item.required" stacked>
                             <span *ngIf="feedback.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
diff --git a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
index 12a3189ac..f614ebf67 100644
--- a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
+++ b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
@@ -16,7 +16,7 @@
                     <ion-option *ngFor="let groupOpt of groupInfo.groups" [value]="groupOpt.id">{{groupOpt.name}}</ion-option>
                 </ion-select>
             </ion-item>
-            <ion-item-divider color="light">
+            <ion-item-divider>
                 {{ 'addon.mod_feedback.non_respondents_students' | translate : {$a: total } }}
             </ion-item-divider>
             <ng-container *ngIf="total > 0">
diff --git a/src/addon/mod/feedback/pages/respondents/respondents.html b/src/addon/mod/feedback/pages/respondents/respondents.html
index ca7b4a7a7..21cf03aa0 100644
--- a/src/addon/mod/feedback/pages/respondents/respondents.html
+++ b/src/addon/mod/feedback/pages/respondents/respondents.html
@@ -18,7 +18,7 @@
                     </ion-select>
                 </ion-item>
                 <ng-container *ngIf="responses.total > 0">
-                    <ion-item-divider color="light">
+                    <ion-item-divider>
                         {{ 'addon.mod_feedback.non_anonymous_entries' | translate : {$a: responses.total } }}
                     </ion-item-divider>
                     <a *ngFor="let attempt of responses.attempts" ion-item text-wrap (click)="gotoAttempt(attempt)" [class.core-split-item-selected]="attempt.id == attemptId">
@@ -33,7 +33,7 @@
                     </ion-item>
                 </ng-container>
                 <ng-container *ngIf="anonResponses.total > 0">
-                    <ion-item-divider color="light">
+                    <ion-item-divider>
                         {{ 'addon.mod_feedback.anonymous_entries' |translate : {$a: anonResponses.total } }}
                     </ion-item-divider>
                     <a *ngFor="let attempt of anonResponses.attempts" ion-item text-wrap (click)="gotoAttempt(attempt)" [class.core-split-item-selected]="attempt.id == attemptId">
diff --git a/src/addon/mod/forum/pages/discussion/discussion.html b/src/addon/mod/forum/pages/discussion/discussion.html
index 3d0048019..65b449476 100644
--- a/src/addon/mod/forum/pages/discussion/discussion.html
+++ b/src/addon/mod/forum/pages/discussion/discussion.html
@@ -36,7 +36,7 @@
 
         <ion-card *ngIf="sort != 'nested'">
             <ng-container *ngFor="let post of posts; first as first">
-                <ion-item-divider color="light" *ngIf="!first"></ion-item-divider>
+                <ion-item-divider *ngIf="!first"></ion-item-divider>
                 <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
             </ng-container>
         </ion-card>
diff --git a/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
index 5eb594112..d3fcd19f0 100644
--- a/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
+++ b/src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
@@ -33,7 +33,7 @@
         <core-loading [hideUntil]="loaded" class="core-loading-center">
 
             <ion-list *ngIf="viewMode != 'search' && offlineEntries.length > 0">
-                <ion-item-divider color="light">
+                <ion-item-divider>
                     {{ 'addon.mod_glossary.entriestobesynced' | translate }}
                 </ion-item-divider>
                 <a ion-item *ngFor="let entry of offlineEntries" (click)="openNewEntry(entry)" detail-none>
@@ -44,7 +44,7 @@
             <ion-list *ngIf="entries.length > 0">
                 <ng-container *ngFor="let entry of entries; let index = index">
 
-                    <ion-item-divider color="light" *ngIf="showDivider(entry, entries[index - 1])">
+                    <ion-item-divider *ngIf="showDivider(entry, entries[index - 1])">
                         {{getDivider(entry)}}
                     </ion-item-divider>
 
diff --git a/src/addon/mod/glossary/pages/edit/edit.html b/src/addon/mod/glossary/pages/edit/edit.html
index d76e0793b..f5c2381a0 100644
--- a/src/addon/mod/glossary/pages/edit/edit.html
+++ b/src/addon/mod/glossary/pages/edit/edit.html
@@ -27,10 +27,10 @@
                 <ion-label stacked id="addon-mod-glossary-aliases-label">{{ 'addon.mod_glossary.aliases' | translate }}</ion-label>
                 <ion-textarea [(ngModel)]="options.aliases" rows="1" core-auto-rows aria-labelledby="addon-mod-glossary-aliases-label"></ion-textarea>
             </ion-item>
-            <ion-item-divider color="light">{{ 'addon.mod_glossary.attachment' | translate }}</ion-item-divider>
+            <ion-item-divider>{{ 'addon.mod_glossary.attachment' | translate }}</ion-item-divider>
             <core-attachments [files]="attachments" [component]="component" [componentId]="glossary.cmid" [allowOffline]="true"></core-attachments>
             <ng-container *ngIf="glossary.usedynalink">
-                <ion-item-divider color="light">{{ 'addon.mod_glossary.linking' | translate }}</ion-item-divider>
+                <ion-item-divider>{{ 'addon.mod_glossary.linking' | translate }}</ion-item-divider>
                 <ion-item text-wrap>
                     <ion-label>{{ 'addon.mod_glossary.entryusedynalink' | translate }}</ion-label>
                     <ion-toggle [(ngModel)]="options.usedynalink"></ion-toggle>
diff --git a/src/addon/mod/lesson/pages/menu-modal/menu-modal.html b/src/addon/mod/lesson/pages/menu-modal/menu-modal.html
index 068490b8d..5744f07bd 100644
--- a/src/addon/mod/lesson/pages/menu-modal/menu-modal.html
+++ b/src/addon/mod/lesson/pages/menu-modal/menu-modal.html
@@ -13,13 +13,13 @@
         <ion-list>
             <!-- Media file. -->
             <ng-container *ngIf="pageInstance.mediaFile">
-                <ion-item-divider color="light"><h2>{{ 'addon.mod_lesson.linkedmedia' | translate }}</h2></ion-item-divider>
+                <ion-item-divider><h2>{{ 'addon.mod_lesson.linkedmedia' | translate }}</h2></ion-item-divider>
                 <core-file [file]="pageInstance.mediaFile" [component]="pageInstance.component" [componentId]="pageInstance.lesson.coursemodule"></core-file>
             </ng-container>
 
             <!-- Lesson menu. -->
             <ng-container *ngIf="pageInstance.displayMenu">
-                <ion-item-divider color="light"><h2>{{ 'addon.mod_lesson.lessonmenu' | translate }}</h2></ion-item-divider>
+                <ion-item-divider><h2>{{ 'addon.mod_lesson.lessonmenu' | translate }}</h2></ion-item-divider>
                 <ion-item text-center *ngIf="pageInstance.loadingMenu">
                     <ion-spinner></ion-spinner>
                 </ion-item>
diff --git a/src/addon/mod/lesson/pages/player/player.html b/src/addon/mod/lesson/pages/player/player.html
index 86c088030..428adceef 100644
--- a/src/addon/mod/lesson/pages/player/player.html
+++ b/src/addon/mod/lesson/pages/player/player.html
@@ -39,7 +39,7 @@
                 <!-- Question page. -->
                 <!-- We need to set ngIf loaded to make formGroup directive restart every time a page changes, see MOBILE-2540. -->
                 <form *ngIf="question && loaded" ion-list [formGroup]="questionForm">
-                    <ion-item-divider text-wrap color="light">
+                    <ion-item-divider text-wrap>
                         <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="pageContent"></core-format-text>
                     </ion-item-divider>
 
diff --git a/src/addon/mod/quiz/pages/player/player.html b/src/addon/mod/quiz/pages/player/player.html
index 430d23fd5..77795828b 100644
--- a/src/addon/mod/quiz/pages/player/player.html
+++ b/src/addon/mod/quiz/pages/player/player.html
@@ -49,7 +49,7 @@
             <div *ngFor="let question of questions">
                 <ion-card id="addon-mod_quiz-question-{{question.slot}}">
                     <!-- "Header" of the question. -->
-                    <ion-item-divider color="light">
+                    <ion-item-divider>
                         <h2 *ngIf="question.number" class="inline">{{ 'core.question.questionno' | translate:{$a: question.number} }}</h2>
                         <h2 *ngIf="!question.number" class="inline">{{ 'core.question.information' | translate }}</h2>
                         <ion-note text-wrap item-end *ngIf="question.status || question.readableMark">
diff --git a/src/addon/mod/quiz/pages/preflight-modal/preflight-modal.html b/src/addon/mod/quiz/pages/preflight-modal/preflight-modal.html
index b925e9039..c00c08277 100644
--- a/src/addon/mod/quiz/pages/preflight-modal/preflight-modal.html
+++ b/src/addon/mod/quiz/pages/preflight-modal/preflight-modal.html
@@ -16,7 +16,7 @@
                 <core-dynamic-component [component]="data.component" [data]="data.data">
                     <p padding>Couldn't find the directive to render this access rule.</p>
                 </core-dynamic-component>
-                <ion-item-divider color="light" *ngIf="!last"></ion-item-divider>
+                <ion-item-divider *ngIf="!last"></ion-item-divider>
             </ng-container>
 
             <button ion-button block type="submit">
diff --git a/src/addon/mod/quiz/pages/review/review.html b/src/addon/mod/quiz/pages/review/review.html
index f2e4cab77..be085af08 100644
--- a/src/addon/mod/quiz/pages/review/review.html
+++ b/src/addon/mod/quiz/pages/review/review.html
@@ -66,7 +66,7 @@
             <div *ngFor="let question of questions">
                 <ion-card id="addon-mod_quiz-question-{{question.slot}}">
                     <!-- "Header" of the question. -->
-                    <ion-item-divider color="light">
+                    <ion-item-divider>
                         <h2 *ngIf="question.number" class="inline">{{ 'core.question.questionno' | translate:{$a: question.number} }}</h2>
                         <h2 *ngIf="!question.number" class="inline">{{ 'core.question.information' | translate }}</h2>
                         <ion-note text-wrap item-end *ngIf="question.status || question.readableMark">
diff --git a/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html b/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
index 09df48a6e..bc2e6294a 100644
--- a/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
+++ b/src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
@@ -58,7 +58,7 @@
             <ng-template>
                 <ion-list>
                     <ng-container *ngFor="let letter of map">
-                        <ion-item-divider color="light" *ngIf="letter.label">
+                        <ion-item-divider *ngIf="letter.label">
                             {{ letter.label }}
                         </ion-item-divider>
                         <a ion-item text-wrap *ngFor="let page of letter.pages" (click)="goToPage(page)">
diff --git a/src/addon/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html b/src/addon/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
index 1cb1c3c43..0e9f93a3f 100644
--- a/src/addon/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
+++ b/src/addon/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
@@ -1,6 +1,6 @@
 <ion-list>
     <ng-container *ngFor="let group of subwikis">
-        <ion-item-divider *ngIf="group.label" color="light">
+        <ion-item-divider *ngIf="group.label">
             {{ group.label }}
         </ion-item-divider>
         <a ion-item text-wrap *ngFor="let subwiki of group.subwikis;" (click)="openSubwiki(subwiki)" [attr.disabled]="!subwiki.canedit && subwiki.id <= 0 ? true : null" [ngClass]="{'addon-mod_wiki-subwiki-selected': isSubwikiSelected(subwiki)}" detail-none>
diff --git a/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
index bce2d0cbc..bd3b2b12f 100644
--- a/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addon/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -49,7 +49,7 @@
             </ion-card>
 
             <ion-card class="with-borders" *ngIf="userGrades">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <h2>{{ 'addon.mod_workshop.yourgrades' | translate }}</h2>
                 </ion-item-divider>
                 <ion-item text-wrap *ngIf="userGrades.submissionlongstrgrade">
@@ -78,7 +78,7 @@
             </ion-item>
 
             <ng-container *ngIf="submission">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <h2>{{ 'addon.mod_workshop.yoursubmission' | translate }}</h2>
                 </ion-item-divider>
                 <addon-mod-workshop-submission [submission]="submission" [courseId]="workshop.course" [module]="module" [workshop]="workshop" [access]="access"></addon-mod-workshop-submission>
@@ -101,7 +101,7 @@
 
         <ng-container *ngIf="workshop.phase >= workshopPhases.PHASE_CLOSED">
             <ion-card class="with-borders" *ngIf="publishedSubmissions && publishedSubmissions.length">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <h2>{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h2>
                 </ion-item-divider>
                 <ng-container *ngFor="let submission of publishedSubmissions">
@@ -120,7 +120,7 @@
             </ion-card>
 
             <ion-card class="with-borders" *ngIf="canAssess">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <h2>{{ 'addon.mod_workshop.assignedassessments' | translate }}</h2>
                 </ion-item-divider>
                 <ion-item text-wrap *ngIf="!assessments || !assessments.length">
@@ -134,10 +134,10 @@
 
         <!-- MULTIPLE PHASES SUBMISSION OR GREATER only teachers -->
         <ion-card class="with-borders" *ngIf="access.canviewallsubmissions && workshop.phase >= workshopPhases.PHASE_SUBMISSION && ((grades && grades.length) || (groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)))">
-            <ion-item-divider color="light" text-wrap *ngIf="workshop.phase == workshopPhases.PHASE_SUBMISSION">
+            <ion-item-divider text-wrap *ngIf="workshop.phase == workshopPhases.PHASE_SUBMISSION">
                 <h2>{{ 'addon.mod_workshop.submissionsreport' | translate }}</h2>
             </ion-item-divider>
-           <ion-item-divider color="light" text-wrap *ngIf="workshop.phase > workshopPhases.PHASE_SUBMISSION">
+           <ion-item-divider text-wrap *ngIf="workshop.phase > workshopPhases.PHASE_SUBMISSION">
                 <h2>{{ 'addon.mod_workshop.gradesreport' | translate }}</h2>
             </ion-item-divider>
             <ion-item text-wrap *ngIf="groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)">
diff --git a/src/addon/mod/workshop/pages/phase/phase.html b/src/addon/mod/workshop/pages/phase/phase.html
index 1d23c2015..e9dbece27 100644
--- a/src/addon/mod/workshop/pages/phase/phase.html
+++ b/src/addon/mod/workshop/pages/phase/phase.html
@@ -11,7 +11,7 @@
 <ion-content>
     <ion-list>
         <ng-container *ngFor="let phase of phases">
-            <ion-item-divider color="light" [class.core-workshop-phase-selected]="workshopPhase == phase.code">
+            <ion-item-divider [class.core-workshop-phase-selected]="workshopPhase == phase.code">
                 <h2>{{ phase.title }}</h2>
                 <p text-wrap *ngIf="workshopPhase == phase.code">{{ 'addon.mod_workshop.userplancurrentphase' | translate }}</p>
             </ion-item-divider>
diff --git a/src/addon/notifications/pages/settings/settings.html b/src/addon/notifications/pages/settings/settings.html
index f6fea7a20..b9f76c243 100644
--- a/src/addon/notifications/pages/settings/settings.html
+++ b/src/addon/notifications/pages/settings/settings.html
@@ -41,7 +41,7 @@
             </div>
 
             <ion-card list *ngFor="let component of components">
-                <ion-item-divider color="light" text-wrap>
+                <ion-item-divider text-wrap>
                     <ion-row no-padding>
                         <ion-col no-padding>{{ component.displayname }}</ion-col>
                         <ion-col col-2 text-center no-padding class="hidden-phone">{{ 'core.settings.loggedin' | translate }}</ion-col>
diff --git a/src/core/courses/pages/categories/categories.html b/src/core/courses/pages/categories/categories.html
index e33f6e9ca..e24c372bb 100644
--- a/src/core/courses/pages/categories/categories.html
+++ b/src/core/courses/pages/categories/categories.html
@@ -17,7 +17,7 @@
         </ion-item>
 
         <div *ngIf="categories.length > 0">
-            <ion-item-divider color="light">{{ 'core.courses.categories' | translate }}</ion-item-divider>
+            <ion-item-divider>{{ 'core.courses.categories' | translate }}</ion-item-divider>
             <section *ngFor="let category of categories">
                 <a ion-item text-wrap (click)="openCategory(category.id)" [title]="category.name">
                     <ion-icon name="folder" item-start></ion-icon>
@@ -28,7 +28,7 @@
         </div>
 
         <div *ngIf="courses.length > 0">
-            <ion-item-divider color="light">{{ 'core.courses.courses' | translate }}</ion-item-divider>
+            <ion-item-divider>{{ 'core.courses.courses' | translate }}</ion-item-divider>
             <core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
         </div>
         <core-empty-box *ngIf="!categories.length && !courses.length" icon="ionic" [message]="'core.courses.nocoursesyet' | translate">
diff --git a/src/core/courses/pages/course-preview/course-preview.html b/src/core/courses/pages/course-preview/course-preview.html
index cdcce002e..3dc0e4701 100644
--- a/src/core/courses/pages/course-preview/course-preview.html
+++ b/src/core/courses/pages/course-preview/course-preview.html
@@ -25,12 +25,12 @@
             </ion-item>
 
             <ng-container text-wrap *ngIf="course.contacts && course.contacts.length">
-                <ion-item-divider color="light">{{ 'core.teachers' | translate }}</ion-item-divider>
+                <ion-item-divider>{{ 'core.teachers' | translate }}</ion-item-divider>
                 <a ion-item text-wrap *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id" [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate">
                     <ion-avatar core-user-avatar [user]="contact" item-start [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"></ion-avatar>
                     <h2>{{contact.fullname}}</h2>
                 </a>
-                <ion-item-divider color="light"></ion-item-divider>
+                <ion-item-divider></ion-item-divider>
             </ng-container>
             <core-file *ngFor="let file of course.overviewfiles" [file]="file" [component]="component" [componentId]="course.id"></core-file>
             <div *ngIf="!isEnrolled" detail-none>
diff --git a/src/core/courses/pages/search/search.html b/src/core/courses/pages/search/search.html
index 098a55bdf..20e55c6c4 100644
--- a/src/core/courses/pages/search/search.html
+++ b/src/core/courses/pages/search/search.html
@@ -7,7 +7,7 @@
     <core-search-box (onSubmit)="search($event)" [placeholder]="'core.courses.search' | translate" [searchLabel]="'core.courses.search' | translate" autoFocus="true" showClear="false"></core-search-box>
 
     <div *ngIf="courses">
-        <ion-item-divider color="light">{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>
+        <ion-item-divider>{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>
         <core-empty-box *ngIf="total == 0" icon="search" [message]="'core.courses.nosearchresults' | translate"></core-empty-box>
         <core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreResults($event)" [error]="loadMoreError"></core-infinite-loading>
diff --git a/src/core/login/pages/email-signup/email-signup.html b/src/core/login/pages/email-signup/email-signup.html
index e90af1066..c8909aafe 100644
--- a/src/core/login/pages/email-signup/email-signup.html
+++ b/src/core/login/pages/email-signup/email-signup.html
@@ -18,7 +18,7 @@
 
         <!-- Age verification. -->
         <form ion-list *ngIf="settingsLoaded && settings && ageDigitalConsentVerification" [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)">
-            <ion-item-divider color="light" text-wrap>
+            <ion-item-divider text-wrap>
                 <p class="item-heading">{{ 'core.agelocationverification' | translate }}</p>
             </ion-item-divider>
 
@@ -57,7 +57,7 @@
             </ion-item>
 
             <!-- Username and password. -->
-            <ion-item-divider text-wrap color="light">
+            <ion-item-divider text-wrap>
                 {{ 'core.login.createuserandpass' | translate }}
             </ion-item-divider>
             <ion-item text-wrap>
@@ -77,7 +77,7 @@
             </ion-item>
 
             <!-- More details. -->
-            <ion-item-divider text-wrap color="light">
+            <ion-item-divider text-wrap>
                 {{ 'core.login.supplyinfo' | translate }}
             </ion-item-divider>
             <ion-item text-wrap>
@@ -109,13 +109,13 @@
 
             <!-- Other categories. -->
             <ng-container *ngFor="let category of categories">
-                <ion-item-divider text-wrap color="light">{{ category.name }}</ion-item-divider>
+                <ion-item-divider text-wrap>{{ category.name }}</ion-item-divider>
                 <core-user-profile-field *ngFor="let field of category.fields" [field]="field" edit="true" signup="true" registerAuth="email" [form]="signupForm"></core-user-profile-field>
             </ng-container>
 
             <!-- ReCAPTCHA -->
             <ng-container *ngIf="settings.recaptchapublickey">
-                <ion-item-divider text-wrap color="light">{{ 'core.login.security_question' | translate }}</ion-item-divider>
+                <ion-item-divider text-wrap>{{ 'core.login.security_question' | translate }}</ion-item-divider>
                 <ion-item text-wrap>
                     <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
                 </ion-item>
@@ -123,7 +123,7 @@
 
             <!-- Site policy (if any). -->
             <ng-container *ngIf="settings.sitepolicy">
-                <ion-item-divider text-wrap color="light">{{ 'core.login.policyagreement' | translate }}</ion-item-divider>
+                <ion-item-divider text-wrap>{{ 'core.login.policyagreement' | translate }}</ion-item-divider>
                 <ion-item text-wrap>
                     <p><a [href]="settings.sitepolicy" core-link capture="false">{{ 'core.login.policyagreementclick' | translate }}</a></p>
                 </ion-item>
@@ -144,7 +144,7 @@
     </core-loading>
 
     <ion-list *ngIf="isMinor">
-        <ion-item-divider color="light" text-wrap>
+        <ion-item-divider text-wrap>
             <p *ngIf="siteName" class="item-heading padding"><core-format-text [text]="siteName"></core-format-text></p>
         </ion-item-divider>
         <ion-item text-wrap>
diff --git a/src/core/login/pages/forgotten-password/forgotten-password.html b/src/core/login/pages/forgotten-password/forgotten-password.html
index 2768b0a48..182ef2312 100644
--- a/src/core/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/login/pages/forgotten-password/forgotten-password.html
@@ -11,7 +11,7 @@
     </ion-list>
     <ion-card>
         <form ion-list [formGroup]="myForm" (ngSubmit)="resetPassword($event)">
-            <ion-item-divider text-wrap color="light">
+            <ion-item-divider text-wrap>
                 {{ 'core.login.searchby' | translate }}
             </ion-item-divider>
             <div radio-group formControlName="field">
diff --git a/src/core/mainmenu/pages/more/more.html b/src/core/mainmenu/pages/more/more.html
index 7f5b97a70..5db8aa669 100644
--- a/src/core/mainmenu/pages/more/more.html
+++ b/src/core/mainmenu/pages/more/more.html
@@ -9,7 +9,7 @@
             <ion-avatar core-user-avatar [user]="siteInfo" item-start></ion-avatar>
             <p>{{siteInfo.fullname}}</p>
         </a>
-        <ion-item-divider color="light"></ion-item-divider>
+        <ion-item-divider></ion-item-divider>
         <ion-item text-center *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
             <ion-spinner></ion-spinner>
         </ion-item>
diff --git a/src/core/settings/pages/about/about.html b/src/core/settings/pages/about/about.html
index 423e86876..8efcfaa14 100644
--- a/src/core/settings/pages/about/about.html
+++ b/src/core/settings/pages/about/about.html
@@ -8,7 +8,7 @@
         <h2>{{ appName }} {{ versionName }}</h2>
     </ion-item>
     <ion-item-group>
-        <ion-item-divider text-wrap color="light">
+        <ion-item-divider text-wrap>
             {{ 'core.settings.license' | translate }}
         </ion-item-divider>
         <ion-item text-wrap>
@@ -17,7 +17,7 @@
         </ion-item>
     </ion-item-group>
     <ion-item-group *ngIf="privacyPolicy">
-        <ion-item-divider text-wrap color="light">
+        <ion-item-divider text-wrap>
             {{ 'core.settings.privacypolicy' | translate }}
         </ion-item-divider>
         <ion-item text-wrap>
@@ -25,7 +25,7 @@
         </ion-item>
     </ion-item-group>
     <ion-item-group>
-        <ion-item-divider text-wrap color="light">
+        <ion-item-divider text-wrap>
             {{ 'core.settings.deviceinfo' | translate }}
         </ion-item-divider>
         <ion-item text-wrap *ngIf="versionName">
diff --git a/src/core/settings/pages/space-usage/space-usage.html b/src/core/settings/pages/space-usage/space-usage.html
index 491da352e..00d578ba9 100644
--- a/src/core/settings/pages/space-usage/space-usage.html
+++ b/src/core/settings/pages/space-usage/space-usage.html
@@ -16,7 +16,7 @@
                 <ion-icon name="trash"></ion-icon>
             </button>
         </ion-item>
-        <ion-item-divider color="light">
+        <ion-item-divider>
             <p>{{ 'core.settings.total' | translate }}</p>
             <p item-end>{{ totalUsage | coreBytesToSize }}</p>
         </ion-item-divider>
diff --git a/src/core/settings/pages/synchronization/synchronization.html b/src/core/settings/pages/synchronization/synchronization.html
index 12e7a753b..a81c59e13 100644
--- a/src/core/settings/pages/synchronization/synchronization.html
+++ b/src/core/settings/pages/synchronization/synchronization.html
@@ -5,7 +5,7 @@
 </ion-header>
 <ion-content>
     <core-loading [hideUntil]="sitesLoaded">
-        <ion-item-divider color="light">
+        <ion-item-divider>
             <p>{{ 'core.settings.syncsettings' | translate }}</p>
         </ion-item-divider>
         <ion-item text-wrap>
@@ -13,7 +13,7 @@
             <ion-toggle item-end [(ngModel)]="syncOnlyOnWifi" (ngModelChange)="syncOnlyOnWifiChanged()">
             </ion-toggle>
         </ion-item>
-        <ion-item-divider color="light">
+        <ion-item-divider>
             <p>{{ 'core.settings.sites' | translate }}</p>
         </ion-item-divider>
         <ion-item *ngFor="let site of sites" [class.core-primary-selected-item]="site.id == currentSiteId" text-wrap>
diff --git a/src/core/sitehome/components/index/core-sitehome-index.html b/src/core/sitehome/components/index/core-sitehome-index.html
index 600834cd1..6472f3418 100644
--- a/src/core/sitehome/components/index/core-sitehome-index.html
+++ b/src/core/sitehome/components/index/core-sitehome-index.html
@@ -12,7 +12,7 @@
 
         <!-- Site home items: news, categories, courses, etc. -->
         <ng-container *ngIf="items.length > 0">
-            <ion-item-divider color="light" *ngIf="section && section.hasContent"></ion-item-divider>
+            <ion-item-divider *ngIf="section && section.hasContent"></ion-item-divider>
             <ng-container *ngFor="let item of items">
                 <core-sitehome-all-course-list class="item" *ngIf="item == 'all-course-list'"></core-sitehome-all-course-list>
                 <core-sitehome-categories  *ngIf="item == 'categories'"></core-sitehome-categories>
diff --git a/src/core/user/pages/about/about.html b/src/core/user/pages/about/about.html
index 3e6932169..cfc7db797 100644
--- a/src/core/user/pages/about/about.html
+++ b/src/core/user/pages/about/about.html
@@ -10,7 +10,7 @@
     <core-loading [hideUntil]="userLoaded">
         <div *ngIf="user">
             <ion-item-group *ngIf="hasContact">
-                <ion-item-divider color="light">{{ 'core.user.contact' | translate}}</ion-item-divider>
+                <ion-item-divider>{{ 'core.user.contact' | translate}}</ion-item-divider>
                 <ion-item text-wrap *ngIf="user.email">
                     <h2>{{ 'core.user.email' | translate }}</h2>
                     <p><a href="mailto:{{user.email}}" core-link auto-login="no">
@@ -46,7 +46,7 @@
                 </ion-item>
             </ion-item-group>
             <ion-item-group *ngIf="hasDetails">
-                <ion-item-divider color="light">{{ 'core.userdetails' | translate}}</ion-item-divider>
+                <ion-item-divider>{{ 'core.userdetails' | translate}}</ion-item-divider>
                 <ion-item text-wrap *ngIf="user.url">
                     <h2>{{ 'core.user.webpage' | translate}}</h2>
                     <p><a href="{{user.url}}" core-link>
@@ -60,7 +60,7 @@
                 <core-user-profile-field *ngFor="let field of user.customfields" [field]="field"></core-user-profile-field>
             </ion-item-group>
             <ion-item-group *ngIf="user.description">
-                <ion-item-divider color="light">{{ 'core.user.description' | translate}}</ion-item-divider>
+                <ion-item-divider>{{ 'core.user.description' | translate}}</ion-item-divider>
                 <ion-item text-wrap>
                     <p><core-format-text [text]="user.description"></core-format-text></p>
                 </ion-item>
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 29b5087ce..3e0d624a2 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -123,6 +123,8 @@ $item-avatar-size: 54px !default;
 $input-select-opacity: .5 !default;
 $note-color: $gray-dark !default;
 $popover-width: 280px !default;
+$item-divider-background: $gray-lighter !default;
+$item-divider-color: $black !default;
 
 
 // Moodle Mobile variables
@@ -169,6 +171,8 @@ $checkbox-ios-disabled-opacity: $input-select-opacity !default;
 $toggle-ios-disabled-opacity: $input-select-opacity !default;
 $note-ios-color: $note-color;
 $popover-ios-width: $popover-width;
+$item-ios-divider-background: $item-divider-background;
+$item-ios-divider-color: $item-divider-color;
 
 // App Material Design Variables
 // --------------------------------------------------
@@ -190,6 +194,8 @@ $toggle-md-disabled-opacity: $input-select-opacity !default;
 $note-md-color: $note-color;
 $popover-md-width: $popover-width;
 $action-sheet-md-title-color: $core-color;
+$item-md-divider-background: $item-divider-background;
+$item-md-divider-color: $item-divider-color;
 
 // App Windows Variables
 // --------------------------------------------------
@@ -209,6 +215,8 @@ $checkbox-wp-disabled-opacity: $input-select-opacity !default;
 $toggle-wp-disabled-opacity: $input-select-opacity !default;
 $note-wp-color: $note-color;
 $popover-wp-width: $popover-width;
+$item-wp-divider-background: $item-divider-background;
+$item-wp-divider-color: $item-divider-color;
 
 // App Theme
 // --------------------------------------------------