Skip to content

Create a new Theme

Jump to bottom
Julien Renaux edited this page Jan 17, 2020 · 4 revisions

Prerequisite

To create a new theme you need to clone one of the following repository, open a terminal and cd forgerock-openbanking-ui:

https://github.com/OpenBankingToolkit/openbanking-analytics https://github.com/OpenBankingToolkit/openbanking-aspsp https://github.com/OpenBankingToolkit/openbanking-directory https://github.com/OpenBankingToolkit/openbanking-common https://github.com/OpenBankingToolkit/openbanking-tpp

Once you are on forgerock-openbanking-ui, install the dependencies:

npm ci

then you will be able to call ./node_modules/.bin/openbanking-ui-cli CLI. (you could also install it globally npm i @forgerock/openbanking-ui-cli -g)

Create a new customer

openbanking-ui-cli addTheme --name <themeName>

This will create all the necessary angular.json configuration and create a new folder customers/<themeName> with all the necessary files to compile.

Create a new customer and apply a configuration

Go to https://openbankingtoolkit.github.io/openbanking-ui-customization/

Open the sidenav by clicking this button:

Screen Shot 2019-10-25 at 13 02 03

Upload the icon, logo and favicon with drag and drop (SVG only):

Screen Shot 2019-10-25 at 13 02 21

Select the 4 palettes by using default ones or by selecting colors one by one using the following tool:

Screen Shot 2019-10-25 at 13 02 42

Once you are happy with the result, click the export button to get the JSON export.

Screen Shot 2019-10-25 at 13 02 55

Run the following command to apply the customization:

openbanking-ui-cli addTheme --name <themeName> --customization <pathToCustomizationJson>

Automated tasks:

  • angular.json config
  • sass/_variables.scss
  • assets/logos/icon.svg
  • assets/logos/logo.svg
  • [] assets/favicons (go to https://realfavicongenerator.net/ and download the result)
  • [] assets/slashscreen.css (change background/throbber color manually)
  • [] build-settings.js (change <Name> and <description> manually)
  • [] deployment-settings.js (change <Name> and <description> manually)

Run the new config locally

If you want to see the result locally before committing the result. Add the following config in angular.json and replace <themeName>, <appName> and <clusterName>. See example: ui-integ-hl

"<clusterName>-<themeName>": {
    "stylePreprocessorOptions": {
    "includePaths": [
        "customers/<themeName>/apps/<appName>/scss",
        "customers/<themeName>/scss",
        "utils/scss",
        "projects/<appName>/src/scss"
    ]
    },
    "fileReplacements": [
    {
        "replace": "projects/<appName>/src/environments/environment.ts",
        "with": "projects/<appName>/src/environments/environment.<clusterName>.ts"
    },
    {
        "replace": "projects/<appName>/src/assets/logos/icon.svg",
        "with": "customers/<themeName>/assets/logos/icon.svg"
    },
    {
        "replace": "projects/<appName>/src/assets/logos/logo.svg",
        "with": "customers/<themeName>/assets/logos/logo.svg"
    },
    {
        "replace": "projects/<appName>/src/assets/splashscreen.css",
        "with": "customers/<themeName>/assets/splashscreen.css"
    }
    ]
},

Then when using ng serve use --browserTarget <appName>:build:<clusterName>-<themeName>. See serve.ui-integ.analytics.hl.client task in angular.json

Build

add the new customer to all build.<appName>.all scripts with -c <themeName> option

Clone this wiki locally