MOBILE-3144 settings: Add color scheme setting

scripts/langindex.json

@@ -1781,6 +1781,10 @@
   "core.settings.appready": "local_moodlemobileapp",
   "core.settings.cannotsyncoffline": "local_moodlemobileapp",
   "core.settings.cannotsyncwithoutwifi": "local_moodlemobileapp",
+  "core.settings.colorscheme": "local_moodlemobileapp",
+  "core.settings.colorscheme-auto": "local_moodlemobileapp",
+  "core.settings.colorscheme-dark": "local_moodlemobileapp",
+  "core.settings.colorscheme-light": "local_moodlemobileapp",
   "core.settings.compilationinfo": "local_moodlemobileapp",
   "core.settings.cordovadevicemodel": "local_moodlemobileapp",
   "core.settings.cordovadeviceosversion": "local_moodlemobileapp",

src/assets/lang/en.json

@@ -1779,6 +1779,10 @@
     "core.settings.appready": "App ready",
     "core.settings.cannotsyncoffline": "Cannot synchronise offline.",
     "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-dark": "Dark",
+    "core.settings.colorscheme-light": "Light",
     "core.settings.compilationinfo": "Compilation info",
     "core.settings.cordovadevicemodel": "Cordova device model",
     "core.settings.cordovadeviceosversion": "Cordova device OS version",

src/config.json

@@ -89,5 +89,6 @@
     "statusbarlighttextandroid": true,
     "statusbarbgremotetheme": "#000000",
     "statusbarlighttextremotetheme": true,
-    "enableanalytics": false
+    "enableanalytics": false,
+    "forceColorScheme": ""
 }

src/core/constants.ts

@@ -36,6 +36,7 @@ export class CoreConstants {
     static SETTINGS_REPORT_IN_BACKGROUND = 'CoreSettingsReportInBackground'; // @deprecated since 3.5.0
     static SETTINGS_SEND_ON_ENTER = 'CoreSettingsSendOnEnter';
     static SETTINGS_FONT_SIZE = 'CoreSettingsFontSize';
+    static SETTINGS_COLOR_SCHEME = 'CoreSettingsColorScheme';
     static SETTINGS_ANALYTICS_ENABLED = 'CoreSettingsAnalyticsEnabled';
 
     // WS constants.

src/core/settings/lang/en.json

@@ -3,6 +3,10 @@
     "appready": "App ready",
     "cannotsyncoffline": "Cannot synchronise offline.",
     "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-dark": "Dark",
+    "colorscheme-light": "Light",
     "compilationinfo": "Compilation info",
     "cordovadevicemodel": "Cordova device model",
     "cordovadeviceosversion": "Cordova device OS version",

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

@@ -20,6 +20,12 @@
             </ion-segment-button>
         </ion-segment>
     </ion-item>
+    <ion-item text-wrap class="core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0">
+        <ion-label><h2>{{ 'core.settings.colorscheme' | translate }}</h2></ion-label>
+        <ion-select [(ngModel)]="selectedScheme" (ngModelChange)="colorSchemeChanged()" interface="action-sheet">
+            <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="rteSupported">
         <ion-label>
             <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>

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

@@ -24,6 +24,7 @@ import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreLocalNotificationsProvider } from '@providers/local-notifications';
 import { CorePushNotificationsProvider } from '@core/pushnotifications/providers/pushnotifications';
 import { CoreConfigConstants } from '../../../../configconstants';
