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

Links change colour

Buttons

Help button

Pagination

Filter bar

Help bar

Itaque repudiandae delectus aut odit voluptatem hic iste accusantium quia optio?

Temporibus eum expedita recusandae blanditiis.

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.

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

Rerum minima

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

Modals

Inverse theme classes can also be applied to a whole modal and its parts.