UI Branding

Modifying the UI with whitelabeling

Netmaker UI allows resellers to whitelabel and customize branding by building a custom docker image with the environment variables below set.

Recommended: use logos with an aspect ratio of 4:3.

1

VITE_PRODUCT_NAME

The name of the product. This is the name that will appear in the UI.

2

VITE_TENANT_LOGO_DARK_URL

Logo to be used in dark mode.

3

VITE_TENANT_LOGO_LIGHT_URL

Logo to be used in light mode.

4

VITE_TENANT_LOGO_DARK_SMALL_URL

Small variant of the logo to be used in dark mode (e.g., when the sidenav is collapsed). Optional.

5

VITE_TENANT_LOGO_LIGHT_SMALL_URL

Small variant of the logo to be used in light mode (e.g., when the sidenav is collapsed). Optional.

6

VITE_TENANT_LOGO_ALT_TEXT

Alternative text for the logo.

7

VITE_TENANT_FAVICON_LOGO

Favicon to use in the web browser’s tab. Defaults to the light logo if not specified. Recommended to use a 32x32px .ico image.

8

VITE_TENANT_PRIMARY_COLOR

UI primary color. Replace this with your brand color (examples: red, green, "#F00", "#00FF00"). Note: hex values need quoting.

You can use URLs to host the logos, or place the logos in the /public directory before building the docker image.

Reference: https://github.com/gravitl/netmaker-ui-2/blob/master/Dockerfile.standalone

For more information on how to go about whitelabelling, reach out to us at https://www.netmaker.io/contact