diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
index 86f4ba3b1..a567deefd 100644
--- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
+++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html
@@ -5,7 +5,7 @@
     <div slot="end" class="flex-row">
         <!-- Download all courses. -->
         <div *ngIf="downloadCoursesEnabled && filteredCourses.length > 1" class="core-button-spinner">
-            <ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" color="dark" (click)="prefetchCourses()"
+            <ion-button *ngIf="!prefetchCoursesData.loading" fill="clear" (click)="prefetchCourses()"
                 [attr.aria-label]="prefetchCoursesData.statusTranslatable | translate">
                 <ion-icon [name]="prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
                 </ion-icon>
diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index 4bb4161f4..f1764e5f8 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -53,7 +53,7 @@
                         </ion-row>
                     </ion-col>
                     <ion-col class="addon-block-timeline-activity-action ion-no-padding" *ngIf="event.action?.actionable">
-                        <ion-button fill="outline" color="medium" (click)="action($event, event.action.url)" [title]="event.action.name">
+                        <ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name">
                             {{event.action.name}}
                             <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
                                 {{event.action.itemcount}}
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index b02c1cf05..57b4eb6f4 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -118,7 +118,7 @@
                     <ion-label>
                         <p class="item-heading">{{ 'addon.calendar.reminders' | translate }}</p>
                     </ion-label>
-                    <ion-button fill="clear" color="dark" (click)="addReminder()" slot="end"
+                    <ion-button fill="clear" (click)="addReminder()" slot="end"
                         [attr.aria-label]="'addon.calendar.setnewreminder' | translate">
                         <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
diff --git a/src/addons/calendar/pages/event/event.html b/src/addons/calendar/pages/event/event.html
index 39364fbc8..0b21ac1f4 100644
--- a/src/addons/calendar/pages/event/event.html
+++ b/src/addons/calendar/pages/event/event.html
@@ -120,7 +120,7 @@
             </ion-item>
             <ion-item *ngIf="moduleUrl">
                 <ion-label>
-                    <ion-button expand="block" color="primary" [href]="moduleUrl" core-link capture="true">
+                    <ion-button expand="block" [href]="moduleUrl" core-link capture="true">
                         {{ 'addon.calendar.gotoactivity' | translate }}
                     </ion-button>
                 </ion-label>
@@ -148,7 +148,7 @@
             <ng-container *ngIf="event.timestart > currentTime">
                 <ion-item>
                     <ion-label>
-                        <ion-button expand="block" color="primary" (click)="addReminder()">
+                        <ion-button expand="block" (click)="addReminder()">
                             {{ 'addon.calendar.setnewreminder' | translate }}
                         </ion-button>
                     </ion-label>
diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
index cc9770632..38ec30d17 100644
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@@ -157,7 +157,7 @@
             <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" (click)="confirmContactRequest()">
                 {{ 'addon.messages.acceptandaddcontact' | translate }}
             </ion-button>
-            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" color="light" (click)="declineContactRequest()">
+            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" fill="outline" (click)="declineContactRequest()">
                 {{ 'addon.messages.decline' | translate }}
             </ion-button>
         </div>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index c2e5b2ad1..d0efe3655 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -103,27 +103,26 @@
                     <ion-label>
                         <div *ngIf="!unsupportedEditPlugins.length && !showErrorStatementEdit">
                             <!-- If has offline data, show edit. -->
-                            <ion-button expand="block" class="ion-text-wrap" color="primary" *ngIf="hasOffline" (click)="goToEdit()">
+                            <ion-button expand="block" class="ion-text-wrap" *ngIf="hasOffline" (click)="goToEdit()">
                                 {{ 'addon.mod_assign.editsubmission' | translate }}
                             </ion-button>
                             <!-- If no submission or is new, show add submission. -->
-                            <ion-button expand="block" class="ion-text-wrap" color="primary" *ngIf="!hasOffline &&
-                                    (!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)"
-                                (click)="goToEdit()">
+                            <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()" *ngIf="!hasOffline &&
+                                    (!userSubmission || !userSubmission!.status || userSubmission!.status == statusNew)">
                                 {{ 'addon.mod_assign.addsubmission' | translate }}
                             </ion-button>
                             <!-- If reopened, show addfromprevious and addnewattempt. -->
                             <ng-container *ngIf="!hasOffline && userSubmission?.status == statusReopened">
-                                <ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap" color="primary"
-                                    (click)="copyPrevious()">
+                                <ion-button *ngIf="!isPreviousAttemptEmpty" expand="block" class="ion-text-wrap" (click)="copyPrevious()">
                                     {{ 'addon.mod_assign.addnewattemptfromprevious' | translate }}
                                 </ion-button>
-                                <ion-button expand="block" class="ion-text-wrap" color="primary" (click)="goToEdit()">
+                                <ion-button expand="block" class="ion-text-wrap" (click)="goToEdit()">
                                     {{ 'addon.mod_assign.addnewattempt' | translate }}
                                 </ion-button>
                             </ng-container>
                             <!-- Else show editsubmission. -->
