Merge pull request #2568 from crazyserver/MOBILE-3572

Mobile 3572

Author: jleyva

src/assets/lang/en.json

@@ -2001,6 +2001,7 @@
     "core.settings.cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.",
     "core.settings.colorscheme": "Color Scheme",
     "core.settings.colorscheme-auto": "Auto (based on system settings)",
+    "core.settings.colorscheme-auto-notice": "Auto mode may not work in some Android devices.",
     "core.settings.colorscheme-dark": "Dark",
     "core.settings.colorscheme-light": "Light",
     "core.settings.compilationinfo": "Compilation info",

src/core/settings/lang/en.json

@@ -7,6 +7,7 @@
     "cannotsyncwithoutwifi": "Cannot synchronise because the current settings only allow to synchronise when connected to Wi-Fi. Please connect to a Wi-Fi network.",
     "colorscheme": "Color Scheme",
     "colorscheme-auto": "Auto (based on system settings)",
+    "colorscheme-auto-notice": "Auto mode may not work in some Android devices.",
     "colorscheme-dark": "Dark",
     "colorscheme-light": "Light",
     "compilationinfo": "Compilation info",

src/core/settings/pages/general/general.html

@@ -20,7 +20,7 @@
             </ion-segment-button>
         </ion-segment>
     </ion-item>
-    <ion-item text-wrap class="core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0">
+    <ion-item text-wrap class="core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0" [attr.no-lines]="selectedScheme=='auto' && isAndroid ? true : null">
         <ion-label>
             <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
             <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
@@ -29,6 +29,9 @@ <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
             <ion-option *ngFor="let scheme of colorSchemes" [value]="scheme">{{ 'core.settings.colorscheme-' + scheme | translate }}</ion-option>
         </ion-select>
     </ion-item>
+    <ion-item text-wrap *ngIf="colorSchemes.length > 0 && selectedScheme=='auto' && isAndroid">
+        <p class="text-danger">{{ 'core.settings.colorscheme-auto-notice' | translate }}</p>
+    </ion-item>
     <ion-item text-wrap *ngIf="rteSupported">
         <ion-label>
             <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>

src/core/settings/pages/general/general.ts

@@ -15,6 +15,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { IonicPage, Segment } from 'ionic-angular';
 import { CoreConstants } from '@core/constants';
+import { CoreApp } from '@providers/app';
 import { CoreConfigProvider } from '@providers/config';
 import { CoreFileProvider } from '@providers/file';
 import { CoreEventsProvider } from '@providers/events';
@@ -46,6 +47,7 @@ export class CoreSettingsGeneralPage {
     colorSchemes = [];
     selectedScheme: string;
     colorSchemeDisabled: boolean;
+    isAndroid: boolean;
 
     constructor(protected configProvider: CoreConfigProvider,
             fileProvider: CoreFileProvider,
@@ -71,17 +73,11 @@ export class CoreSettingsGeneralPage {
                 this.colorSchemes.push('light');
                 this.selectedScheme = this.colorSchemes[0];
             } else {
-                let defaultColorScheme = 'light';
+                this.isAndroid = CoreApp.instance.isAndroid();
 
-                if (window.matchMedia('(prefers-color-scheme: dark)').matches ||
-                                    window.matchMedia('(prefers-color-scheme: light)').matches) {
-                    this.colorSchemes.push('auto');
-                    defaultColorScheme = 'auto';
-                }
-                this.colorSchemes.push('light');
-                this.colorSchemes.push('dark');
+                this.colorSchemes = this.settingsHelper.getAllowedColorSchemes();
 
-                this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => {
+                this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, 'light').then((scheme) => {
                     this.selectedScheme = scheme;
                 });
             }

src/core/settings/providers/helper.ts

@@ -44,6 +44,7 @@ export interface CoreSiteSpaceUsage {
 export class CoreSettingsHelper {
     protected logger;
     protected syncPromises = {};
+    protected colorSchemes: string[] = [];
 
     constructor(loggerProvider: CoreLoggerProvider,
             protected appProvider: CoreAppProvider,
@@ -342,14 +343,7 @@ export class CoreSettingsHelper {
         if (!!CoreConfigConstants.forceColorScheme) {
             this.setColorScheme(CoreConfigConstants.forceColorScheme);
         } else {
-            let defaultColorScheme = 'light';
-
-            if (window.matchMedia('(prefers-color-scheme: dark)').matches ||
-                    window.matchMedia('(prefers-color-scheme: light)').matches) {
-                defaultColorScheme = 'auto';
-            }
-
-            this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => {
+            this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, 'light').then((scheme) => {
                 this.setColorScheme(scheme);
             });
         }
@@ -388,6 +382,40 @@ export class CoreSettingsHelper {
         document.documentElement.style.fontSize = fontSize + '%';
     }
 
+    /**
+     * Get system allowed color schemes.
+     *
+     * @return Allowed color schemes.
+     */
+    getAllowedColorSchemes(): string[] {
+        if (this.colorSchemes.length > 0) {
+            return this.colorSchemes;
+        }
+
+        if (!CoreConfigConstants.forceColorScheme) {
+            this.colorSchemes.push('light');
+            this.colorSchemes.push('dark');
+            if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
+                this.colorSchemes.push('auto');
+            }
+        } else {
+            this.colorSchemes = [CoreConfigConstants.forceColorScheme];
+        }
+
+        return this.colorSchemes;
+    }
+
+    /**
+     * Toggle Dark on auto mode.
+     *
+     * @param dark If dark scheme should be set or removed.
+     */
+    protected toggleDarkTheme(dark: boolean): void {
+        if (document.body.classList.contains('scheme-auto')) {
+            document.body.classList.toggle('scheme-dark', dark);
+        }
+    }
+
     /**
      * Set body color scheme.
      *
@@ -397,6 +425,10 @@ export class CoreSettingsHelper {
         document.body.classList.remove('scheme-light');
         document.body.classList.remove('scheme-dark');
         document.body.classList.remove('scheme-auto');
+
+        const colorSchemes = this.getAllowedColorSchemes();
+
+        colorScheme = colorSchemes.indexOf(colorScheme) >= 0 ? colorScheme : colorSchemes[0];
         document.body.classList.add('scheme-' + colorScheme);
     }
 }