Custom theme doesn't load

[deathctalker]

Describe the bug An error "You have to import the @ui5/webcomponents-theme-base/dist/Assets.js module to switch to additional themes" occurs when calling the method setTheme('theme_green');

To reproduce Steps to reproduce the behavior:

1. Angular 8 + @ui5/webcomponents RC7
2. In module app.component.ts make import { registerThemeProperties } from '@ui5/webcomponents-base/dist/asset-registries/Themes.js'; import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; import themeGreen from '../assets/theme_green/parameters-bundle.css.json';
3. ngOnInit() { registerThemeProperties('ui5-app1', 'theme_green', themeGreen); }
4. setThemeGreen() { setTheme('theme_green'); }
5. function applyTheme const extTheme = detectExternalTheme(); extTheme = undefined
6. function detectExternalTheme const extTheme = getThemeDesignerTheme();
7. function getThemeDesignerTheme let el = document.querySelector(".sapThemeMetaData-Base-baseLib"); result el = null

What could be the problem?

Context

• UI5 Web Components version UI5 Web Components version v1.0.0-rc.7
• OS/Platform: Mac OS X
• Browser (if relevant): Chrome
• Other information: {...}

Affected components (if known)

Log output / Any errors in the console Uncaught (in promise) Error: You have to import the @ui5/webcomponents-theme-base/dist/Assets.js module to switch to additional themes at fetchThemeProperties (Themes.js:68) at getThemeProperties (Themes.js:57) at loadThemeBase (applyTheme.js:19) at applyTheme (applyTheme.js:66) at setTheme (Theme.js:22) at AppComponent.setThemeGreen (app.component.ts:37) at Object.eval [as handleEvent] (AppComponent.html:4) at handleEvent (core.js:43993) at callWithDebugContext (core.js:45632) at Object.debugHandleEvent [as handleEvent] (core.js:45247) parameters-bundle.css.json.zip

parameters-bundle.css.json.zip

[vladitasev]

Hello @deathctalker ,

For a brief period of time, when we first started exploring custom theming, we allowed the registerThemeProperties API for end users, and there was even a documentation article explaining how to use it. It this where you've seen the usage of this function?

However, currently we only support custom themes in a declarative way, via HTML, as described here: https://github.com/SAP/ui5-webcomponents/blob/master/docs/CustomTheming.md

Did you try the steps from the tutorial? Basically you need to either create a <style> and paste the theme designer output there, or a <link> and point to a CSS file with it.

Then you load your app with theme set to the name of your custom theme. Note: the name of your custom theme is meaningful, so you must set it in theme designer. This name is later detected as part of the metadata inside the generated CSS, f.e. for a theme with name="my_custom_theme" we have:

'data:text/plain;utf-8,{"Path": "Base.baseLib.my_custom_theme.css_variables"

in the first line of the generated output.

Regards, Vladi

[deathctalker]

Hello @vladitasev,

1. The document does not describe the moment: 'data:text/plain;utf-8,{"Path": "Base.baseLib.my_custom_theme.css_variables" I suggest adding this moment to the document. As a result I was able to connect an external theme.

2. How to register multiple themes?

   This way I can only register one theme

3. But this method is not convenient for registering a theme. I read the source code of the project and made an npm package for the theme similar to the base theme. The package has Themes.js in which registerThemeProperties is called with my theme It would be convenient to install the theme using the npm-i mytheme method. I think this is the right way?