-                            <ion-button expand="block" class="ion-text-wrap" color="primary" *ngIf="!hasOffline && userSubmission && userSubmission!.status &&
+                            <ion-button expand="block" class="ion-text-wrap" *ngIf="!hasOffline &&
+                                    userSubmission && userSubmission!.status &&
                                     userSubmission!.status != statusNew &&
                                     userSubmission!.status != statusReopened" (click)="goToEdit()">
                                 {{ 'addon.mod_assign.editsubmission' | translate }}
diff --git a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
index 4a125adc0..d622f39aa 100644
--- a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
+++ b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html
@@ -10,7 +10,7 @@
     </ion-label>
     <div slot="end">
         <div class="ion-text-end">
-            <ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" color="dark" [attr.aria-label]="'core.edit' | translate">
+            <ion-button fill="clear" *ngIf="canEdit" (click)="editComment()" [attr.aria-label]="'core.edit' | translate">
                 <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </div>
diff --git a/src/addons/mod/chat/components/index/addon-mod-chat-index.html b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
index 42ffedbd5..e9c2590d3 100644
--- a/src/addons/mod/chat/components/index/addon-mod-chat-index.html
+++ b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
@@ -26,7 +26,7 @@
 
     <div collapsible-footer *ngIf="!showLoading" slot="fixed">
         <div class="list-item-limited-width" *ngIf="chat">
-            <ion-button class="ion-margin ion-text-wrap" expand="block" color="primary" (click)="enterChat()">
+            <ion-button class="ion-margin ion-text-wrap" expand="block" (click)="enterChat()">
                 {{ 'addon.mod_chat.enterchat' | translate }}
             </ion-button>
         </div>
diff --git a/src/addons/mod/data/components/action/addon-mod-data-action.html b/src/addons/mod/data/components/action/addon-mod-data-action.html
index ee307cfd9..09676dcea 100644
--- a/src/addons/mod/data/components/action/addon-mod-data-action.html
+++ b/src/addons/mod/data/components/action/addon-mod-data-action.html
@@ -1,24 +1,27 @@
-<ion-button *ngIf="action == 'more'" fill="clear" (click)="viewEntry()" [attr.aria-label]="'addon.mod_data.more' | translate">
+<ion-button size="small" *ngIf="action == 'more'" fill="clear" (click)="viewEntry()" [attr.aria-label]="'addon.mod_data.more' | translate">
     <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
 
-<ion-button *ngIf="action == 'edit'" fill="clear" (click)="editEntry()" [attr.aria-label]="'core.edit' | translate">
+<ion-button size="small" *ngIf="action == 'edit'" fill="clear" (click)="editEntry()" [attr.aria-label]="'core.edit' | translate">
     <ion-icon name="fas-cog" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
 
-<ion-button *ngIf="action == 'delete' && !entry.deleted" fill="clear" (click)="deleteEntry()" [attr.aria-label]="'core.delete' | translate">
+<ion-button size="small" *ngIf="action == 'delete' && !entry.deleted" fill="clear" color="danger" (click)="deleteEntry()"
+    [attr.aria-label]="'core.delete' | translate">
     <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
 
-<ion-button *ngIf="action == 'delete' && entry.deleted" fill="clear" (click)="undoDelete()" [attr.aria-label]="'core.restore' | translate">
+<ion-button size="small" *ngIf="action == 'delete' && entry.deleted" fill="clear" color="danger" (click)="undoDelete()"
+    [attr.aria-label]="'core.restore' | translate">
     <ion-icon name="fas-undo-alt" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
 
-<ion-button *ngIf="action == 'approve'" fill="clear" (click)="approveEntry()" [attr.aria-label]="'addon.mod_data.approve' | translate">
+<ion-button size="small" *ngIf="action == 'approve'" fill="clear" (click)="approveEntry()"
+    [attr.aria-label]="'addon.mod_data.approve' | translate">
     <ion-icon name="fas-thumbs-up" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
 
-<ion-button *ngIf="action == 'disapprove'" fill="clear" (click)="disapproveEntry()"
+<ion-button size="small" *ngIf="action == 'disapprove'" fill="clear" (click)="disapproveEntry()"
     [attr.aria-label]="'addon.mod_data.disapprove' | translate">
     <ion-icon name="far-thumbs-down" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
diff --git a/src/addons/mod/data/components/index/addon-mod-data-index.html b/src/addons/mod/data/components/index/addon-mod-data-index.html
index bcd05f929..12860af6f 100644
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addons/mod/data/components/index/addon-mod-data-index.html
@@ -72,8 +72,8 @@
 
     <!-- Reset search. -->
     <ng-container *ngIf="search.searching && !isEmpty">
