Compatibility with Theming Module

This section explains how to build the components to be compatible with the theming functionality in Cedrus Fusion Library.

The custom themes are defined in a custom-theme.scss file:

-src
    -assets
        -custom-themes.scss

The core component has a "themeClass" property that corresponds to the theme name. By default, the themeClass is set the Cedrus Fusion Default theme.

How to implement a component compatible with the theming module?

• Every component should import our list of custom themes into its scss file in so that it can apply our themes independently in any environment with no additional steps from the users.

@import '..path/to/assets/custom-theme.scss'

• Every component should extend the core component to have the "themeClass" property.

• Every component should be surrounded by a

  <

  span [class]="themeClass"

  >

  tag in order to adopt the applied theme.

• Every component should use the colors "primary", "accent" and "warn" in their items for them to change with the changing theme.

How does it work?

• Adaptable:

  If the "themeClass" property was left empty or undefined, the component will adopt automatically the global theme set by the user in his application.

• Customizable

  : If the user set this property to one of our customized list of themes or his, the component will adopt that theme.

• Independent:

  If the "themeClass" property was overridden internally by default, the component will preserve its default theme in any environment.

Extending the list of themes:

The user can extend our list of customized themes by importing into his list our "custom-themes.scss" file and continue defining his themes.