UI5 Web Components for Angular provides directives for each UI5 Web Component. The directives allow to easily build your Angular application following the SAP Design System.
connect the theming from UI5 Web Components and Fundamental Styles (or Common CSS). The page basics are coming from Styles and the component related themes are coming from Web Components. The UI5 Web Components already provide an API to load custom themes which is the setTheme method like I have done it for the SolidJS POC: https://github.com/petermuessig/solidjs-todoapp/blob/main/src/assets/ThemeSupport.js#L1. This loads and embeds a different set of CSS variables for that theme (you can see this in the head AFAIR). For the SolidJS POC that wasn’t sufficient as Styles needed some delta theming CSS. And this has been embedded in the themeLoaded event handler.
the outcome should be the usage of the WebC API to set the theme and the Styles or Common CSS will also be also adopted to it by reusing the CSS Variables or maybe in addition hook into the themeLoaded event to load the delta theming files.
[x] Theming will be supported through ThemingModule and it's .forRoot() method which supports passing default configuration;
[x] Common CSS can be loaded with the help of schematics during installing of the package and configuring the ThemingModule to load additional assets;
[ ] Static markup components can be loaded with the help of a directives with class selectors, such as .fd-dynamic-page, which will load dynamic-page.css file automatically during directive initialization
Feature Request Description
Also ui5-webcomponents-react make use of the UI5 Web Components theming API: https://sap.github.io/ui5-webcomponents-react/?path=/docs/getting-started--page#theming
the outcome should be the usage of the WebC API to set the theme and the Styles or Common CSS will also be also adopted to it by reusing the CSS Variables or maybe in addition hook into the themeLoaded event to load the delta theming files.
[x] Theming will be supported through ThemingModule and it's .forRoot() method which supports passing default configuration;
[x] Common CSS can be loaded with the help of schematics during installing of the package and configuring the ThemingModule to load additional assets;
[ ] Static markup components can be loaded with the help of a directives with class selectors, such as .fd-dynamic-page, which will load dynamic-page.css file automatically during directive initialization