+import { CoreSettingsHelper } from '../../providers/helper';
 
 /**
  * Page that displays the general settings.
@@ -44,11 +45,13 @@ export class CoreSettingsGeneralPage {
     debugDisplay: boolean;
     analyticsSupported: boolean;
     analyticsEnabled: boolean;
+    colorSchemes = [];
+    selectedScheme: string;
 
     constructor(appProvider: CoreAppProvider, private configProvider: CoreConfigProvider, fileProvider: CoreFileProvider,
             private eventsProvider: CoreEventsProvider, private langProvider: CoreLangProvider,
             private domUtils: CoreDomUtilsProvider, private pushNotificationsProvider: CorePushNotificationsProvider,
-            localNotificationsProvider: CoreLocalNotificationsProvider) {
+            localNotificationsProvider: CoreLocalNotificationsProvider, private settingsHelper: CoreSettingsHelper) {
 
         // Get the supported languages.
         const languages = CoreConfigConstants.languages;
@@ -59,6 +62,22 @@ export class CoreSettingsGeneralPage {
             });
         }
 
+        if (!CoreConfigConstants.forceColorScheme) {
+            let defaultColorScheme = 'light';
+
+            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.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, defaultColorScheme).then((scheme) => {
+                this.selectedScheme = scheme;
+            });
+        }
+
         // Sort them by name.
         this.languages.sort((a, b) => {
             return a.name.localeCompare(b.name);
@@ -126,10 +145,19 @@ export class CoreSettingsGeneralPage {
 
             return fontSize;
         });
-        document.documentElement.style.fontSize = this.selectedFontSize + '%';
+
+        this.settingsHelper.setFontSize(this.selectedFontSize);
         this.configProvider.set(CoreConstants.SETTINGS_FONT_SIZE, this.selectedFontSize);
     }
 
+    /**
+     * Called when a new color scheme is selected.
+     */
+    colorSchemeChanged(): void {
+        this.settingsHelper.setColorScheme(this.selectedScheme);
+        this.configProvider.set(CoreConstants.SETTINGS_COLOR_SCHEME, this.selectedScheme);
+    }
+
     /**
      * Called when the rich text editor is enabled or disabled.
      */

src/core/settings/providers/helper.ts

@@ -20,6 +20,9 @@ import { CoreFilepoolProvider } from '@providers/filepool';
 import { CoreLoggerProvider } from '@providers/logger';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreUtilsProvider } from '@providers/utils/utils';
+import { CoreConstants } from '@core/constants';
+import { CoreConfigProvider } from '@providers/config';
+import { CoreConfigConstants } from '../../../configconstants';
 import { TranslateService } from '@ngx-translate/core';
 
 /**
@@ -32,7 +35,8 @@ export class CoreSettingsHelper {
 
     constructor(loggerProvider: CoreLoggerProvider, private appProvider: CoreAppProvider, private cronDelegate: CoreCronDelegate,
             private eventsProvider: CoreEventsProvider, private filePoolProvider: CoreFilepoolProvider,
-            private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService) {
+            private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService,
+            private configProvider: CoreConfigProvider) {
         this.logger = loggerProvider.getInstance('CoreSettingsHelper');
     }
 
@@ -175,4 +179,50 @@ export class CoreSettingsHelper {
 
         return syncPromise;
     }
+
+    /**
+     * Init Settings related to DOM.
+     */
+    initDomSettings(): void {
+        // Set the font size based on user preference.
+        this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0].toString()).then((fontSize) => {
+            this.setFontSize(fontSize);
+        });
+
+        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.setColorScheme(scheme);
+            });
+        }
+    }
+
+    /**
+     * Set document default font size.
+     *
+     * @param fontSize Font size in percentage.
+     */
+    setFontSize(fontSize: string): void {
+        document.documentElement.style.fontSize = fontSize + '%';
+    }
+
+    /**
+     * Set body color scheme.
+     *
+     * @param colorScheme Name of the color scheme.
+     */
+    setColorScheme(colorScheme: string): void {
+        document.body.classList.remove('scheme-light');
+        document.body.classList.remove('scheme-dark');
+        document.body.classList.remove('scheme-auto');
+        document.body.classList.add('scheme-' + colorScheme);
+    }
 }

src/core/settings/settings.module.ts

@@ -28,4 +28,8 @@ import { CoreSettingsHelper } from './providers/helper';
         CoreSettingsHelper
     ]
 })
-export class CoreSettingsModule {}
+export class CoreSettingsModule {
+    constructor(settingsHelper: CoreSettingsHelper) {
+        settingsHelper.initDomSettings();
+    }
+}

src/providers/utils/dom.ts

@@ -22,7 +22,6 @@ import { TranslateService } from '@ngx-translate/core';
 import { CoreTextUtilsProvider } from './text';
 import { CoreAppProvider } from '../app';
 import { CoreConfigProvider } from '../config';
-import { CoreConfigConstants } from '../../configconstants';
 import { CoreUrlUtilsProvider } from './url';
 import { CoreFileProvider } from '@providers/file';
 import { CoreConstants } from '@core/constants';
@@ -73,10 +72,6 @@ export class CoreDomUtilsProvider {
         configProvider.get(CoreConstants.SETTINGS_DEBUG_DISPLAY, false).then((debugDisplay) => {
             this.debugDisplay = !!debugDisplay;
         });
-        // Set the font size based on user preference.
-        configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => {
-            document.documentElement.style.fontSize = fontSize + '%';
-        });
     }
 
     /**