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

Support using derived theme as default theme

Browse source
This commit is contained in:
RMidhunSuresh 2022-07-17 19:42:26 +05:30
parent da0a918c18
commit ce5db47708
1 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,16 +25,14 @@ type NormalVariant = {
variables?: any; variables?: any;
}; };
type Variant = NormalVariant & {
variantName: string;
};
type DefaultVariant = { type DefaultVariant = {
dark: NormalVariant & { dark: Variant;
variantName: string; light: Variant;
}; default: Variant;
light: NormalVariant & {
variantName: string;
};
default: NormalVariant & {
variantName: string;
};
} }
export type ThemeInformation = NormalVariant | DefaultVariant; export type ThemeInformation = NormalVariant | DefaultVariant;
@ -76,18 +74,22 @@ export class ThemeLoader {
console.error(e); console.error(e);
} }
} }
Object.assign(this._themeMapping, this._themeBuilder.themeMapping);
//Add the default-theme as an additional option to the mapping //Add the default-theme as an additional option to the mapping
const defaultThemeId = this.getDefaultTheme(); const defaultThemeId = this.getDefaultTheme();
if (defaultThemeId) { if (defaultThemeId) {
const themeDetails = this._findThemeDetailsFromId(defaultThemeId); const themeDetails = this._findThemeDetailsFromId(defaultThemeId);
if (themeDetails) { if (themeDetails) {
this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.cssLocation }; this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.themeData.cssLocation! };
const variables = themeDetails.themeData.variables;
if (variables) {
this._themeMapping["Default"].variables = variables;
}
} }
} }
log.log({ l: "Default Theme", theme: defaultThemeId}); log.log({ l: "Default Theme", theme: defaultThemeId});
log.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" }); log.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" });
log.log({ l: "Result", themeMapping: this._themeMapping }); log.log({ l: "Result", themeMapping: this._themeMapping });
Object.assign(this._themeMapping, this._themeBuilder.themeMapping);
}); });
} }
@ -222,16 +224,16 @@ export class ThemeLoader {
} }
} }
private _findThemeDetailsFromId(themeId: string): {themeName: string, cssLocation: string, variant?: string} | undefined { private _findThemeDetailsFromId(themeId: string): {themeName: string, themeData: Partial<Variant>} | undefined {
for (const [themeName, themeData] of Object.entries(this._themeMapping)) { for (const [themeName, themeData] of Object.entries(this._themeMapping)) {
if ("id" in themeData && themeData.id === themeId) { if ("id" in themeData && themeData.id === themeId) {
return { themeName, cssLocation: themeData.cssLocation }; return { themeName, themeData };
} }
else if ("light" in themeData && themeData.light?.id === themeId) { else if ("light" in themeData && themeData.light?.id === themeId) {
return { themeName, cssLocation: themeData.light.cssLocation, variant: "light" }; return { themeName, themeData: themeData.light };
} }
else if ("dark" in themeData && themeData.dark?.id === themeId) { else if ("dark" in themeData && themeData.dark?.id === themeId) {
return { themeName, cssLocation: themeData.dark.cssLocation, variant: "dark" }; return { themeName, themeData: themeData.dark };
} }
} }
} }