diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index dfc7d26d2..391cb9b50 100644 --- a/src/assets/lang/en.json +++ b/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", diff --git a/src/core/settings/lang/en.json b/src/core/settings/lang/en.json index d87510a7d..33c24a3e4 100644 --- a/src/core/settings/lang/en.json +++ b/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", diff --git a/src/core/settings/pages/general/general.html b/src/core/settings/pages/general/general.html index 2cd97f99f..aa271537d 100644 --- a/src/core/settings/pages/general/general.html +++ b/src/core/settings/pages/general/general.html @@ -20,7 +20,7 @@ - +

{{ 'core.settings.colorscheme' | translate }}

{{ 'core.settings.forcedsetting' | translate }}

@@ -29,6 +29,9 @@ {{ 'core.settings.colorscheme-' + scheme | translate }}
+ +

{{ 'core.settings.colorscheme-auto-notice' | translate }}

+

{{ 'core.settings.enablerichtexteditor' | translate }}

diff --git a/src/core/settings/pages/general/general.ts b/src/core/settings/pages/general/general.ts index 89836bfd9..b0b03a40d 100644 --- a/src/core/settings/pages/general/general.ts +++ b/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; }); } diff --git a/src/core/settings/providers/helper.ts b/src/core/settings/providers/helper.ts index b2cb12589..acc335e05 100644 --- a/src/core/settings/providers/helper.ts +++ b/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); } }