Skip to content

readme.md

Latest commit

 

History

History
40 lines (34 loc) · 2 KB

readme.md

File metadata and controls

40 lines (34 loc) · 2 KB
Raw

Theming the application

The HTML5 applications support the integration of custom themes. Before proceeding, we recommend that you read the Angular Material Theming guide.

Compiling a custom theme

  • Change the variables in the file custom-theme.scss as required:
    • $font-family
    • $primary
    • $accent
    • $warn
  • Rename the $theme-name variable to your theme's name. (e.g. space-theme)
  • In a terminal, change to the imxweb/custom-theme folder and run the npm run build command
  • Take the custom-theme.css file and create a .zip file. The naming convention is to use Html_<ThemeName>.zip (for example Html_space-theme.zip).
  • Copy the .zip file to the imxweb folder.
  • Create a folder inside the imxweb folder with the name of your .zip file (e.g. Html_space-theme).
  • Create a imx-theme-config.json file inside in this folder. Use this text as a content template, filling in the correct values for your theme.
    • Name: a unique name and identifier of the theme
    • DisplayName: a user friendly name for display purposes
    • Class: the CSS class identifier which is used for theming (e.g. eui-light-theme in default)
    • Urls: a list of all relevant files for this theme (also pictures, icons or other resources which are referenced if required)
{
  "Themes": [
    {
      "Name": "space-theme",
      "DisplayName": "Space Theme",
      "Class": "space-theme",
      "Urls": ["../space-theme/custom-theme.css"]
    }
  ]
}
  • Upload the .zip file and the imx-theme-config.json file with Software Loader like you would with an Angular plugin.
  • Restart your API server.
  • Login to Web Portal > Click on your username > Select "User Interface Settings" > Change the application's theme to your custom theme.

Note: Multiple theme definition files are possible. Multiple themes can also be declared inside one theme imx-theme-config.json file, however every theme needs to be provided as single .zip file.