Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add more methods to ThemeLoader

Browse source
This commit is contained in:
RMidhunSuresh 2022-06-02 15:05:43 +05:30
parent dc2d1ce700
commit 8de91291dd
1 changed files with 36 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/platform/web/ThemeLoader.ts
View file

@ -37,6 +37,11 @@ type DefaultVariant = {
type ThemeInformation = NormalVariant | DefaultVariant; type ThemeInformation = NormalVariant | DefaultVariant;
export enum ColorSchemePreference {
Dark,
Light
};
export class ThemeLoader { export class ThemeLoader {
private _platform: Platform; private _platform: Platform;
private _themeMapping: Record<string, ThemeInformation>; private _themeMapping: Record<string, ThemeInformation>;
@ -104,7 +109,7 @@ export class ThemeLoader {
cssLocation, cssLocation,
id: themeId id: themeId
}; };
} }
if (defaultDarkVariant.id && defaultLightVariant.id) { if (defaultDarkVariant.id && defaultLightVariant.id) {
/** /**
* As mentioned above, if there's both a default dark and a default light variant, * As mentioned above, if there's both a default dark and a default light variant,
@ -123,14 +128,14 @@ export class ThemeLoader {
} }
setTheme(themeId: string, log?: ILogItem) { setTheme(themeId: string, log?: ILogItem) {
this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeId}, () => { this._platform.logger.wrapOrRun(log, { l: "change theme", id: themeId }, () => {
const themeLocation = this._findThemeLocationFromId(themeId); const themeLocation = this._findThemeLocationFromId(themeId);
if (!themeLocation) { if (!themeLocation) {
throw new Error( `Cannot find theme location for theme "${themeId}"!`); throw new Error(`Cannot find theme location for theme "${themeId}"!`);
} }
this._platform.replaceStylesheet(themeLocation); this._platform.replaceStylesheet(themeLocation);
this._platform.settingsStorage.setString("theme", themeId); this._platform.settingsStorage.setString("theme", themeId);
}); });
} }
get themeMapping(): Record<string, ThemeInformation> { get themeMapping(): Record<string, ThemeInformation> {
@ -146,10 +151,11 @@ export class ThemeLoader {
} }
getDefaultTheme(): string | undefined { getDefaultTheme(): string | undefined {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) { switch (this.preferredColorScheme) {
return this._platform.config["defaultTheme"].dark; case ColorSchemePreference.Dark:
} else if (window.matchMedia("(prefers-color-scheme: light)").matches) { return this._platform.config["defaultTheme"].dark;
return this._platform.config["defaultTheme"].light; case ColorSchemePreference.Light:
return this._platform.config["defaultTheme"].light;
} }
} }
@ -166,4 +172,26 @@ export class ThemeLoader {
} }
} }
} }
get preferredColorScheme(): ColorSchemePreference {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return ColorSchemePreference.Dark;
}
else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
return ColorSchemePreference.Light;
}
throw new Error("Cannot find preferred colorscheme!");
}
async persistVariantToStorage(variant: string) {
await this._platform.settingsStorage.setString("theme-variant", variant);
}
async getCurrentVariant(): Promise<string> {
return await this._platform.settingsStorage.getString("theme-variant");
}
async removeVariantFromStorage(): Promise<void> {
await this._platform.settingsStorage.remove("theme-variant");
}
} }