Using Qlik Sense Themes with nebula.js

[Francis_Kabinoff]

Using Qlik Sense themes with nebula.js is easy. The basic idea is to get the theme, configure the theme to be loaded by nebula.js, and then tell nebula.js that's the theme you'd like to use. Let's take a look.

Loading a Qlik Sense Theme

There are 3 common scenarios here, either you load your theme locally into your project, you load your theme from Qlik Sense Enterprise, or you load your theme from Qlik Sense Enterprise Windows, or you load your theme from Qlik Sense Enterprise SaaS.

Loading your theme in your project is as simple as including it.

import myTheme from '{path-to-theme}/theme';

Loading your theme from Qlik Sense Enterprise Windows looks like this

const myTheme = await fetch('{qlik-sense-enterprise}/resources/assets/external/sense-themes-default/{theme-name}/theme.json')
      .then((response) => response.json());

And loading your theme from Qlik Sense Enterprise SaaS looks like this

const myTheme = await fetch('https://your-tenant.us.qlikcloud.com/api/v1/themes', {
      headers: {
        'Authorization': `Bearer ${<API-key>}`
      }
    })
    .then((response) => response.json());

Configure nebula.js to load the theme

Next you need to configure nebula.js to load the theme. This is done in the embed function, similar to loading types. It looks like this.

const nebula = embed(app, {
      themes: [
        {
          id: 'myTheme',
          load: () => Promise.resolve(myTheme),
        },
      ],
      types: [],
    });

You can configure nebula.js to load multiple themes.

Tell nebula.js what theme to use

And finally, you need to tell nebula.js what theme to use. That's done by setting the theme property in the context. You can do this either in the embed function, or change it any other time using the context function. This is what it looks like doing it in the embed function.

const nebula = embed(app, {
      context: {
        theme: 'myTheme',
      },
      themes: [
        {
          id: 'myTheme',
          load: () => Promise.resolve(myTheme),
        },
      ],
      types: [],
    });

And this is what it looks like doing it later with the context function.

const nebula = embed(app, {
      themes: [
        {
          id: 'myTheme',
          load: () => Promise.resolve(myTheme),
        },
      ],
      types: [],
    });
    nebula.context({ theme: 'myTheme' });

And that's it! Now your theme will be applied to your nebula.js visualizations. Custom visualizations will need to be configured to consume the theme. And there are some differences between themes applied in nebula.js and themes applied in Qlik Sense. For that information, and more, please visit Applying Themes with nebula.js