MOBILE-3572 settings: Set light mode as default scheme mode
parent
1f1912bf98
commit
b6cb643978
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue