From 8de91291ddbeb42098f56ccef38f3ddca66fe448 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Thu, 2 Jun 2022 15:05:43 +0530 Subject: [PATCH] Add more methods to ThemeLoader --- src/platform/web/ThemeLoader.ts | 44 +++++++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index ca7ef641..f302bc0e 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -37,6 +37,11 @@ type DefaultVariant = { type ThemeInformation = NormalVariant | DefaultVariant; +export enum ColorSchemePreference { + Dark, + Light +}; + export class ThemeLoader { private _platform: Platform; private _themeMapping: Record; @@ -104,7 +109,7 @@ export class ThemeLoader { cssLocation, id: themeId }; - } + } if (defaultDarkVariant.id && defaultLightVariant.id) { /** * 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) { - 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); 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.settingsStorage.setString("theme", themeId); - }); + }); } get themeMapping(): Record { @@ -146,10 +151,11 @@ export class ThemeLoader { } getDefaultTheme(): string | undefined { - if (window.matchMedia("(prefers-color-scheme: dark)").matches) { - return this._platform.config["defaultTheme"].dark; - } else if (window.matchMedia("(prefers-color-scheme: light)").matches) { - return this._platform.config["defaultTheme"].light; + switch (this.preferredColorScheme) { + case ColorSchemePreference.Dark: + return this._platform.config["defaultTheme"].dark; + 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 { + return await this._platform.settingsStorage.getString("theme-variant"); + } + + async removeVariantFromStorage(): Promise { + await this._platform.settingsStorage.remove("theme-variant"); + } }