Text: theme parameter has no effect

[petejohnson84]

Describe the bug
Using the Text component, the theme parameter has no effect. The theme is set to dark mode, so the text is white. When adding the theme parameter and specifying sap_fiori_3, I would expect the text to become non-white, as it should not respect the dark mode theme.

To Reproduce
Steps to reproduce the behavior:

1. Add the following code:
   <Text theme={Themes.sap_fiori_3}>Hello World</Text>
2. Change the theme being applied, note the text will always respect the applied theme rather than the theme supplied by the parameter. I also tried the hard-coded string 'sap_fiori_3' which did not work either.

Expected behavior
The passed theme takes precedence over the ThemeProvider.

UI5 Web Components for React Information
Operating System: macOS Catalina
@ui5/webcomponents-react version: ^0.9.3
Do you have a dependency to@ui5/webcomponents in your package.json? If yes, which version?: ^1.0.0-rc.7

[MarcusNotheis]

Hi @petejohnson84,
thanks for your issue and good catch! The theme prop is a leftover from the very first days of the project and has no effect anymore - but we forgot to remove it.
The recommended way of changing the text color is now

1. changing the css variable --sapTextColor:
   --sapTextColor: black
2. applying the color directly to the text component using either the style or className prop

We'll remove this unused prop.

Best regards,
Marcus

[petejohnson84]

Thanks, Marcus. I will use your recommended approach.

[MarcusNotheis]

FYI - the prop has been removed in version 0.9.4.

[juanfelipe82193]

Hi can someone explain the process to use setTheme for React UI5 web components? I basically want to change the whole app to "sap_fiori_3_dark"

Thanks in advance

[MarcusNotheis]

Hey @juanfelipe82193,
there is a setTheme function provided by the UI5 Web Components which accepts a string of the new theme. It is part of our "Getting Started" Documentation.

Now, there are two options on how to change your theme:

1. You want your application always to be in the dark theme:
   1. Add this code snippet to your index.html

      <script data-ui5-config type="application/json">
       {
         "theme": "sap_fiori_3_dark"
       }
      </script>

   2. Add these imports to your index.js (or whatever your main javascript file is):

      import '@ui5/webcomponents-theme-base/dist/Assets.js';
      import '@ui5/webcomponents/dist/generated/json-imports/Themes';
      import '@ui5/webcomponents-fiori/dist/generated/json-imports/Themes';

   3. Now your application is running in the dark theme.
2. You want to change the theme during runtime
   1. Add those imports to your first javascript file

      import '@ui5/webcomponents-theme-base/dist/Assets.js';
      import '@ui5/webcomponents/dist/generated/json-imports/Themes';
      import '@ui5/webcomponents-fiori/dist/generated/json-imports/Themes';

   2. In the file where you want to change your theme add this import statement

      import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';

   3. Now you can call the setTheme function to change the theme, e.g. setTheme('sap_fiori_3_dark');

One comment on why import statements here are slightly different from our documentation:
By using import '@ui5/webcomponents/dist/generated/json-imports/Themes';, you will only load the available themes for the Web Components. If you would use import '@ui5/webcomponents/dist/Assets';, you would get all available themes + all i18n translations. As the question here was only about theming I decided to make this example with the theme imports. You could exchange those imports with the imports from the documentation and it will still work the same way.

Hope this helps!

[juanfelipe82193]

Hi Marcus, thank you so much for your help!.

Now I have found probably 2 issues around it:

1. All the cards now are changed to "sap_fiori_3_dark" but it seems that the background it not changing at all. Now this can be fixed by adding an inline style to the

   tag that contains all the React components to be something like this (<div style = {{backgroundColor: '#232A31'}}>) and giving a HEX color similar to SAP Fiori 3 dark

2. Within my component I have embedded an component for the profile property as follow.

<ShellBar logo = {'https://developers.sap.com/dam/application/shared/logos/sap-logo-svg.svg.adapt.svg/1493030643828.svg'} profile = { <Avatar icon = 'person-placeholder' size = "XS" shape = 'Circle' /> } primaryTitle = 'My Personal UI5' secondaryTitle = 'Made with SAPUI5' showNotifications = {true} notificationCount = '1' searchField = { <ui5-input placeholder="Enter search criteria ..."/> } />
Now this icon "person-placeholder' is changing its borders to black while the other icons of the shell bar like search glass and bell notification remains white.

I hope this can be fixed and it is just a mistake from me.

Thanks again for all your help.

[MarcusNotheis]

For Issue 1 you can apply a style to e.g. the body tag using

<body style="background-color: var(--sapBackgroundColor)">
...
</body>

For issue number 2:
The avatar is now looking this this, right?

I think this is an issue within the ui5-webcomponents framework, you can open an issue for that behaviour here.

Best regards,
Marcus

[juanfelipe82193]

Hi Marcus, thanks for the body tag tip. New issue been raised #1944

Thanks and have a great day!