11import { getThemeProperties , getRegisteredPackages , isThemeRegistered } from "../asset-registries/Themes.js" ;
2- import { createOrUpdateStyle } from "../ManagedStyles.js" ;
2+ import { removeStyle , createOrUpdateStyle } from "../ManagedStyles.js" ;
33import getThemeDesignerTheme from "./getThemeDesignerTheme.js" ;
44import { fireThemeLoaded } from "./ThemeLoaded.js" ;
5+ import { getFeature } from "../FeaturesRegistry.js" ;
56import { attachCustomThemeStylesToHead , getThemeRoot } from "../config/ThemeRoot.js" ;
7+ import type OpenUI5Support from "../features/OpenUI5Support.js" ;
68import { DEFAULT_THEME } from "../generated/AssetParameters.js" ;
79import { getCurrentRuntimeIndex } from "../Runtimes.js" ;
810
@@ -29,6 +31,10 @@ const loadThemeBase = async (theme: string) => {
2931 }
3032} ;
3133
34+ const deleteThemeBase = ( ) => {
35+ removeStyle ( "data-ui5-theme-properties" , BASE_THEME_PACKAGE ) ;
36+ } ;
37+
3238const loadComponentPackages = async ( theme : string , externalThemeName ?: string ) => {
3339 const registeredPackages = getRegisteredPackages ( ) ;
3440
@@ -47,34 +53,42 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string)
4753} ;
4854
4955const detectExternalTheme = async ( theme : string ) => {
50- if ( getThemeRoot ( ) ) {
51- await attachCustomThemeStylesToHead ( theme ) ;
52- }
53-
5456 // If theme designer theme is detected, use this
5557 const extTheme = getThemeDesignerTheme ( ) ;
5658 if ( extTheme ) {
5759 return extTheme ;
5860 }
61+
62+ // If OpenUI5Support is enabled, try to find out if it loaded variables
63+ const openUI5Support = getFeature < typeof OpenUI5Support > ( "OpenUI5Support" ) ;
64+ if ( openUI5Support && openUI5Support . isOpenUI5Detected ( ) ) {
65+ const varsLoaded = openUI5Support . cssVariablesLoaded ( ) ;
66+ if ( varsLoaded ) {
67+ return {
68+ themeName : openUI5Support . getConfigurationSettingsObject ( ) ?. theme , // just themeName
69+ baseThemeName : "" , // baseThemeName is only relevant for custom themes
70+ } ;
71+ }
72+ } else if ( getThemeRoot ( ) ) {
73+ await attachCustomThemeStylesToHead ( theme ) ;
74+
75+ return getThemeDesignerTheme ( ) ;
76+ }
5977} ;
6078
6179const applyTheme = async ( theme : string ) => {
62- // Detect external theme if available (e.g., from theme designer or custom theme root)
6380 const extTheme = await detectExternalTheme ( theme ) ;
6481
65- // Determine which theme to use for component packages:
66- // 1. If the requested theme is registered, use it directly
67- // 2. If external theme exists, use its base theme (e.g., "my_custom_theme" extends "sap_fiori_3")
68- // 3. Otherwise, fallback to the default theme
69- const packagesTheme = isThemeRegistered ( theme ) ? theme : extTheme && extTheme . baseThemeName ;
70- const effectiveTheme = packagesTheme || DEFAULT_THEME ;
71-
72- // Load base theme properties
73- await loadThemeBase ( effectiveTheme ) ;
82+ // Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
83+ if ( ! extTheme || theme !== extTheme . themeName ) {
84+ await loadThemeBase ( theme ) ;
85+ } else {
86+ deleteThemeBase ( ) ;
87+ }
7488
75- // Load component-specific theme properties
76- // Pass external theme name only if it matches the requested theme to avoid conflicts
77- await loadComponentPackages ( effectiveTheme , extTheme && extTheme . themeName === theme ? theme : undefined ) ;
89+ // Always load component packages properties. For non-registered themes, try with the base theme, if any
90+ const packagesTheme = isThemeRegistered ( theme ) ? theme : extTheme && extTheme . baseThemeName ;
91+ await loadComponentPackages ( packagesTheme || DEFAULT_THEME , extTheme && extTheme . themeName === theme ? theme : undefined ) ;
7892
7993 fireThemeLoaded ( theme ) ;
8094} ;
0 commit comments