Configuring Storefront Theme
Introduction
When the Invoice Portal loads, it looks for a predefined theme object on the window
. The property is invoicePortalTheme
. If this object is found, it is used to override properties of the default theme. Configuring the theme allows you to control basic branding (look-and-feel) of the Invoice Portal.
Note: We will provide more advanced extension mechanisms for the storefront experience in the future.
TypeScript Definition
declare global {
interface Window {
invoicePortalTheme?: Theme;
}
}
interface Theme {
breakpoints: ThemeBreakpoints;
colors: ThemeColors;
}
/**
* Each of the breakpoints should be a CSS media query
* condition, such as "min-width: 0px"
*/
interface ThemeBreakpoints {
xsmall: string;
small: string;
medium: string;
large: string;
}
/**
* Each of the colors should be a valid CSS color (name,
* hex value, or rgb() / rgba() call)
*/
interface ThemeColors {
main: string;
textBase: string;
success: string;
fail: string;
}
More Complex CSS
The Invoice Portal CSS classes are not currently stabilized and thus we do not recommend attempting to style your Invoice Portal by providing your own definitions for these classes. Once we have stabilized this interface, we will provide detailed documentation on overriding styles.