Themes

Ornamentum data table now comes with several themes that can be selected depending on application UI/UX requirements.

Built-in Themes

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

Any theme style sheet has its own optional addon style sheet which can be used to customize the appearance of HTML controls such as checkboxes, scroll bars and etc.

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

Base Theme

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

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

    "styles": [
      "node_modules/ornamentum/prebuilt-themes/base.theme.css",
      "node_modules/ornamentum/prebuilt-themes/addon.base.theme.css",
      "styles.css"
    ]
    
  • SCSS Usage: Include Ornamentum Base theme SCSS style sheets in Angular CLI config styles array.

    "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 its Dark theme.

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

    "styles": [
      "node_modules/ornamentum/prebuilt-themes/dark.theme.css",
      "node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css",
      "styles.css"
    ]
    
  • SCSS Usage: Include Ornamentum Dark theme SCSS style sheets in Angular CLI config styles array.

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

Flat Theme

The following image illustrate the ornamentum Data Table look and feel with its Flat theme.

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

    "styles": [
      "node_modules/ornamentum/prebuilt-themes/flat.theme.css",
      "node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css",
      "styles.css"
    ]
    
  • SCSS Usage: Include Ornamentum Flat theme SCSS style sheets in Angular CLI config styles array.

    "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 its Ornamentum theme.

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

    "styles": [
      "node_modules/ornamentum/prebuilt-themes/ornamentum.theme.css",
      "node_modules/ornamentum/prebuilt-themes/addon.ornamentum.theme.css",
      "styles.css"
    ]
    
  • SCSS Usage: Include Ornamentum theme SCSS style sheets in Angular CLI config styles array.

    "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 it's Aegean theme.

  • CSS Usage: Include Ornamentum pre-built CSS Aegean theme style sheets in Angular CLI config styles array.

    "styles": [
      "node_modules/ornamentum/prebuilt-themes/aegean.theme.css",
      "node_modules/ornamentum/prebuilt-themes/addon.aegean.theme.css",
      "styles.css"
    ]
    
  • SCSS Usage: Include Ornamentum Aegean theme SCSS style sheets in Angular CLI config styles array.

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

Custom Themes

Without using built-in data table themes you can create your own theme by overriding SCSS variables that ornamentum publicly exposed. Refer Custom Theming section for further details.

Custom Theming
API Doc for Data Table Themes