Inverse the style of any component for light or dark backgrounds.
Usage
Add the .gls-light class to improve the visibility of objects on dark backgrounds in a light style. When using a dark style, add the .gls-dark class to elements on a light background.
Note Only one class will come to effect, depending on the style you are using. For example, when using a style with a light background, you can only apply the .gls-light class to optimize content on dark backgrounds, as text will already be displayed in a dark color on light backgrounds — and vice versa.
<div class="gls-light"></div>
<div class="gls-dark"></div>
-
Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dark
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="gls-child-width-1-2@s" gls-grid> <div> <div class="gls-light gls-background-tertiary gls-padding"> <h3>Light</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <button class="gls-button gls-button-default">Button</button> </div> </div> <div> <div class="gls-dark gls-background-muted gls-padding"> <h3>Dark</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <button class="gls-button gls-button-default">Button</button> </div> </div> </div>
Note Some modifiers from the Section, Card, Tile, Overlay and Off-canvas component are extending the inverse style automatically, so you don’t have to add any class.