Bug: Core ThemingService and Ui5ThemingService are disconnected — dark theme doesn't sync to UI5 Web Components

[droshev]

Bug Description

provideTheming({ defaultTheme: 'sap_horizon_dark' }) does not propagate the theme to UI5 Web Components. The two theming systems (core ThemingService and Ui5ThemingService) are completely disconnected — there's no bridge between them.

Result: fd-* components render in dark theme, but ui5-* web component wrappers stay on light theme (sap_horizon) via adopted stylesheets.

Reproduction

1. Create a new Angular app with both @fundamental-ngx/core and @fundamental-ngx/ui5-webcomponents-ai
2. Configure: provideTheming({ defaultTheme: 'sap_horizon_dark' })
3. Add both a fd-toolbar and a ui5-ai-prompt-input to the page
4. Observe: toolbar is dark, prompt-input is light

Root Cause (3 issues)

1. Wrong injection token

provideTheming() provides THEMING_CONFIG_TOKEN but Ui5ThemingService injects UI5_THEMING_CONFIGURATION. They never connect.

• File: libs/core/theming/provide-theming.ts — provides THEMING_CONFIG_TOKEN
• File: libs/ui5-webcomponents-base/theming/ui5-theming-api.ts line 31 — injects UI5_THEMING_CONFIGURATION (which is never provided)

2. No subscription bridge

When core ThemingService.setTheme() emits via _currentThemeSubject, nothing on the UI5 side subscribes. There's no code that does:

themingService.currentTheme.subscribe(theme => ui5ThemingService.setTheme(theme.id));

• File: libs/core/theming/theming.service.ts lines 106-123 — emits theme change
• File: libs/ui5-webcomponents-base/theming/ui5-theming-api.ts — never subscribes to core service

3. Wrong default

Ui5ThemingService._currentTheme defaults to 'sap_fiori_3' since UI5_THEMING_CONFIGURATION is never provided by provideTheming().

Why the docs app doesn't expose this

The docs app uses sap_horizon (light) as default — which matches UI5 Web Components' own default. The mismatch only appears with dark themes.

The theme switcher in libs/docs/shared/src/lib/core-helpers/toolbar/toolbar.component.ts calls ThemingService.setTheme() but this only updates fd-* component CSS links — UI5 WCs stay on whatever theme they initialized with.

Current Workaround

Call UI5's native setTheme manually in main.ts before bootstrap:

import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
setTheme('sap_horizon_dark');

Proposed Fix

Add a bridge in themingInitializer() or as a separate provider that:

1. Subscribes to ThemingService.currentTheme
2. Forwards theme changes to Ui5ThemingService.setTheme(theme.id)
3. Optionally: make provideTheming() also provide UI5_THEMING_CONFIGURATION with the same defaultTheme

This ensures a single provideTheming({ defaultTheme: 'sap_horizon_dark' }) call configures BOTH theming systems.

Affected Versions

All versions with @fundamental-ngx/ui5-webcomponents-base/theming — the bridge has never worked for non-default themes.

Related

• MCP: Add infrastructure/setup knowledge to component API responses #14175 (MCP should surface theming setup requirements)