Merge pull request #2258 from dpalou/MOBILE-3317

MOBILE-3317 settings: Allow disabling dark mode in site

scripts/langindex.json

@@ -1927,6 +1927,7 @@
   "core.settings.filesystemroot": "local_moodlemobileapp",
   "core.settings.fontsize": "local_moodlemobileapp",
   "core.settings.fontsizecharacter": "block_accessibility/char",
+  "core.settings.forcedsetting": "local_moodlemobileapp",
   "core.settings.general": "moodle",
   "core.settings.language": "moodle",
   "core.settings.license": "moodle",

src/assets/lang/en.json

@@ -1927,6 +1927,7 @@
     "core.settings.filesystemroot": "File system root",
     "core.settings.fontsize": "Text size",
     "core.settings.fontsizecharacter": "A",
+    "core.settings.forcedsetting": "This setting has been forced by your site configuration.",
     "core.settings.general": "General",
     "core.settings.language": "Language",
     "core.settings.license": "Licence",

src/core/settings/lang/en.json

@@ -36,6 +36,7 @@
     "filesystemroot": "File system root",
     "fontsize": "Text size",
     "fontsizecharacter": "A",
+    "forcedsetting": "This setting has been forced by your site configuration.",
     "general": "General",
     "language": "Language",
     "license": "Licence",

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

@@ -21,8 +21,11 @@
         </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-label>
-        <ion-select [(ngModel)]="selectedScheme" (ngModelChange)="colorSchemeChanged()" interface="action-sheet">
+            <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
+            <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
+        </ion-label>
+        <ion-select [(ngModel)]="selectedScheme" (ngModelChange)="colorSchemeChanged()" interface="action-sheet" [disabled]="colorSchemeDisabled">
             <ion-option *ngFor="let scheme of colorSchemes" [value]="scheme">{{ 'core.settings.colorscheme-' + scheme | translate }}</ion-option>
         </ion-select>
     </ion-item>

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

@@ -47,6 +47,7 @@ export class CoreSettingsGeneralPage {
     analyticsEnabled: boolean;
     colorSchemes = [];
     selectedScheme: string;
+    colorSchemeDisabled: boolean;
 
     constructor(private appProvider: CoreAppProvider, private configProvider: CoreConfigProvider, fileProvider: CoreFileProvider,
             private eventsProvider: CoreEventsProvider, private langProvider: CoreLangProvider,
@@ -63,6 +64,12 @@ export class CoreSettingsGeneralPage {
         }
 
         if (!CoreConfigConstants.forceColorScheme) {
+            this.colorSchemeDisabled = this.settingsHelper.isColorSchemeDisabledInSite();
+
+            if (this.colorSchemeDisabled) {
+                this.colorSchemes.push('light');
+                this.selectedScheme = this.colorSchemes[0];
+            } else {
                 let defaultColorScheme = 'light';
 
                 // Auto is not working on iOS right now until we update Webkit.
@@ -78,6 +85,7 @@ export class CoreSettingsGeneralPage {
                     this.selectedScheme = scheme;
                 });
             }
+        }
 
         // Sort them by name.
         this.languages.sort((a, b) => {

src/core/settings/providers/helper.ts

@@ -24,6 +24,7 @@ import { CoreConstants } from '@core/constants';
 import { CoreConfigProvider } from '@providers/config';
 import { CoreConfigConstants } from '../../../configconstants';
 import { TranslateService } from '@ngx-translate/core';
+import { CoreSite } from '@classes/site';
 
 /**
  * Settings helper service.
@@ -38,6 +39,28 @@ export class CoreSettingsHelper {
             private sitesProvider: CoreSitesProvider, private utils: CoreUtilsProvider, private translate: TranslateService,
             private configProvider: CoreConfigProvider) {
         this.logger = loggerProvider.getInstance('CoreSettingsHelper');
+
+        if (!CoreConfigConstants.forceColorScheme) {
+            // Update color scheme when a user enters or leaves a site, or when the site info is updated.
+            const applySiteScheme = (): void => {
+                if (this.isColorSchemeDisabledInSite()) {
+                    // Dark mode is disabled, force light mode.
+                    this.setColorScheme('light');
+                } else {
+                    // Reset color scheme settings.
+                    this.initColorScheme();
+                }
+            };
+
+            eventsProvider.on(CoreEventsProvider.LOGIN, applySiteScheme.bind(this));
+
+            eventsProvider.on(CoreEventsProvider.SITE_UPDATED, applySiteScheme.bind(this));
+
+            eventsProvider.on(CoreEventsProvider.LOGOUT, () => {
+                // Reset color scheme settings.
+                this.initColorScheme();
+            });
+        }
     }
 
     /**
@@ -189,6 +212,13 @@ export class CoreSettingsHelper {
             this.setFontSize(fontSize);
         });
 
+        this.initColorScheme();
+    }
+
+    /**
+     * Init the color scheme.
+     */
+    initColorScheme(): void {
         if (!!CoreConfigConstants.forceColorScheme) {
             this.setColorScheme(CoreConfigConstants.forceColorScheme);
         } else {
@@ -205,6 +235,30 @@ export class CoreSettingsHelper {
         }
     }
 
+    /**
+     * Check if color scheme is disabled in a site.
+     *
+     * @param siteId Site ID. If not defined, current site.
+     * @return Promise resolved with whether color scheme is disabled.
+     */
+    async isColorSchemeDisabled(siteId?: string): Promise<boolean> {
+        const site = await this.sitesProvider.getSite(siteId);
+
+        return this.isColorSchemeDisabledInSite(site);
+    }
+
+    /**
+     * Check if color scheme is disabled in a site.
+     *
+     * @param site Site instance. If not defined, current site.
+     * @return Whether color scheme is disabled.
+     */
+    isColorSchemeDisabledInSite(site?: CoreSite): boolean {
+        site = site || this.sitesProvider.getCurrentSite();
+
+        return site ? site.isFeatureDisabled('NoDelegate_DarkMode') : false;
+    }
+
     /**
      * Set document default font size.
      *