Themes

Ornamentum data table now comes with several themes which can be used depending on your application UI/UX requirements.

Without using the available data table themes you can create your own theme by overriding SCSS variables exposed. Refer Custom Theming section to custom theme building guidelines.

Including Theme Support

Ornamentum support including styles via SCSS or prebuilt CSS depending on your requirement. You can simply include library style sheets within Angular CLI configuration style sheet array or import directly to stylesheet if you are using SCSS and planing to customize the theme.

Any theme style sheet has it's own optional adon style sheet which can be used to customize the appearance of HTML controls like checkboxes and scroll bars.

You can check the user experience with these themes via toggling the default themes through theme selector.

Base Theme

The following image illustrate the Ornamentum Data Table look and feel with Base theme.

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 illustrate the Ornamentum Data Table look and feel with 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

TThe following image illustrate the Ornamentum Data Table look and feel with 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 illustrate the Ornamentum Data Table look and feel with 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 illustrate the Ornamentum Data Table look and feel with Aegean theme..

CSS: Include Ornamentum pre-built 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 DataTable Styling & Themes