-        <ion-item (click)="searchReset()" button detail="false">
-            <ion-label color="primary">
+        <ion-item (click)="searchReset()" button detail="false" *ngIf="!foundRecordsTranslationData">
+            <ion-label color="info">
                 {{ 'addon.mod_data.resetsettings' | translate}}
             </ion-label>
         </ion-item>
diff --git a/src/addons/mod/data/pages/entry/entry.html b/src/addons/mod/data/pages/entry/entry.html
index 3b4c9b000..a4a1fccdb 100644
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@@ -64,7 +64,7 @@
         <div collapsible-footer *ngIf="entryLoaded && hasPrevious || hasNext" slot="fixed">
             <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
                 <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
-                    <ion-button [disabled]="!hasPrevious" fill="clear" color="dark" [attr.aria-label]="'core.previous' | translate"
+                    <ion-button [disabled]="!hasPrevious" fill="clear" [attr.aria-label]="'core.previous' | translate"
                         (click)="gotoEntry(offset! -1)">
                         <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
@@ -72,7 +72,7 @@
                 <ion-col class="ion-text-center">
                 </ion-col>
                 <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
-                    <ion-button [disabled]="!hasNext" fill="clear" color="dark" [attr.aria-label]=" 'core.next' | translate"
+                    <ion-button [disabled]="!hasNext" fill="clear" [attr.aria-label]=" 'core.next' | translate"
                         (click)="gotoEntry(offset! + 1)">
                         <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
index c5e3e54f1..1dbc553e9 100644
--- a/src/addons/mod/forum/components/index/index.html
+++ b/src/addons/mod/forum/components/index/index.html
@@ -57,7 +57,7 @@
                                 [courseId]="courseId">
                             </core-format-text>
                         </p>
-                        <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear" color="dark"
+                        <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
                             [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)">
                             <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
                             </ion-icon>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index a5e99970d..9812ff26f 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -19,8 +19,8 @@
                             [attr.aria-label]="'addon.mod_forum.unread' | translate">
                             <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
                         </ion-note>
-                        <ion-button *ngIf="optionsMenuEnabled" fill="clear" color="dark"
-                            [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event)">
+                        <ion-button *ngIf="optionsMenuEnabled" fill="clear" [attr.aria-label]="('core.displayoptions' | translate)"
+                            (click)="showOptionsMenu($event)">
                             <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
                             </ion-icon>
                         </ion-button>
@@ -47,8 +47,8 @@
                                 [attr.aria-label]="'addon.mod_forum.unread' | translate">
                                 <ion-icon name="fas-circle" color="primary" aria-hidden="true"></ion-icon>
                             </ion-note>
-                            <ion-button *ngIf="optionsMenuEnabled" fill="clear" color="dark"
-                                [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event)">
+                            <ion-button *ngIf="optionsMenuEnabled" fill="clear" [attr.aria-label]="('core.displayoptions' | translate)"
+                                (click)="showOptionsMenu($event)">
                                 <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
                             </ion-button>
                         </ng-container>
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index a7aa60562..5399c89a1 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -116,7 +116,7 @@
         <div collapsible-footer *ngIf="loaded && numPages > 1" slot="fixed">
             <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap">
                 <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
-                    <ion-button [disabled]="previousPage < 0" fill="clear" color="dark" [attr.aria-label]="'core.previous' | translate"
+                    <ion-button [disabled]="previousPage < 0" fill="clear" [attr.aria-label]="'core.previous' | translate"
                         (click)="changePage(previousPage)">
                         <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
@@ -129,7 +129,7 @@
                     </ion-button>
                 </ion-col>
                 <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto" *ngIf="!showAll">
-                    <ion-button [disabled]="nextPage >= numPages" fill="clear" color="dark" [attr.aria-label]="'core.next' | translate"
+                    <ion-button [disabled]="nextPage >= numPages" fill="clear" [attr.aria-label]="'core.next' | translate"
                         (click)="changePage(nextPage)">
                         <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
                     </ion-button>
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 47f5e7b6c..3d5506ab1 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -19,7 +19,7 @@
                         <p class="item-heading ion-text-wrap">{{ 'addon.storagemanager.totaldownloads' | translate }}</p>
                         <ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
                     </ion-label>
