11import { getThemeProperties , getRegisteredPackages , isThemeRegistered } from "../asset-registries/Themes.js" ;
2- import { removeStyle , createOrUpdateStyle } from "../ManagedStyles.js" ;
2+ import { createOrUpdateStyle } from "../ManagedStyles.js" ;
33import getThemeDesignerTheme from "./getThemeDesignerTheme.js" ;
44import { fireThemeLoaded } from "./ThemeLoaded.js" ;
5- import { getFeature } from "../FeaturesRegistry.js" ;
65import { attachCustomThemeStylesToHead , getThemeRoot } from "../config/ThemeRoot.js" ;
7- import type OpenUI5Support from "../features/OpenUI5Support.js" ;
86import { DEFAULT_THEME } from "../generated/AssetParameters.js" ;
97import { getCurrentRuntimeIndex } from "../Runtimes.js" ;
108
@@ -31,10 +29,6 @@ const loadThemeBase = async (theme: string) => {
3129 }
3230} ;
3331
34- const deleteThemeBase = ( ) => {
35- removeStyle ( "data-ui5-theme-properties" , BASE_THEME_PACKAGE ) ;
36- } ;
37-
3832const loadComponentPackages = async ( theme : string , externalThemeName ?: string ) => {
3933 const registeredPackages = getRegisteredPackages ( ) ;
4034
@@ -53,42 +47,34 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string)
5347} ;
5448
5549const detectExternalTheme = async ( theme : string ) => {
50+ if ( getThemeRoot ( ) ) {
51+ await attachCustomThemeStylesToHead ( theme ) ;
52+ }
53+
5654 // If theme designer theme is detected, use this
5755 const extTheme = getThemeDesignerTheme ( ) ;
5856 if ( extTheme ) {
5957 return extTheme ;
6058 }
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- }
7759} ;
7860
7961const applyTheme = async ( theme : string ) => {
62+ // Detect external theme if available (e.g., from theme designer or custom theme root)
8063 const extTheme = await detectExternalTheme ( theme ) ;
8164
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- }
88-
89- // Always load component packages properties. For non-registered themes, try with the base theme, if any
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
9069 const packagesTheme = isThemeRegistered ( theme ) ? theme : extTheme && extTheme . baseThemeName ;
91- await loadComponentPackages ( packagesTheme || DEFAULT_THEME , extTheme && extTheme . themeName === theme ? theme : undefined ) ;
70+ const effectiveTheme = packagesTheme || DEFAULT_THEME ;
71+
72+ // Load base theme properties
73+ await loadThemeBase ( effectiveTheme ) ;
74+
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 ) ;
9278
9379 fireThemeLoaded ( theme ) ;
9480} ;
0 commit comments