> ## Documentation Index > Fetch the complete documentation index at: https://docs.nmbr.co/llms.txt > Use this file to discover all available pages before exploring further. # Theming > Customize the look and feel of the Nmbr Component by changing the default colours and font. 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: ```html payroll.html theme={null} ``` ## Font Family The `fontFamily` property allows you to customize the font used throughout the Nmbr Component. It only supports [Google Fonts](https://fonts.google.com/) — 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: ```typescript theme={null} 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: ```typescript theme={null} theme: { primary: { main: '#3B82F6', }, secondary: { main: '#22C55E', }, error: { main: '#d32f2f', }, warning: { main: '#ed6c02', }, info: { main: '#0288d1', }, success: { main: '#2e7d32', }, }, ```