Docs

Theme

Role

  • The theme is a singleton that contains variables and constants used to stylize your views and primitives,
  • The theme is the illustration of the graphic charter : skin the application by defining colors, fonts, icons, …
  • The theme factorize style variables between views and primitives

Expected use

Danger

By default, Theme is not observable. Meaning if you have binding on it, if you change a property, it won’t be updated automatically. We do not recommend to have Theme as observable because it has a quite heavy binding cost. But if you need to do it, you can add the property isObservable in Theme of your application.

Declaration

The core expose an AbstractTheme component that must be implemented at the application side. It should contain all the theme variables of the application.

import $AbstractTheme from '@AbstractTheme';

export default $AbstractTheme.declare("AppTheme", {
    properties: {
        "defaultFont": "RobotoRegular",
        "fonts": {
            "RobotoRegular": {
               "family": "Roboto",
               "path": "styles/fonts/Roboto-Regular.ttf"
            }
        }
    },
    statics: {
        /************************************************************
         * TV MARGIN
         ***********************************************************/
        "TV_HORIZONTAL_MARGIN": () => width * 0.05,
        "TV_VERTICAL_MARGIN": () => height * 0.05,

        /************************************************************
         * COLORS
         ***********************************************************/
        "COLOR_1": "rgba(0, 5, 16, 1)",
        "COLOR_2": "rgba(0, 5, 16, 0.8)",
        "COLOR_3": "rgba(0, 5, 16, 0.4)",
        "COLOR_4": "rgba(0, 5, 16, 0.2)"

        /************************************************************
         * ICONS
         ***********************************************************/
        "ICON_FONT": "Wiztivi-Timeless-Icon",

        "ICON_FONT_SIZE_1": 15, //px
        "ICON_FONT_SIZE_2": 24, //px
        "ICON_FONT_SIZE_3": 24, //px
        "ICON_FONT_SIZE_4": 30, //px
        "ICON_FONT_SIZE_5": 36, //px

        "ICON_COLOR_1": () => COLOR_1,
        "ICON_COLOR_2": () => COLOR_4,
        "ICON_COLOR_3": () => COLOR_1,
        "ICON_COLOR_4": () => COLOR_3,
        "ICON_COLOR_5": "rgba(255, 255, 255, 1)",

        /************************************************************
         * FONTS
         ***********************************************************/
        "FONT_1": "Montserrat-Bold", // text bold
        "FONT_2": "Montserrat-Light", // text normal
        "FONT_3": "Montserrat-Light", // text light

        "FONT_SIZE_1": 18, //px
        "FONT_SIZE_2": 21, //px
        "FONT_SIZE_3": 27, //px
        "FONT_SIZE_4": 33, //px
        "FONT_SIZE_5": 39, //px

        "TEXT_COLOR_1": () => COLOR_1,
        "TEXT_COLOR_2": () => COLOR_3,
        "TEXT_COLOR_3": () => COLOR_2,
        "TEXT_COLOR_4": () => COLOR_2,
        "TEXT_COLOR_5": () => COLOR_4
    }
});

Usage

The theme property is already defined on Views and Primitives:

export default $View.declare("ChannelView", {
    properties: {
       verticalMargin: $Theme.TV_VERTICAL_MARGIN + 50;
    }
});

Built-in properties

The theme comes with the following build-in properties:

  • width: the current with of the ui,
  • height: the current height of the ui,
  • ratio: the ratio between the resolution the ui was designed for and the current one

Advanced Use

Theme by module

A module can have its own theme. When the module is registered, it’s theme is merged with the application one.

/**
 * Theme properties for the kids module
 *
 * @name KidsTheme
 * @class
 * @extends ModuleTheme
 *
 */
export default $ModuleTheme.declare("KidsTheme", {

});
Prev
terminating-properties
Next
Tiles