Dolor et
Accusamus totam qui enim vel fuga est sed ipsam vel voluptatem quo pariatur ratione doloremque at voluptates earum ab incidunt molestiae doloremque nobis est ratione consequatur vel eum at voluptatem
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.
There are some variations to the default dark grey background.
This is a wrapper with class theme-inverse theme-inverse--teal
.
This is a wrapper with class theme-inverse theme-inverse--denim
.
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
.
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.
theme-inverse
applied to various parts of a card.
Accusamus totam qui enim vel fuga est sed ipsam vel voluptatem quo pariatur ratione doloremque at voluptates earum ab incidunt molestiae doloremque nobis est ratione consequatur vel eum at voluptatem
Dolorem quae omnis enim et eveniet reiciendis et voluptas dolorem quidem nemo vel at ut dicta repellendus eaque eum sed doloribus soluta minus expedita consequuntur dignissimos tempore ut neque qui
Inverse theme classes can also be applied to a whole modal and its parts.
This modal has theme-inverse
applied to its main div.
It has theme-inverse theme-inverse--teal
applied to its header and footer areas.