MOBILE-3320 core: Fix some status and toolbar styles

src/core/components/show-password/show-password.ts

@@ -105,7 +105,7 @@ export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
      */
     protected setData(): void {
         this.label = this.shown ? 'core.hide' : 'core.show';
-        this.iconName = this.shown ? 'eye-off' : 'eye';
+        this.iconName = this.shown ? 'fas-eye-slash' : 'fas-eye';
         if (this.input) {
             this.input.type = this.shown ? 'text' : 'password';
         }

src/core/features/course/components/format/core-course-format.html

@@ -93,14 +93,14 @@
 
             <ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
                 *ngIf="displaySectionSelector && sections?.length">
-                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline"
+                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline" color="primary"
                     [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
                     <core-format-text class="sr-only" [text]="previousSection.name" contextLevel="course"
                         [contextInstanceId]="course?.id">
                     </core-format-text>
                 </ion-button>
-                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid"
+                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid" color="primary"
                     [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
                     <core-format-text class="sr-only" [text]="nextSection.name" contextLevel="course"
                         [contextInstanceId]="course?.id">

src/core/features/settings/pages/deviceinfo/deviceinfo.html

@@ -8,7 +8,7 @@
         </h1>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="copyInfo()" [attr.aria-label]="'core.settings.copyinfo' | translate">
-                <ion-icon slot="icon-only" name="fas-clipboard" color="light" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-clipboard" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
     </ion-toolbar>

src/core/features/settings/services/settings-helper.ts

@@ -434,12 +434,14 @@ export class CoreSettingsHelperProvider {
     setColorScheme(colorScheme: CoreColorScheme): void {
         if (colorScheme == CoreColorScheme.SYSTEM && this.prefersDark) {
             // Listen for changes to the prefers-color-scheme media query.
-            this.prefersDark.addEventListener('change', this.toggleDarkModeListener);
+            this.prefersDark.addEventListener &&
+                this.prefersDark.addEventListener('change', this.toggleDarkModeListener);
 
             this.toggleDarkMode(this.prefersDark.matches);
         } else {
             // Stop listening to changes.
-            this.prefersDark?.removeEventListener('change', this.toggleDarkModeListener);
+            this.prefersDark?.removeEventListener &&
+                this.prefersDark?.removeEventListener('change', this.toggleDarkModeListener);
 
             this.toggleDarkMode(colorScheme == CoreColorScheme.DARK);
         }

src/core/services/app.ts

@@ -642,9 +642,12 @@ export class CoreAppProvider {
             color = CoreColors.getColorHex(color);
         }
 
-        // Make darker on Android.
+        // Make darker on Android, except white.
         if (this.isAndroid()) {
-            color = CoreColors.darker(color);
+            const rgb = CoreColors.hexToRGB(color);
+            if (rgb.red != 255 || rgb.green != 255 || rgb.blue != 255) {
+                color = CoreColors.darker(color);
+            }
         }
 
         this.logger.debug(`Set status bar color ${color}`);

src/core/singletons/colors.ts

@@ -93,7 +93,7 @@ export class CoreColors {
      * @param color Hexadec RGB Color.
      * @return RGB color components.
      */
-    protected static hexToRGB(color: string): ColorComponents {
+    static hexToRGB(color: string): ColorComponents {
         if (color.charAt(0) == '#') {
             color = color.substr(1);
         }

src/theme/theme.light.scss

@@ -111,15 +111,14 @@
     --core-header-toolbar-border-width: #{$toolbar-border-width};
     --core-header-toolbar-border-color: #{$toolbar-border-color};
     --core-header-toolbar-color: #{$toolbar-color};
-    ion-header ion-toolbar,
+    ion-header ion-toolbar {
-    ion-header.header-ios ion-toolbar:last-of-type {
         --color: var(--core-header-toolbar-color);
         --background: var(--core-header-toolbar-background);
         --border-width: 0 0 var(--core-header-toolbar-border-width) 0;
         --border-color: var(--core-header-toolbar-border-color);
 
         ion-button {
-            --ion-toolbar-color: transparent;
+            --ion-toolbar-color: var(--core-header-toolbar-color);
             --color: var(--core-header-toolbar-color);
         }
 
@@ -129,6 +128,10 @@
         }
     }
 
+    ion-header.header-ios ion-toolbar:last-of-type {
+        --border-width: 0 0 var(--core-header-toolbar-border-width) 0;
+    }
+
     ion-searchbar {
         --background: var(--ion-item-background);
         .searchbar-input {