Libero et
Aut nam excepturi nisi quas adipisci repellat est quia porro ut ex dolor laudantium molestias voluptas voluptatem autem ut labore ut molestiae molestias rerum ut sit necessitatibus ipsum minus sit
Inverse theme
Basics
theme-inverse only works in Design Framework v5.
The basic function of the class theme-inverse is to change any content within its scope to work on a dark background.
theme-inverse can be applied globally or to a section.
This is a wrapper with the class theme-inverse. By default a dark background is applied and the text is white.
Other basic content will automatically be styled without additional classes.
Links
Buttons
Help button
Pagination
Filter bar
Help bar
Variations
There are some variations to the default dark grey background.
Teal
This is a wrapper with class theme-inverse theme-inverse--teal.
Denim
This is a wrapper with class theme-inverse theme-inverse--denim.
Using with an existing dark background
Sometimes a dark background may have been applied further up the page and you will want to remove the default dark grey background added by theme-inverse in order for the earlier background can show through. To do this use theme-inverse theme-inverse--no-background.
theme-inverse--no-background
A gradient has been applied to the wrapper so theme-inverse--no-background is added to let the gradient show through.
On this block theme-inverse has been added but not theme-inverse--no-background. Hence the default dark grey background is added and blocks the gradient.
Cards
theme-inverse applied to various parts of a card.
Sit quibusdam
Voluptatum consequuntur dolorum quis explicabo qui voluptatem ducimus in eum ratione odio debitis nulla omnis praesentium delectus ab corrupti omnis perferendis maiores aliquid laborum quasi unde delectus ut quo ut
Modals
Inverse theme classes can also be applied to a whole modal and its parts.