refactor: call appyTheme after boot, when custom theme is used

Author: ilhan007

packages/base/src/Boot.ts

@@ -3,7 +3,7 @@ import EventProvider from "./EventProvider.js";
 import insertFontFace from "./FontFace.js";
 import insertSystemCSSVars from "./SystemCSSVars.js";
 import insertScrollbarStyles from "./ScrollbarStyles.js";
-import { getTheme } from "./config/Theme.js";
+import { getTheme, getBaseTheme } from "./config/Theme.js";
 import applyTheme from "./theming/applyTheme.js";
 import { registerCurrentRuntime } from "./Runtimes.js";
 import { getFeature } from "./FeaturesRegistry.js";
@@ -88,8 +88,15 @@ const boot = async (): Promise<void> => {
  * @param { string } theme
  */
 const onThemeRegistered = (theme: string) => {
-	if (booted && theme === getTheme()) { // getTheme should only be called if "booted" is true
-		applyTheme(getTheme());
+	if (!booted) {
+		return;
+	}
+	
+	const currentTheme = getTheme();
+	const currentBaseTheme = getBaseTheme();
+
+	if (theme === currentTheme || theme === currentBaseTheme) {
+		applyTheme(currentTheme);
 	}
 };
 

packages/base/src/config/Theme.ts

@@ -7,6 +7,7 @@ import { boot, isBooted } from "../Boot.js";
 import { attachConfigurationReset } from "./ConfigurationReset.js";
 
 let curTheme: string | undefined;
+let curBaseTheme: string | undefined = undefined;
 
 attachConfigurationReset(() => {
 	curTheme = undefined;
@@ -91,11 +92,31 @@ const isLegacyThemeFamilyAsync = async () => {
 
 const isKnownTheme = (theme: string) => SUPPORTED_THEMES.includes(theme);
 
+/**
+ * Returns the base theme of external theme.
+ * @private
+ * @returns {string | undefined} the base theme name
+ */
+const getBaseTheme = (): string | undefined => {
+	return curBaseTheme;
+};
+
+/**
+ * Sets the base theme of the current external theme.
+ * @param { string | undefined } theme the name of the new base theme
+ * @private
+ */
+const setBaseTheme = (theme: string | undefined): void => {
+	curBaseTheme = theme;
+};
+
 export {
 	getTheme,
 	setTheme,
 	isTheme,
 	isLegacyThemeFamily,
 	isLegacyThemeFamilyAsync,
 	getDefaultTheme,
+	getBaseTheme,
+	setBaseTheme,
 };

packages/base/src/theming/applyTheme.ts

@@ -4,6 +4,7 @@ import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
 import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js";
+import { setBaseTheme } from "../config/Theme.js";
 import type OpenUI5Support from "../features/OpenUI5Support.js";
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
 import { getCurrentRuntimeIndex } from "../Runtimes.js";
@@ -87,9 +88,13 @@ const applyTheme = async (theme: string) => {
 	}
 
 	// Always load component packages properties. For non-registered themes, try with the base theme, if any
-	const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
-	await loadComponentPackages(packagesTheme || DEFAULT_THEME, extTheme && extTheme.themeName === theme ? theme : undefined);
+	const externalThemeName = extTheme && extTheme.themeName === theme ? theme : undefined;
+	const baseThemeName = extTheme && extTheme.baseThemeName;
+	const effectiveThemeName = isThemeRegistered(theme) ? theme : (baseThemeName || DEFAULT_THEME);
 
+	await loadComponentPackages(effectiveThemeName, externalThemeName);
+
+	setBaseTheme(baseThemeName);
 	fireThemeLoaded(theme);
 };