Styling: ContrastingBackgroundColor

The background colors in a theme are either light or dark by default. However in a light theme you may have a dark area of the page, or in a dark theme a light area. The class oj-color-invert tells the component it is in an inverted color area and to render itself accordingly, but note that it does not actually set a background color.

There are several limitations.

• Not all components support inverting their colors.
• Popups are reparented, and therefore this class must be placed on popup content. See the popup framework doc for more information.

<div class="oj-bg-neutral-170 oj-color-invert">
   <oj-navigation-list>
   </oj-navigation-list>
</div>

In general the background colors in a theme are either light or dark, but not both. This allows components to be freely mixed together. However in some cases you have an area of the page where the lightness of the background is reversed. For example on a light page you may have an off canvas (aka drawer) where the background is dark. The class oj-contrast-marker is a marker class for an area with a contrasting background color. Using compound selectors some components know how to render * * themselves on a contrasting background. For example the navigationList will render itself differently when an ancestor has oj-contrast-marker on it. Note that the components that support this are very limited. The class oj-contrast-marker is only a marker. It has no css properties, for example it does not set foreground/background colors.

<div class="oj-offcanvas-outer-wrapper oj-offcanvas-page">
   <div class="oj-web-applayout-offcanvas oj-contrast-marker oj-offcanvas-start">
   </div>
</div>