Theming - Nmbr

You can change the default colours and font used in the Nmbr Component by passing theme information via the theme property when instantiating the Nmbr Component:

payroll.html

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <script type="module">
      // ....
      window.components = nmbr.initialize({
        companyId,
        partnerId,
        signingUrl: '/sign_nmbr_request',
        theme: {
          fontFamily: 'Lobster',
          primary: {
            main: '<hex code>',
          },
          secondary: {
            main: '<hex code>',
          },
        },
      });
      // ...
    </script>
  </head>

  <body>
    <!-- ... -->
  </body>
</html>

Font Family

The fontFamily property allows you to customize the font used throughout the Nmbr Component. It only supports Google Fonts. The component will automatically load the specified font from Google Fonts at runtime.

Property	Type	Default	Description
fontFamily	string	`Roboto`	Any valid Google Font name. Falls back to “Roboto” if the provided font name isn’t valid.

Type Information

The theme property accepts an object with the following keys and value types:

type ThemeColor = {
  main: string;
  light?: string;
  dark?: string;
  contrastText?: string;
};

type CustomTheme = {
  fontFamily?: string;
  primary?: ThemeColor;
  secondary?: ThemeColor;
  warning?: ThemeColor;
  error?: ThemeColor;
  info?: ThemeColor;
  success?: ThemeColor;
};

The string provided as a ThemeColor property value must correspond to a CSS Hex Code (ex: #ff0000). If the light, dark, and contrastText values are not provided, they will be automatically inferred from the main color. If no theme values are defined, the Nmbr Component will use a set of default colors:

theme: {
  primary: {
    main: '#3B82F6',
  },
  secondary: {
    main: '#22C55E',
  },
  error: {
    main: '#d32f2f',
  },
  warning: {
    main: '#ed6c02',
  },
  info: {
    main: '#0288d1',
  },
  success: {
    main: '#2e7d32',
  },
},