Themes

Modals comes with a number of preset Themes you can choose from:

  • Dark
  • Light
  • Automatic (Default Dark) PRO
  • Automatic (Default Light) PRO
  • Classic PRO

You can override the Theme you choose in the {modal} tag, like:

{modal ... theme="light"}

Here are also some examples per theme.

Dark

Text, Article, External page, images, Video

Gallery:
Apples Bananas Blueberries Limes Oranges Strawberries

Light

Text, Article, External page, images, Video

Gallery:
Apples Bananas Blueberries Limes Oranges Strawberries

Automatic (Default Dark)

This follows the dark/light setting of your OS. If the OS does not support this, the Dark theme is used.

Test this by switching the dark/light setting on your computer.

Text, Article, External page, images, Video

Gallery:
Apples Bananas Blueberries Limes Oranges Strawberries

Automatic (Default Light)

This follows the dark/light setting of your OS. If the OS does not support this, the Light theme is used.

Test this by switching the dark/light setting on your computer.

Text, Article, External page, images, Video

Gallery:
Apples Bananas Blueberries Limes Oranges Strawberries

Classic

Text, Article, External page, images, Video

Gallery:
Apples Bananas Blueberries Limes Oranges Strawberries

Custom Styling

You can override styles via template CSS overrides. How to override the CSS files, can differ depending on the template you use. So you might need to ask your template developer for support on that.
Here is the information Joomla provides for the standard way:
https://docs.joomla.org/Understanding_Output_Overrides#Media_Files_Override

You can check the CSS files that come with Modals to see how to style things (see the media/modals/css and media/modals/scss folders).

Custom Theme

You also have the ability to choose the 'Custom' theme. This will result in pretty much no styling at all. And you will need to override the custom.css (and custom.min.css) file via your template.

Only use this option if you fully understand how CSS works and you know what you are doing.