Dynamically overriding themes when integrating your dashboard with SSO 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 a SSO authorization token for that user. This is how that could look like:

How a SSO 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 specifying an adapted JSON theme object when requesting a SSO authorization token. An example of a JSON theme object can be found in the following API call, which returns a SSO authorization token that can be used in your frontend to embed template dashboards with an overridden theme:

curl https://api.luzmo.com/0.1.0/authorization  -H "Content-Type: application/json" -d @- << EOF
{
  "action": "create",
  "key": "$LUZMO_API_KEY",
  "token": "$LUZMO_API_TOKEN",
  "version": "0.1.0",
  "properties": {
    "type": "sso",
    "username": "12345678",
    "suborganization": "Burrito Co.",
    "name": "SSO user",
    "email": "sso_user@luzmo.com",
    "expiry": "24 hours",
    "inactivity_interval": "10 minutes",
    "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"
    }
  }
}
EOF

As you can see, you can change all theming options from within the theme JSON object! In the gif example on top, 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