-                    <ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0" color="danger" fill="outline">
+                    <ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0" color="danger" fill="clear">
                         <ion-icon name="fas-trash" slot="icon-only" [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate:
                         { name: title }">
                         </ion-icon>
@@ -48,7 +48,7 @@
                             </p>
                         </ion-label>
                         <div class="storage-buttons" slot="end" *ngIf="section.totalSize > 0 || downloadEnabled">
-                            <ion-button (click)="deleteForSection(section)" *ngIf="section.totalSize > 0" color="danger" fill="outline">
+                            <ion-button (click)="deleteForSection(section)" *ngIf="section.totalSize > 0" color="danger" fill="clear">
                                 <ion-icon name="fas-trash" slot="icon-only"
                                     [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
                                 </ion-icon>
diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.html b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
index 93aa52341..4c4f3217f 100644
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@@ -21,7 +21,7 @@
                 </ion-label>
                 <ion-button fill="clear" color="danger" slot="end" (click)="deleteSiteStorage($event)"
                     [hidden]="spaceUsage.spaceUsage! + spaceUsage.cacheEntries! <= 0"
-                    [attr.aria-label]="'addon.storagemanager.deleteallsitedata' | translate" fill="outline">
+                    [attr.aria-label]="'addon.storagemanager.deleteallsitedata' | translate">
                     <ion-icon name="fas-trash" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-item>
@@ -37,7 +37,7 @@
                     <ion-badge color="light">{{ totalSize | coreBytesToSize }}</ion-badge>
                 </ion-label>
                 <ion-button slot="end" (click)="deleteCompletelyDownloadedCourses($event)"
-                    [disabled]="completelyDownloadedCourses.length === 0" color="danger" fill="outline">
+                    [disabled]="completelyDownloadedCourses.length === 0" color="danger" fill="clear">
                     <ion-icon name="fas-trash" slot="icon-only" ariaLabel="{{ 'addon.storagemanager.deletecourses' | translate }}">
                     </ion-icon>
                 </ion-button>
diff --git a/src/core/components/download-refresh/core-download-refresh.html b/src/core/components/download-refresh/core-download-refresh.html
index 21d380920..d30ef77b9 100644
--- a/src/core/components/download-refresh/core-download-refresh.html
+++ b/src/core/components/download-refresh/core-download-refresh.html
@@ -1,14 +1,13 @@
 <ng-container *ngIf="enabled && !loading">
     <!-- Download button. -->
-    <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark" @coreShowHideAnimation
+    <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" @coreShowHideAnimation
         [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
         <ion-icon slot="icon-only" name="fas-cloud-download-alt" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
-        (click)="download($event, true)" color="primary" @coreShowHideAnimation
-        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
+        (click)="download($event, true)" @coreShowHideAnimation [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
         <ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true"></ion-icon>
     </ion-button>
 
diff --git a/src/core/components/file/core-file.html b/src/core/components/file/core-file.html
index ff3e41e9b..396b05120 100644
--- a/src/core/components/file/core-file.html
+++ b/src/core/components/file/core-file.html
@@ -12,8 +12,7 @@
             (action)="download()">
         </core-download-refresh>
 
-        <ion-button fill="clear" *ngIf="isDownloaded && isIOS" (click)="openFile($event, true)" color="dark"
-            [title]="openButtonLabel | translate">
+        <ion-button fill="clear" *ngIf="isDownloaded && isIOS" (click)="openFile($event, true)" [title]="openButtonLabel | translate">
             <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true"></ion-icon>
         </ion-button>
 
diff --git a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
index e7d55fa25..787cea97b 100644
--- a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
+++ b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
@@ -1,9 +1,9 @@
-<ion-button fill="clear" color="dark" (click)="scroll('backward')" [hidden]="scrollPosition === 'hidden'"
-    [disabled]="scrollPosition === 'start'" [attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
+<ion-button fill="clear" (click)="scroll('backward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'start'"
+    [attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
 
-<ion-button fill="clear" color="dark" (click)="scroll('forward')" [hidden]="scrollPosition === 'hidden'"
-    [disabled]="scrollPosition === 'end'" [attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
+<ion-button fill="clear" (click)="scroll('forward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'end'"
+    [attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
     <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>
diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index 78c405420..e9664f6d3 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@@ -13,8 +13,8 @@
         [src]="safeUrl" [attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null">
     </iframe>
 
-    <ion-button *ngIf="!loading && displayHelp" color="dark" expand="block" fill="clear" (click)="openIframeHelpModal()"
-        aria-haspopup="dialog" class="core-button-as-link core-iframe-help">
+    <ion-button *ngIf="!loading && displayHelp" expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog"
+        class="core-button-as-link core-iframe-help">
         {{ 'core.iframehelp' | translate }}
     </ion-button>
 
diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html
index 52a52eb4e..7c5ede969 100644
--- a/src/core/components/local-file/core-local-file.html
+++ b/src/core/components/local-file/core-local-file.html
@@ -24,7 +24,7 @@
 
             <ng-container *ngIf="manage">
                 <ion-button *ngIf="!editMode" fill="clear" [core-suppress-events] (onClick)="activateEdit($event)"
-                    [attr.aria-label]="'core.edit' | translate" color="dark">
+                    [attr.aria-label]="'core.edit' | translate">
                     <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
 
diff --git a/src/core/components/navigation-bar/core-navigation-bar.html b/src/core/components/navigation-bar/core-navigation-bar.html
index 087ffbdf9..1005bfcd5 100644
--- a/src/core/components/navigation-bar/core-navigation-bar.html
+++ b/src/core/components/navigation-bar/core-navigation-bar.html
@@ -1,7 +1,6 @@
 <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="items.length > 1">
     <ion-col class="ion-text-start ion-no-padding core-navigation-arrow" size="auto">
-        <ion-button [disabled]="previousIndex < 0" fill="clear" color="dark" [attr.aria-label]="previousTitle"
-            (click)="navigate(previousIndex)">
+        <ion-button [disabled]="previousIndex < 0" fill="clear" [attr.aria-label]="previousTitle" (click)="navigate(previousIndex)">
             <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
         </ion-button>
     </ion-col>
@@ -10,7 +9,7 @@
         </core-progress-bar>
     </ion-col>
     <ion-col class="ion-text-end ion-no-padding core-navigation-arrow" size="auto">
-        <ion-button [disabled]="nextIndex < 0" fill="clear" color="dark" [attr.aria-label]="nextTitle" (click)="navigate(nextIndex)">
+        <ion-button [disabled]="nextIndex < 0" fill="clear" [attr.aria-label]="nextTitle" (click)="navigate(nextIndex)">
             <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
         </ion-button>
     </ion-col>
diff --git a/src/core/components/send-message-form/core-send-message-form.html b/src/core/components/send-message-form/core-send-message-form.html
index 44691f99e..dec9430f5 100644
--- a/src/core/components/send-message-form/core-send-message-form.html
+++ b/src/core/components/send-message-form/core-send-message-form.html
@@ -7,6 +7,6 @@
     </textarea>
     <ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled" [attr.aria-label]="'core.send' | translate"
         [core-suppress-events] (onClick)="submitForm($event)">
-        <ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
+        <ion-icon name="send" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
     </ion-button>
 </form>
diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html
index 8c350f930..b457038b7 100644
--- a/src/core/features/course/components/course-format/course-format.html
+++ b/src/core/features/course/components/course-format/course-format.html
@@ -27,13 +27,13 @@
 
         <ion-buttons class="ion-padding core-course-section-nav-buttons safe-area-padding-horizontal list-item-limited-width"
             *ngIf="displayCourseIndex && (previousSection || nextSection)">
-            <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" color="primary" fill="solid" expand="block"
+            <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="solid" expand="block"
                 [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
                 <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true"></ion-icon>
                 <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id">
                 </core-format-text>
             </ion-button>
-            <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" color="primary" fill="solid" expand="block"
+            <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid" expand="block"
                 [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
                 <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id">
                 </core-format-text>
@@ -49,7 +49,7 @@
 
 <!-- Course Index button. -->
 <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="loaded && displayCourseIndex">
-    <ion-fab-button (click)="openCourseIndex()" [attr.aria-label]="'core.course.courseindex' | translate">
+    <ion-fab-button (click)="openCourseIndex()" [attr.aria-label]="'core.course.courseindex' | translate" color="secondary">
         <ion-icon name="fas-list-ul" aria-hidden="true"></ion-icon>
         <span class="sr-only">{{'core.course.courseindex' | translate }}</span>
     </ion-fab-button>
diff --git a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
index 7da05d7ee..798e97f8d 100644
--- a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
+++ b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html
@@ -7,8 +7,8 @@
             <ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
                 slot="end"></ion-icon>
         </ion-button>
-        <ion-button *ngIf="!completion.state" color="dark" fill="outline" [attr.aria-label]="accessibleDescription"
-            (click)="completionClicked($event)" class="ion-text-wrap" [class.chip]="mode == 'basic'">
+        <ion-button *ngIf="!completion.state" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
+            class="ion-text-wrap" [class.chip]="mode == 'basic'">
             {{ 'core.course.completion_manual:markdone' | translate }}
             <ion-icon *ngIf="completion?.offline" name="fas-sync" [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate"
                 slot="end"></ion-icon>
@@ -16,7 +16,7 @@
     </ng-container>
 
     <ng-container *ngIf="!completion.istrackeduser">
-        <ion-button disabled="true" color="dark" fill="outline" class="ion-text-wrap" [class.chip]="mode == 'basic'">
+        <ion-button disabled="true" fill="outline" class="ion-text-wrap" [class.chip]="mode == 'basic'">
             {{ 'core.course.completion_manual:markdone' | translate }}
         </ion-button>
     </ng-container>
diff --git a/src/core/features/course/components/module-navigation/core-course-module-navigation.html b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
index d2ef8639e..6b092bfb8 100644
--- a/src/core/features/course/components/module-navigation/core-course-module-navigation.html
+++ b/src/core/features/course/components/module-navigation/core-course-module-navigation.html
@@ -2,13 +2,13 @@
     <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding ion-wrap" *ngIf="previousModule || nextModule">
         <ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
             <ion-button fill="clear" class="core-course-previous-module" [disabled]="!previousModule" (click)="goToActivity(false)"
-                [attr.aria-label]="'core.course.gotopreviousactivity' | translate" color="dark">
+                [attr.aria-label]="'core.course.gotopreviousactivity' | translate">
                 <ion-icon name="fas-arrow-left" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-col>
         <ion-col size="auto" class="ion-no-padding core-course-module-navigation-arrow">
             <ion-button fill="clear" class="core-course-next-module" [disabled]="!nextModule" (click)="goToActivity(true)"
-                [attr.aria-label]="'core.course.gotonextactivity' | translate" color="dark">
+                [attr.aria-label]="'core.course.gotonextactivity' | translate">
                 <ion-icon name="fas-arrow-right" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-col>
diff --git a/src/core/features/course/components/module-summary/module-summary.html b/src/core/features/course/components/module-summary/module-summary.html
index 09a0e3354..f60653532 100644
--- a/src/core/features/course/components/module-summary/module-summary.html
+++ b/src/core/features/course/components/module-summary/module-summary.html
@@ -25,7 +25,7 @@
                 </h1>
             </ion-label>
             <ion-button fill="clear" *ngIf="displayOptions.displayOpenInBrowser" [href]="externalUrl" core-link [showBrowserWarning]="false"
-                color="dark" [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
+                [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
                 <ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-item>
@@ -80,7 +80,7 @@
                 </ion-label>
             </ion-item>
             <ion-button fill="outline" expand="block" *ngIf="canPrefetch && displayOptions.displayPrefetch" class="ion-text-wrap"
-                (click)="prefetch()" color="primary" [disabled]="prefetchDisabled">
+                (click)="prefetch()" [disabled]="prefetchDisabled">
                 <ion-icon *ngIf="!prefetchLoading" name="fas-cloud-download-alt" slot="start" aria-hidden="true"></ion-icon>
                 <ion-spinner *ngIf="prefetchLoading" slot="start" aria-hidden="true"></ion-spinner>
                 <ion-label>
@@ -197,14 +197,14 @@
     </core-loading>
 </ion-content>
 <ion-footer *ngIf="loaded && isOnline && displayOptions.displayRefresh">
-    <ion-button class="ion-margin" *ngIf="!hasOffline" (click)="refresh()" expand="block">
+    <ion-button class="ion-margin" *ngIf="!hasOffline" (click)="refresh()" expand="block" fill="outline">
         <ion-icon name="fas-redo-alt" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             {{ 'core.refresh' | translate }}
         </ion-label>
     </ion-button>
 
-    <ion-button class="ion-margin" *ngIf="hasOffline" (click)="sync()" expand="block">
+    <ion-button class="ion-margin" *ngIf="hasOffline" (click)="sync()" expand="block" fill="outline">
         <ion-icon name="fas-sync-alt" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             {{ 'core.settings.synchronizenow' | translate }}
diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html
index 86afecafe..17e53f4e1 100644
--- a/src/core/features/course/components/module/core-course-module.html
+++ b/src/core/features/course/components/module/core-course-module.html
@@ -53,7 +53,7 @@
 
                 <div class="core-module-buttons-more">
                     <!-- Buttons defined by the module handler. -->
-                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark"
+                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons"
                         [hidden]="button.hidden || module.handlerData.spinner" class="core-animate-show-hide"
                         (click)="buttonClicked($event, button)" [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">
                         <ion-icon [name]="button.icon" slot="icon-only" aria-hidden="true"></ion-icon>
diff --git a/src/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html
index 46926639f..a4485773e 100644
--- a/src/core/features/course/pages/course-summary/course-summary.html
+++ b/src/core/features/course/pages/course-summary/course-summary.html
@@ -36,7 +36,7 @@
                         <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="course.id">
                         </core-format-text>
                     </h2>
-                    <ion-chip color="brand" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
+                    <ion-chip color="primary" *ngIf="course.categoryname" class="core-course-category ion-text-nowrap">
                         <span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
                         <ion-label>
                             <core-format-text [text]="course.categoryname" contextLevel="coursecat" [contextInstanceId]="course.categoryid">
@@ -61,7 +61,7 @@
                         </p>
                     </div>
                 </ion-label>
-                <ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false" color="dark"
+                <ion-button fill="clear" [href]="courseUrl" core-link [showBrowserWarning]="false"
                     [attr.aria-label]="'core.openinbrowser' | translate" slot="end">
                     <ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
diff --git a/src/core/features/course/pages/module-preview/module-preview.html b/src/core/features/course/pages/module-preview/module-preview.html
index 1ff4dfa65..11cfb10da 100644
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@@ -12,7 +12,7 @@
 
         <ion-buttons slot="end">
             <ion-button fill="clear" *ngIf="module.url && module.uservisible && !unsupported" [href]="module.url" core-link
-                [showBrowserWarning]="false" color="dark" [attr.aria-label]="'core.openinbrowser' | translate">
+                [showBrowserWarning]="false" [attr.aria-label]="'core.openinbrowser' | translate">
                 <ion-icon name="fas-external-link-alt" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index fd2a803bc..e8d9a2749 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -17,7 +17,7 @@
 
         <div class="core-button-spinner" *ngIf="courseOptionMenuEnabled">
             <!-- Options menu. -->
-            <ion-button fill="clear" color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
+            <ion-button fill="clear" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
                 [attr.aria-label]="('core.displayoptions' | translate)">
                 <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
@@ -66,7 +66,7 @@
                         color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
                 </p>
 
-                <ion-chip color="brand" *ngIf="course.categoryname"
+                <ion-chip color="primary" *ngIf="course.categoryname"
                     class="core-course-category core-course-additional-info ion-text-nowrap">
                     <span class="sr-only">{{ 'core.courses.aria:coursecategory' | translate }}</span>
                     <ion-label>
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index 9a5976b70..4d529d350 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -47,7 +47,7 @@
                 name="fam-cloud-done" color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
 
             <!-- Options menu. -->
-            <ion-button fill="clear" color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
+            <ion-button fill="clear" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"
                 [attr.aria-label]="('core.displayoptions' | translate)">
                 <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true"></ion-icon>
             </ion-button>
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index 0d1d12031..c01f49f85 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/src/core/features/courses/pages/my/my.html
@@ -31,7 +31,7 @@
                 <!-- Download all courses. -->
                 <div *ngIf="downloadCoursesEnabled && myOverviewBlock && myOverviewBlock.filteredCourses.length > 1"
                     class="core-button-spinner">
-                    <ion-button *ngIf="!myOverviewBlock.prefetchCoursesData.loading" fill="clear" color="dark"
+                    <ion-button *ngIf="!myOverviewBlock.prefetchCoursesData.loading" fill="clear"
                         (click)="myOverviewBlock.prefetchCourses()"
                         [attr.aria-label]="myOverviewBlock.prefetchCoursesData.statusTranslatable | translate">
                         <ion-icon [name]="myOverviewBlock.prefetchCoursesData.icon" slot="icon-only" aria-hidden="true">
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 61d29ffbf..bac39ab1b 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -62,7 +62,7 @@
         </form>
 
         <!-- Forgotten password option. -->
-        <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear" color="dark"
+        <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
             class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
             {{ 'core.login.forgotten' | translate }}
         </ion-button>
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 2f628b064..7854dfa37 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -76,7 +76,7 @@
         </form>
 
         <!-- Forgotten password option. -->
-        <ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear" color="dark"
+        <ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear"
             class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
             {{ 'core.login.forgotten' | translate }}
         </ion-button>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index c51e50ee4..3afa0eba1 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -110,7 +110,7 @@
 
         <!-- Help. -->
         <ion-button class="ion-margin-top core-login-need-help core-button-as-link ion-text-wrap" (click)="showHelp()"
-            aria-haspopup="dialog" expand="block" fill="clear" color="dark">
+            aria-haspopup="dialog" expand="block" fill="clear">
             {{ 'core.needhelp' | translate }}
         </ion-button>
     </div>
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index 295192bbe..62028bf62 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -17,7 +17,7 @@
             <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" lines="full">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">
                     <ion-button class="edit-avatar" *ngIf="canChangeProfilePicture" (click)="changeProfilePicture()"
-                        [attr.aria-label]="'core.user.newpicture' | translate" fill="clear" color="dark">
+                        [attr.aria-label]="'core.user.newpicture' | translate" fill="clear">
                         <ion-icon slot="icon-only" name="fas-pen" aria-hidden="true"></ion-icon>
                     </ion-button>
                 </core-user-avatar>
@@ -94,7 +94,7 @@
                             </a></p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="interests" class="core-user-profile-interests">
+                <ion-item class="ion-text-wrap core-user-profile-interests" *ngIf="interests">
                     <ion-label>
                         <h2>{{ 'core.user.interests' | translate}}</h2>
                         <ion-badge *ngFor="let interest of interests" role="link" (click)="openInterest(interest)">
diff --git a/src/core/singletons/colors.ts b/src/core/singletons/colors.ts
index b86c8b500..d0e0e3dfa 100644
--- a/src/core/singletons/colors.ts
+++ b/src/core/singletons/colors.ts
@@ -25,7 +25,6 @@ interface ColorComponents {
  * Ionic color names.
  */
 export enum CoreIonicColorNames {
-    BRAND = 'brand',
     PRIMARY = 'primary',
     SECONDARY = 'secondary',
     SUCCESS = 'success',
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 09430b3a4..5f8d3a5fe 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -17,7 +17,7 @@ $gray-900:    #1d2125 !default; // Copy text
 $black:       #000000 !default; // Avoid usage
 
 $blue:        #0f6cbf !default;
-$cyan:        #008196 !default;
+$cyan:        #008196 !default; // Not used.
 $green:       #357a32 !default;
 $red:         #ca3120 !default;
 $yellow:      #f0ad4e !default;
@@ -39,19 +39,19 @@ $ion-item-background-rgb:  color-to-rgb-list($ion-item-background) !default;
 $ion-item-background-dark: $gray-900 !default;
 $ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
 
-$primary:    $blue !default;
-$secondary:  $gray-400 !default;
+$primary:    $brand-color !default;
+$secondary:  $gray-300 !default;
 $danger:     $red !default;
 $warning:    $yellow !default;
 $success:    $green !default;
-$info:       $cyan !default;
+$info:       $blue !default;
 $light:      $gray-100 !default;
 $medium:     $gray-600 !default;
 $dark:       $gray-800 !default;
 
 $colors:  (
-    primary: (light: $primary),
-    secondary: (light: $secondary),
+    primary: (light: $primary, dark: $primary),
+    secondary: (light: $secondary, dark: $gray-700),
     success: (light: $success),
     warning: (light: $warning),
     danger:  (light: $danger),
@@ -59,7 +59,6 @@ $colors:  (
     light: (light: $light, dark: $dark),
     medium: (light: $medium, dark: $gray-200),
     dark: (light: $dark, dark: $light),
-    brand: (light: $brand-color, dark: $brand-color),
 ) !default;
 
 /**
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 3181dbb72..647a1d7f3 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -370,6 +370,10 @@ ion-button.button.button-clear.button-has-icon-only {
     --border-radius: var(--huge-radius);
 }
 
+ion-button.button.button-clear {
+    --color: var(--dark);
+}
+
 ion-button.button.button-solid,
 ion-button.button.button-outline {
     --border-radius: var(--core-input-radius);
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index 358d341f1..e4985f605 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -65,7 +65,7 @@
         }
     }
 
-    --core-link-color: var(--primary-tint);
+    --core-link-color: var(--info-tint);
 
     --core-header-toolbar-background:   var(--gray-900);
     --core-header-toolbar-color:        var(--white);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 41545859f..2c054b588 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -47,7 +47,8 @@
         @include generate-color($color-name, $colors);
     }
 
-    --brand-color: var(--brand);
+    --brand-color: var(--primary);
+    --brand-contrast: var(--primary-contrast);
 
     // Accessibility vars.
     --a11y-min-target-size: 44px;
@@ -112,9 +113,9 @@
 
     --core-bottom-tabs-background: var(--white);
     --core-bottom-tabs-color: var(--gray-700);
-    --core-bottom-tabs-color-selected: var(--brand);
+    --core-bottom-tabs-color-selected: var(--brand-color);
     --core-bottom-tabs-background-selected: transparent;
-    --core-bottom-tabs-badge-color: var(--brand);
+    --core-bottom-tabs-badge-color: var(--brand-color);
     --core-bottom-tabs-badge-text-color: var(--brand-contrast);
     --bottom-tabs-size: 48px;
     --side-tabs-size: 56px;
@@ -125,7 +126,7 @@
         --background-selected: var(--core-bottom-tabs-background-selected);
     }
 
-    --core-link-color: var(--primary);
+    --core-link-color: var(--info);
     a {
         color: var(--core-link-color);
     }
@@ -202,7 +203,7 @@
     ion-action-sheet {
         --button-color: var(--ion-text-color);
         --button-color-selected: var(--ion-text-color);
-        --title-border-color: var(--brand);
+        --title-border-color: var(--brand-color);
 
         .action-sheet-title {
             --color: var(--ion-text-color);
@@ -224,7 +225,7 @@
     --core-tab-color: var(--subdued-text-color);
     --core-tab-border-color: var(--stroke);
     --core-tab-color-active: var(--dark);
-    --core-tab-border-color-active: var(--brand);
+    --core-tab-border-color-active: var(--brand-color);
     --core-tab-font-weight-active: normal;
     --core-tabs-height: 48px;
     core-tabs, core-tabs-outlet {
@@ -238,7 +239,7 @@
         }
     }
 
-    --core-loading-spinner: var(--brand);
+    --core-loading-spinner: var(--brand-color);
     ion-loading {
         --spinner-color: var(--core-loading-spinner);
     }
@@ -249,7 +250,7 @@
     }
 
     --core-progressbar-height: 8px;
-    --core-progressbar-color: var(--brand);
+    --core-progressbar-color: var(--brand-color);
     --core-progressbar-text-color: var(--medium);
     --core-progressbar-background: var(--brand-tint);
 
@@ -303,7 +304,7 @@
     --core-login-input-background: var(--white);
     --core-login-input-color: var(--gray-900);
 
-    --core-star-color: var(--brand);
+    --core-star-color: var(--brand-color);
 
     --core-large-avatar-size: 90px;
     --core-avatar-size: var(--a11y-min-target-size);