MOBILE-3670 statusbar: Change status bar color on loading site

src/addons/remotethemes/services/remotethemes.ts

@@ -43,7 +43,7 @@ export class AddonRemoteThemesProvider {
     protected stylesEls: {[siteId: string]: { element: HTMLStyleElement; hash: string }} = {};
 
     constructor() {
-        this.logger = CoreLogger.getInstance('AddonRemoteThemesProvider');
+        this.logger = CoreLogger.getInstance('AddonRemoteThemes');
     }
 
     /**
@@ -363,6 +363,9 @@ export class AddonRemoteThemesProvider {
             // Adding styles to a style element automatically enables it. Disable it again.
             if (disabled) {
                 this.disableElement(this.stylesEls[siteId].element, true);
+            } else {
+                // Set StatusBar properties.
+                CoreApp.setStatusBarColor();
             }
         }
 

src/core/services/app.ts

@@ -622,8 +622,16 @@ export class CoreAppProvider {
      */
     setStatusBarColor(color?: string): void {
         if (!color) {
-            // Get the default color to reset it.
+            // Get the default color to change it.
-            color = getComputedStyle(document.documentElement).getPropertyValue('--core-header-toolbar-background').trim();
+            const element = document.querySelector('ion-header ion-toolbar');
+            if (element) {
+                color = getComputedStyle(element).getPropertyValue('--background').trim();
+            } else {
+                // Fallback, it won't always work.
+                color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim();
+            }
+
+            color = CoreColors.getColorHex(color);
         }
 
         // Make darker on Android.
@@ -631,6 +639,8 @@ export class CoreAppProvider {
             color = CoreColors.darker(color);
         }
 
+        this.logger.debug(`Set status bar color ${color}`);
+
         const useLightText = CoreColors.isWhiteContrastingBetter(color);
         const statusBar = StatusBar.instance;
         statusBar.backgroundColorByHexString(color);

src/core/singletons/colors.ts

@@ -45,13 +45,36 @@ export class CoreColors {
     static darker(color: string, percent: number = 10): string {
         percent = 1 - (percent / 100);
         const components = CoreColors.hexToRGB(color);
-        components.red = Math.floor(components.red * percent) ;
+        components.red = Math.floor(components.red * percent);
-        components.green = Math.floor(components.green * percent) ;
+        components.green = Math.floor(components.green * percent);
-        components.blue = Math.floor(components.blue * percent) ;
+        components.blue = Math.floor(components.blue * percent);
 
         return CoreColors.RGBToHex(components);
     }
 
+    /**
+     * Returns the hex code from any color css type (ie named).
+     *
+     * @param color Color in any format.
+     * @returns Color in hex format.
+     */
+    static getColorHex(color: string): string {
+        const d = document.createElement('div');
+        d.style.color = color;
+        document.body.appendChild(d);
+
+        // Color in RGB .
+        const rgba = getComputedStyle(d).color.match(/\d+/g)!.map((a) => parseInt(a, 10));
+
+        const hex = [0,1,2].map(
+            (idx) => this.componentToHex(rgba[idx]),
+        ).join('');
+
+        document.body.removeChild(d);
+
+        return '#'+hex;
+    }
+
     /**
      * Gets the luma of a color.
      *
@@ -109,9 +132,7 @@ export class CoreColors {
      * @return Hexadec of the color component.
      */
     protected static componentToHex(c: number): string {
-        const hex = c.toString(16);
+        return ('0' + c.toString(16)).slice(-2);
-
-        return hex.length == 1 ? '0' + hex : hex;
     }
 
 }