Custom Branding

You can replace the default Prividium™ branding with your own brand name, logo, favicon, and color palette. All branding settings are optional. If you skip them, the standard Prividium™ look and feel is used.

This document describes how to customize the branding for the Admin Panel and User Panel. The Block Explorer uses a separate configuration file -- see Block Explorer Branding.

1. Brand Name and Logo

To customize the brand name and logo, set the following variables in your .env file:

VITE_BRAND_NAME=Custom Chain
VITE_LOGO_URL=/custom-chain-logo.svg

• VITE_BRAND_NAME appears in the browser tab title (e.g. Your Chain Name Admin Panel) and in the application header. The name is used to personalize the UI for your chain.
• VITE_LOGO_URL is displayed in the top-left corner of the UI. SVG format is recommended. You can use a path to a file in the container (place it in public/) or a full URL to an externally hosted image.

2. Favicon

The favicon is the small icon displayed in browser tabs. Two favicon slots are available: a primary icon (typically SVG) and an alternate icon (typically PNG for broader browser compatibility).

To customize the favicon, set the following variables in your .env file:

Example:

VITE_FAVICON_IMAGE_URL=/your-logo.svg
VITE_FAVICON_IMAGE_TYPE=image/svg+xml
VITE_ALT_FAVICON_IMAGE_URL=/your-logo.png
VITE_ALT_FAVICON_IMAGE_TYPE=image/png

3. Color Theme

You can override the application's color palette to match your brand. Six color roles are available:

All color roles are optional. Only the ones you set are overridden; the rest keep their defaults.

How to provide colors

Each color accepts one of three formats:

For most use cases, passing a single hex value for primary is recommended. A full set of lighter and darker shades is generated automatically.

Full shade example

If you need precise control over every shade, provide a full shade object (this works with both Option A and Option B below):

{
  "primary": {
    "50": "#F3F5FF",
    "100": "#D9D9F9",
    "200": "#CBCBFF",
    "300": "#8C8DFC",
    "400": "#5D65B9",
    "500": "#53579f",
    "600": "#4E529A",
    "700": "#32325D",
    "800": "#27274E",
    "900": "#11142B"
  },
  "secondary": "amber"
}

Option A: Inline JSON (environment variable)

Pass the theme as a JSON string in VITE_THEME_CONFIG:

# Simple: just override the primary color
VITE_THEME_CONFIG='{"primary":"#7c3aed"}'

# Override multiple colors
VITE_THEME_CONFIG='{"primary":"#7c3aed","neutral":"slate"}'

Option B: Theme file

If you prefer not to embed JSON in an environment variable, create a JSON file and mount it into your container. Point VITE_THEME_CONFIG_FILE to the file path:

VITE_THEME_CONFIG_FILE=/config/theme.json

The file should contain the same JSON object:

{
  "primary": "#7c3aed",
  "neutral": "slate"
}

4. Block Explorer Branding

The Block Explorer is configured separately through its config.js runtime configuration file (not through VITE_* environment variables).

To apply your branding, update the config.js file that is mounted into the Block Explorer container:

window['##runtimeConfig'] = {
  // ... your existing network config ...
  brandName: 'Your Chain Name',
  theme: {
    colors: {
      primary: '#7c3aed',
      neutral: 'slate'
    }
  }
};

The theme.colors object accepts the same formats described above (hex string, Tailwind color name, or full shade object).

Contact Us Link

By default, Prividium deployments of the Block Explorer hide the "Contact us" link (shown in the footer and on the "not found" page), so your users are never sent to the public ZKsync support form.

To show the link with your own support contact, add links.contactUsUrl to the same config.js file:

window['##runtimeConfig'] = {
  // ... your existing network config ...
  links: {
    contactUsUrl: 'https://your-company.example/support'
  }
};

5. Branding Variables Recap