Color theme

This new version of EVT is able to handle multiple themes at runtime. A "theme" is intended as a particular palette or set of color used for the main UI components. The theme can also change dimensions or other properties.

In the file assets/scss/_themes.scss we defined a global variable $theme where we declare every single color used in the UI components. Each color must exist in every single theme.

The themed rules depend on the data-theme attribute added to a div element of the AppComponent that encloses the whole application. The data-theme attribute is constantly linked to the current theme variable. We decided to embody everything in this external div in order to lighten the number of bindings of elements that need a connection to the current theme.

Add a new theme

To add a new theme just follow the steps below:

• add an object at the end of the current list of themes, which has all the properties of an existing one (we recommend doing copy-paste to be sure not to lose anything);
• change the color codes as desired;
• add the new theme id to the list of available themes in the ThemeService (themes.service.ts):

  {
      value: 'myThemeKey',
      label: 'My Theme Label'
  }

  • the value is the ID of the new theme, the key of the object previously created;
  • the label is the label to be displayed in the theme selector in the UI.

Add new themed CSS rules

To add new CSS rules so that colors are retrieved from the current theme (and change automatically when the theme changes at runtime), just follow the steps below:

• import the file _themes.scss in the *.scss file of the component

    @import "path/to/_theme.scss";

• Embody every css rule to be themed in the following instruction:

    h1 {
        @include themify($themes){
            color: themed('baseColorDark');
        }
    }

  Within this instruction, every css rule that uses a color and need to be linked to the current theme, must be defined as

      themed("colorKey");

  where colorKey is the key of the color within the object representing a theme defined in the file _theme.scss.

The themify mixin

The themify mixin will add a CSS rule for each theme for the CSS rules defined within it. The @each $theme, $map in $themes tell Sass to loop over the $themes map that was defined above. On each loop, it assigns these values to $theme and $map respectively.

• $theme - Theme name
• $map - Map of all theme variables

Then the map-get() function is used to get any theme variable from $map and output the correct property for each theme. The & refer to parent selectors and placing it after [data-theme="#{$theme}"] tells Sass to output any parent selectors after the theme name. To use this mixin, just be sure that the element for which you are defining the CSS rules is included in a *[data-theme]="theme-name" element and embody every CSS rule that needs to be themified within the mixin:

btn-primary {
    @include themify($themes) {
        color: themed('baseColorDark');
    }
}