MOBILE-3572 settings: Set light mode as default scheme mode

main
Pau Ferrer Ocaña 2020-10-15 22:30:09 +02:00
parent 1f1912bf98
commit b6cb643978
2 changed files with 42 additions and 18 deletions

View File

@ -71,17 +71,9 @@ export class CoreSettingsGeneralPage {
this.colorSchemes.push('light');
this.selectedScheme = this.colorSchemes[0];
} else {
let defaultColorScheme = 'light';
this.colorSchemes = this.settingsHelper.getAllowedColorSchemes();
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.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, 'light').then((scheme) => {
this.selectedScheme = scheme;
});
}

View File

@ -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);
}
}