search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 262 forks source link

All UI Element_ UIs is adapted for OS themes. #8890

Closed c5369706 closed 4 months ago

c5369706 commented 4 months ago

Bug Description

Observed Behavior: The application is adapted to the operating system themes on selecting ** the ‘Aquatic, Desert, Dusk and Night sky’ themes in the operating system settings.

Expected Behavior: The application should not be adapted to the operating system themes on selecting the ‘Aquatic, Desert, Dusk and Night sky’ themes in the operating system settings.

**

[{}“Note: The issue reported above persists throughout application. Hence, it should be corrected for all the occurrences.”]{}

Affected Component

@ui5/webcomponents-base/dist/config/Theme

Expected Behaviour

Expected Behavior: The application should not be adapted to the operating system themes on selecting the ‘Aquatic, Desert, Dusk and Night sky’ themes in the operating system settings.

Isolated Example

No response

Steps to Reproduce

Screen Flow:

  1. Issue: Application is adapting to the OS theme.
  2. Reproducing Method:
  3. Open the application in various OS themes (e.g., light mode, dark mode).
  4. Observe how the application's appearance changes according to the OS theme.
  5. Current Behavior:
  6. The application's UI elements change appearance based on the OS theme.

Log Output, Stack Trace or Screenshots

https://github.com/SAP/ui5-webcomponents/assets/168708496/696cdc63-1f59-44b6-b60c-6a8111e56c81

Priority

Medium

UI5 Web Components Version

1.17.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Organization

SAP

Declaration

PetyaMarkovaBogdanova commented 4 months ago

Hi @c5369706 , unfortunately we cannot control this behaviour on web components level. In order to avoid it, you need to add this CSS styles to your application: html, body { forced-color-adjust: none; }

Note that, there is a known issue, regarding that property and you may need to also add a background-color to your html element.

I hope you find that helpful. Best regards, Petya Markova. (UI5 Dispatcher)

c5369706 commented 4 months ago

Thanks for supporting on this.