Styling: Contrasting Background Color

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.