Automatic dark/light theme selection based on browser theme

[pubmikeb]

It would be great if UI5 could decided which version of a theme (dark/light) to use based on browser's theme.

Just like it works at StackOverflow and GitHub.

[terezamch]

Hello @pubmikeb ,

I am happy to share that this functionality is already implemented and will come with version 1.88 of ui5.

Best regards,
Tereza

[codeworrior]

@terezamch I guess you refer to b917c25 which implements theme auto-switching for the SDK / Demokit and which can already be seen on https://openui5nightly.hana.ondemand.com.

I'm not sure whether this is what @pubmikeb was looking for. To my understanding, he expected this to be a generic feature of the UI5 library itself, not of the SDK.

AFAIK, there's no such feature planned for the runtime alone.

[pubmikeb]

@codeworrior, thanks for the prompt response.
Yes, I mean the ability of the UI5 app to detect the theme-mode used in a browser and to adjust it automatically upon the app loading, just like https://openui5nightly.hana.ondemand.com does it right now.

Hopefully, this feature will be added to the roadmap.

[CruciformHawk7]

Here is a workaround.

[pubmikeb]

@CruciformHawk7, great job!
Hope, to see this functionality out-of-box any soon.

[flovogt]

Hi @pubmikeb, we've discussed this feature enhancement and it will be an awesome feature. Any progress of the implementation will be published here.

[flovogt]

This enhancement will be developed in backlog item FIORITECHP1-24616.

[Thodd]

Hi @pubmikeb,

in the meantime UI5 supports an automatic detection of your operation systems dark mode:
01e9de7

However there is a caveat with some things to consider:

If a theme is configured, UI5 will still take it as-is.
For example if you set sap_horizon you will still get the light variant, even if your OS is set to dark mode.

The reason is simply compatibility.
Currently the theme family name implies light mode. So if somebody has user settings for sap_horizon, so far they got the light variant and that will stay.

Now if no theme is configured though:
UI5 will now default to the latest available theme and respect your dark/light mode settings:
https://plnkr.co/edit/VugdYFFMJW5HN4Qr?preview

The defaulting for unknown themes, as well as the dark-mode detection, is available in all long term supported minor versions:

• latest (currently 1.118-SNAPSHOT)
• 1.114
• 1.108
• 1.96
• 1.84
• 1.71

Please be aware that only the latest patches of the respective releases contain said feature.

Best regards,

Thor

[pubmikeb]

@Thodd, thanks for implementing this feature.

However, the following note:

If a theme is configured, UI5 will still take it as-is.
For example if you set sap_horizon you will still get the light variant, even if your OS is set to dark mode.

significantly limits the way this feature can be used. For instance, if I want that my app will use sap_horizon and the light/dark mode will be automatically set by UI5 depending on the end-customer browser configuration, I still need to use this workaround.

It would be great to add ability to specify the logic this feature works somewhere in manifest.json.

[boghyon]

@pubmikeb

I want that my app will use sap_horizon [...]

Removing data-sap-ui-theme from your app will automatically apply the latest available default theme depending on the consumed UI5 version: https://sdk.openui5.org/topic/38ff8c27b022475a92b591bcf6262551

I.e. if the app runs e.g. with the next 1.108 patch release that contains the change dcb529c and without the sap-ui-theme config when bootstrapping, the framework will automatically pick a Horizon theme and switch to either sap_horizon or sap_horizon_dark depending on the user preference.

For older releases where the Horizon theme is not available yet, the next available default theme will be applied, e.g. a Quartz theme (sap_fiori_3 or sap_fiori_3_dark) if running with 1.84.

---

Similar idea in UI5 Tooling: SAP/ui5-tooling#864

[pubmikeb]

@pubmikeb

I want that my app will use sap_horizon [...]

Removing data-sap-ui-theme from your app will automatically apply the latest available default theme depending on the consumed UI5 version: https://sdk.openui5.org/topic/38ff8c27b022475a92b591bcf6262551

I.e. if the app runs e.g. with the next 1.108 patch release that contains the change dcb529c and without the sap-ui-theme config when bootstrapping, the framework will automatically pick a Horizon theme and switch to either sap_horizon or sap_horizon_dark depending on the user preference.

For older releases where the Horizon theme is not available yet, the next available default theme will be applied, e.g. a Quartz theme (sap_fiori_3 or sap_fiori_3_dark) if running with 1.84.

@boghyon, thanks for clarification. The initial idea behind this feature request was that a developer sets a theme for the app, and the UI5 engine decides which version (light/dark) of the selected theme to show to the specific user. Currently, this works only if I don't specify a theme at all, but I want to be able to benefit from this feature even if I specify the particular theme. Let say, I set sap_fiori_3 and then I expect that UI5 will use sap_fiori_3 for the users with light UI and sap_fiori_3_dark for the users with enabled dark mode without any additional code from my side. Currently, such scenario is possible only with a workaround mentioned above, not out-of-box, even if #3180 is integrated to the codebase.

I would expect an option to enable/disable automatic light/dark mode switcher in manifest.json:

autoLightDarkUIModeSelector: true/false