Web Administration customization

Web administration customization (available in Pro edition only) offers you a possibility to brand the web frontend using your color palette of choice and even use your logo and header title.

The customization is enabled by creating a JSON customization.json (or JSON5 customization.json5) file in the configuration directory with the fields described in the following sections. All fields (and subfields) are optional.

header

Use header section to customizes the logo and header title:

• title: (string) Header title
• logoUrl: (string) URL of image logo displayed in the top-left corner
• logoAltText: (string) Image logo description (e.g. for users with screen readers)

theme.palette

Color palette customization. You will most likely need only these four sections but more options are available (see on that below).

• type: (string) Use "light" for dark text on light background or "dark" for light text on dark background
• header.main: (string) Header and navigation menu background color. Use #rrggbb or #rgb format (also applies to other colors).
• primary.main: (string) Color used for most hyperlinks and some form controls.
• secondary.main: (string) Color used for important visual elements, such as submit buttons.

The palette section conforms to Material-UI palette schema and you can use any and all fields described in the link, such as text color or info, warning and alert colors. Note, however, this is a JSON file, not a JavaScript file. You can not use functions or material-ui built-in constants, such as purple[500].

Example

{
    header: {
        // Title displayed in the header...
        title: "Buru SFTP Server Administration",

        // .. and/or image logo. Public URL is expected here.
        // If you wish to host the logo inside the Web Administration, put the file in ~/ClientApp/build (e.g. ~/ClientApp/build/logo.png)
        // and use "/logo.png" as logo url
        logoUrl: "/logo.png",
        logoAltText: "Buru SFTP Server Administration logo"
    },

    theme: {
        // The palette section conforms to Material-UI palette schema - see https://material-ui.com/customization/palette/ for detailed description
        palette: {
            // Dark text on light background (light) or light text on dark background (dark)
            type: 'dark',

            // Colors used in header and navigation panel
            header: {
                main: '#f06292'
            },

            // Colors used for hyperlinks and some form elements
            primary: {
                main: '#f06292'
            },

            // Colors used for important visual elements, such as submit buttons
            secondary: {
                main: '#ad1457'
            }
        }
    },
}