Applying dark theme consistency on ui5title and other non-UI5 HTML elements

[nemethmik]

Hello!
I am absolutely impressed the performance and features of UI5 Web Components.
I am experimenting with dark theme, which is terribly important for mobile business applications because of battery saving.
Here is a sample https://lemon-island-020376c03.azurestaticapps.net/
I changed UI5 to setTheme("sap_fiori_3_dark") which works fine with the ui5-table and ui5-button components, but ui5-title ignores dark mode. Is that intentional?
What is the official way to change the background and text color in ui5-title or any other non-UI5 HTML elements to reflect the theme settings?
Thank you so much for the help, Miklos

[nemethmik]

In the meantime I started to use ui5-page and it made programming the layout of a mobile application dead easy.
Here is a demo of the solution https://lemon-island-020376c03.azurestaticapps.net/

[fifoosid]

Hi @nemethmik

Thanks for the kind words!

When it comes to ui5-title it is not ignoring the dark theme that you have set. The spec for ui5-title says that in sap_fiori_3_dark theme it's color should be white. You can notice that if you change the theme to sap_fiori_3 the color of the title would be black.

When it comes to restyling web components we have a couple of approaches, depending on what exactly you need to restyle:

1. If you need to style a generic CSS property(depends on how the component is structured). We aim to expose important CSS properties to be changed with this approach.

Example: If we want to change the color & background of ui5-title, you can do it like this:

ui5-title {
    color: red;
    background: white;
}

Note: This will restyle all ui5-title tags on the page. If you want to target only one/a couple of tags from a given page, you can add a CSS class & then change your CSS selector.

2. For some complex components, we have exposed a CSS Shadow Parts. For example ui5-slider has exposed such shadow parts. Check out the docs here(Check section CSS Shadow Parts). With CSS Shadow Parts you have reasonable amount of freedom.

Example(taken from our codebase):

[ui5-slider]::part(handle) {
    width: 11px;
    height: 1.25rem;
    background: transparent;
    margin-left: -2px;
    margin-top: 1px;
}

3. If you want to have full freedom when it comes to restyling the components, you can use a method that we have exposed. Example:

import { addCustomCSS } from "@ui5/webcomponents-base/dist/Theming.js";
addCustomCSS("ui5-select", ".ui5-select-root { background-color: red; } ")

Note: This approach is not recommended because you are breaking the encapsulation that is provided by web components. However, if you need to make some specific changes, this might be your only choice. Please use this approach with caution.

Hope that this answers your quiestions!

[nemethmik]

Wow! That is a tremendous help, thank You so much for the detailed description. UI5 web components are awesome, and your supportive community is excellent, too, which is terribly important when picking a technology stack. Take care and all the best.
For the sake of an interesting fact, I have found the first Browser that doesn't support custom elements. You'd never guess which is that?
It's the Samsung Galaxy Watch (Tizen) Samsung Browser, which is really awesome anyway: So, I wrote Samsung that please add Custom Element support to this smartwatch browser, too. I am planning to buy the new Samsung Galaxy Watch 4 with Google's WearOS, I wonder if that browser supports custom elements. Apple Watch has no browser.

[fifoosid]

Well, I definitely didn't expect such a browser. Let's hope that they will enable the support for web components soon 🤞