Dropdown List Themes

Ornamentum dropdown list has a variety of predefined themes which you can apply to your application. Greater selection of themes are available with different colour variations to chose from.

You can check the user experience of these themes via toggling the predefined themes via theme selector as follows.

Select

Predefined Themes

Ornamentum bundles prebuilt CSS and source SCSS theme files. However, we recommend you to use the source SCSS files for best browser support with the use of browserlist configuration.

Import the Ornamentum theme style sheet reference to apply theming of your preference. Follow Angular CLI: Global Styles documentation for more information on how to integrate third party style sheets.

Below images illustrate the list of available themes and a glimpse of their appearance.

Base Theme

Minimalistic theme with white colour based variations.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/themes/base.theme.scss"
"node_modules/ornamentum/themes/addon.base.theme.scss"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/base.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.base.theme.css"

Dark Theme

Dark theme with black colour based variations which can be used with dark mode applications.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/themes/dark.theme.scss"
"node_modules/ornamentum/themes/addon.dark.theme.scss"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/dark.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css"

Flat Theme

Light colour based theme with blue and white base colour variations.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/prebuilt-themes/flat.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/flat.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css"

Ornamentum Theme

Dark theme with black and red base colour variations.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/themes/ornamentum.theme.scss"
"node_modules/ornamentum/themes/addon.ornamentum.theme.scss"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/ornamentum.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.ornamentum.theme.css"

Aegean Theme

Mat light colour based theme with blue and white base colour variations.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/themes/aegean.theme.scss"
"node_modules/ornamentum/themes/addon.aegean.theme.scss"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/aegean.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.aegean.theme.css"
API Doc for Dropdown Themes