Themes

As mentioned in the Data Table Themes section, Ornamentum dropdown also comes with the same theming support.

Including Theme Support

Currently ornamentum has different CSS/SCSS files to represent the available themes. Therefore, in order to include these themes into your project you have to import its CSS/SCSS source references into your style files.

Also in the page header you can see the user experience of the available themes by clicking on the given color palette as shown in the Data Table Including Theme Support section.

Let's see how the user experience changes in the dropdown when different themes are applied.

Base Theme

The following image shows how Ornamentum Dropdown looks like with the Base theme. This is the user experience that you can get if you choose to stay with the base theme styling provided without using any of the themes available.

CSS: Include Ornamentum pre-built CSS Base theme style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/prebuilt-themes/base.theme.css",
  "node_modules/ornamentum/prebuilt-themes/addon.base.theme.css",
  "styles.css"
]

SCSS: Include Ornamentum theme Base SCSS style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/themes/base.theme.scss",
  "node_modules/ornamentum/themes/addon.base.theme.scss",
  "styles.scss"
]

Dark Theme

The following image shows how Ornamentum Dropdown looks like with the Dark theme.

CSS: Include Ornamentum pre-built CSS Dark theme style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/prebuilt-themes/dark.theme.css",
  "node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css",
  "styles.css"
]

SCSS: Include Ornamentum theme Dark SCSS style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/themes/dark.theme.scss",
  "node_modules/ornamentum/themes/addon.dark.theme.scss",
  "styles.scss"
]

Flat Theme

The following image shows how Ornamentum Dropdown looks like with the Flat theme.

CSS: Include Ornamentum pre-built CSS Flat theme style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/prebuilt-themes/flat.theme.css",
  "node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css",
  "styles.css"
]

SCSS: Include Ornamentum theme Flat SCSS style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/prebuilt-themes/flat.theme.css",
  "node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css",
  "styles.css"
]

Ornamentum Theme

The following image shows how Ornamentum Dropdown looks like with the Ornamentum theme.

CSS: Include Ornamentum pre-built CSS Ornamentum theme style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/prebuilt-themes/ornamentum.theme.css",
  "node_modules/ornamentum/prebuilt-themes/addon.ornamentum.theme.css",
  "styles.css"
]

SCSS: Include Ornamentum theme Ornamentum SCSS style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/themes/ornamentum.theme.scss",
  "node_modules/ornamentum/themes/addon.ornamentum.theme.scss",
  "styles.scss"
]

Aegean Theme

The following image shows how Ornamentum Dropdown looks like with the Aegean theme.

CSS: Include Ornamentum prebuilt CSS Aegean theme style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/prebuilt-themes/aegean.theme.css",
  "node_modules/ornamentum/prebuilt-themes/addon.aegean.theme.css",
  "styles.css"
]

SCSS: Include Ornamentum theme Aegean SCSS style sheets in Angular CLI config "styles".

"styles": [
  "node_modules/ornamentum/themes/aegean.theme.scss",
  "node_modules/ornamentum/themes/addon.aegean.theme.scss",
  "styles.scss"
]
API Doc for Dropdown Themes