Dynamically overriding themes when integrating your dashboard with embed tokens

If you want to provide dashboards themed corresponding to the user looking at it, you only need to create a template dashboard! You can then override the dashboard theme when requesting an embed authorization token for that user. This is how that could look like:

How an embed authorization request with a theme override looks like

Let's dive right into it! The only thing you have to do to achieve this, is to specify an adapted JSON theme object when requesting an embed authorization token. An example of a JSON theme object can be found in the following API call, which returns an embed authorization token that can be used in your frontend to embed template dashboards with an overridden theme:

const Luzmo = require('@luzmo/nodejs-sdk');
var client = new Luzmo({
  api_key: '< Your API key >',
  api_token: '< Your API token >'
});
let promise = client.create('authorization', {
  type: 'embed',
  access: {
  collections: [
   {
   id: '<collection ID>',
   inheritRights: 'use'
            }
      ]
  },
  username: '12345678',
  suborganization: 'Burrito Co.',
  name: 'Embed user',
  email : 'embed_user@luzmo.com',
  'theme': {
      'font': {
        'fontSize': 15,
        'fontFamily': 'Open Sans'
      },
      'type': 'custom',
      'title': {
        'bold': false,
        'align': 'left',
        'border': false,
        'italic': true,
        'underline': false,
        'fontSize': 20,
        'lineHeight': 40
      },
      'colors': [
        '#00a8b7',
        'rgb(232,228,228)',
        'rgba(226,180,12,0.5)'
      ],
      'borders': {
        'border-color': 'rgba(0,0,0,.1)',
        'border-style': 'none',
        'border-radius': '3px',
        'border-top-width': '1px',
        'border-left-width': '1px',
        'border-right-width': '1px',
        'border-bottom-width': '1px'
      },
      'margins': [
        10,
        10
      ],
      'boxShadow': {
        'size': 'S',
        'color': 'rgb(2,34,32)'
      },
      'mainColor': '#004cb7',
      'background': '#EEF3F6',
      'itemsBackground': '#ffffff',
      'editModeBackground': '#ececec',
      'axis': {
        'fontSize': 13
      },
      'legend': {
        'type': 'normal'
      },
      'tooltip': {
        'background': 'rgba(255,255,255,1)',
        'fontSize': 13
      },
      'editBackground': 'rgb(222, 226, 229)',
      'editDarkOrLight': 'light-edit',
      'darkOrLight': 'light'
    }
  }).then((result) => {
  /* The temporary embed authorization key and token can be found in result.id and result.token, respectively. */
  console.log(result);
});

As you can see, you can change all theming options from within the theme JSON object! In the video shown at the beginning of this article, we have overridden both the mainColor as well as the colors properties.

Keep in mind that the following properties of a theme definition are mandatory:

• type: "custom"
• itemsBackground
• colors

If you're wondering how to find the definition of a certain theme, you can easily retrieve a list of the custom themes in your platform via the following API call:

curl https://api.luzmo.com/0.1.0/theme  
-H "Content-Type: application/json" 
-d @- << EOF
{
  "version": "0.1.0",
  "action": "get",
  "key": "$LUZMO_API_KEY",
  "token": "$LUZMO_API_TOKEN",
  "find": {
  }
}
EOF