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.