Inverse Style
Keep text and UI components readable on light, dark, colorful and image backgrounds with automatically adjusted inverse styles.
Each YOOtheme Pro style is designed around a default background, usually white or light. Text, buttons, forms, cards, navigation and other UI components are carefully styled to look balanced in that context. But when you use a dark, colorful or image background, these elements need an alternative appearance to maintain clear contrast.
The Inverse component in the Style Customizer defines these colors for all UI components, so they stay consistent and readable whenever they appear on an inverse background. Every YOOtheme Pro style already includes carefully designed colors for both default and inverse color modes.
In the YOOtheme Pro page builder, you can set the text color wherever needed. For example, choose light or dark text for image backgrounds or custom background colors to make sure your content remains readable. For sections, cards and tiles with an inverse background, the text color adjusts automatically.
This also works for transparent sticky headers. While users scroll, the header can adapt the color of its logo, navigation and other header elements depending on the section behind it, keeping the header readable across changing backgrounds.
