If at some point it is necessary that the components of the Design System are aware of the color on which they are going to be displayed to guarantee their correct visibility, we must wrap the container (where the components of the Design System are going to be displayed) with the BackgroundColorProvider
and pass it the background color. This way the BackgroundColorProvider
will evaluate that color and if it is dark it will show the onDark version of the components.
In this example we see how the same DxcTextInput
component is shown in a different way, in the first case it is shown in its onDark version, since we have wrapped the container with theBackgroundColorProvider
as we explained in the previous paragraph.