Skip to main content
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.
PropertyTypeDefaultDescription
fontFamilystringRobotoAny 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',
  },
},