EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/core/settings/pages/general/general.ts
View File

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

48
src/core/settings/providers/helper.ts
View File

@ -44,6 +44,7 @@ export interface CoreSiteSpaceUsage {
export class CoreSettingsHelper { export class CoreSettingsHelper {
protected logger; protected logger;
protected syncPromises = {}; protected syncPromises = {};
protected colorSchemes: string[] = [];
constructor(loggerProvider: CoreLoggerProvider, constructor(loggerProvider: CoreLoggerProvider,
protected appProvider: CoreAppProvider, protected appProvider: CoreAppProvider,
@ -342,14 +343,7 @@ export class CoreSettingsHelper {
if (!!CoreConfigConstants.forceColorScheme) { if (!!CoreConfigConstants.forceColorScheme) {
this.setColorScheme(CoreConfigConstants.forceColorScheme); this.setColorScheme(CoreConfigConstants.forceColorScheme);
} else { } else {
let defaultColorScheme = 'light'; this.configProvider.get(CoreConstants.SETTINGS_COLOR_SCHEME, 'light').then((scheme) => {
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); this.setColorScheme(scheme);
}); });
} }
@ -388,6 +382,40 @@ export class CoreSettingsHelper {
document.documentElement.style.fontSize = fontSize + '%'; 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. * Set body color scheme.
* *
@ -397,6 +425,10 @@ export class CoreSettingsHelper {
document.body.classList.remove('scheme-light'); document.body.classList.remove('scheme-light');
document.body.classList.remove('scheme-dark'); document.body.classList.remove('scheme-dark');
document.body.classList.remove('scheme-auto'); document.body.classList.remove('scheme-auto');
const colorSchemes = this.getAllowedColorSchemes();
colorScheme = colorSchemes.indexOf(colorScheme) >= 0 ? colorScheme : colorSchemes[0];
document.body.classList.add('scheme-' + colorScheme); document.body.classList.add('scheme-' + colorScheme);
} }
} }