Skip to main content

Customize Local UI Theme

Palette offers the option to customize the Local UI web interface. You can change the color of the sidebar as well as using your own logo. You can do this before deployment during the EdgeForge process to standardize the look feel of the console for all Edge hosts of your organization.

Prerequisites​

  • The theme customization process prior to deployment is based on the EdgeForge process. We recommend that you familiarize yourself with EdgeForge and the process to build Edge artifacts.

  • A physical or virtual Linux machine with AMD64 (also known as x86_64) processor architecture to build the Edge artifacts. You can issue the following command in the terminal to check your processor architecture.

    uname -m

  • Minimum hardware configuration of the Linux machine:

    • 4 CPU
    • 8 GB memory
    • 50 GB storage

  • Git. You can ensure git installation by issuing the git --version command.

  • Docker Engine version 18.09.x or later. You can use the docker --version command to view the existing Docker version. You should have root-level or sudo privileges on your Linux machine to create privileged containers.

  • A Spectro Cloud account. If you have not signed up, you can sign up for an account here.

  • Palette registration token for pairing Edge hosts with Palette. You will need tenant admin access to Palette to generate a new registration token. For detailed instructions, refer to the Create Registration Token guide.

Customize theme during EdgeForge​

  1. Clone the CanvOS repository.

    git clone https://github.com/spectrocloud/CanvOS.git

  2. Change into the CanvOS directory.

    cd CanvOS

  3. Create a directory called local-ui at the path CanvOS/local-ui. Then under the local-ui directory, create a directory named ui. You can issue the following command to create both directories.

    mkdir -p local-ui/ui

  4. In the ui directory, create a file named customizations.json. This is the same file you can use to add custom links to your sidebar. If the file is already present, there is no need to create a new one. For more information, refer to Add Custom Links to Local UI.

  5. Upload a logo you'd like to use for Local UI to the ui directory. All file types are allowed. We recommend you limit the height of the logo image to between 64 pixels and 120 pixels. If you don't upload a logo, Local UI will use the Spectro Cloud logo.

  6. Populate the file with the following schema. The banner and loginBanner objects apply to Palette VerteX Local UI only. Omit them if you are building for Palette Edge.

    {
      "colors": {
        "brand": "#4A8FF1",
        "sidebar": "#2B323C"
      },
      "logo": "logo.webp",
      "banner": {
        "bannerText": "You are accessing a U.S. Government (USG) Information System...",
        "textColor": "#FFFFFF",
        "bannerColor": "#C8102E"
      },
      "loginBanner": {
        "title": "Authorization to Operate",
        "message": "You are accessing a U.S. Government (USG) Information System (IS) that is provided for USG-authorized use only..."
      }
    }

    The colors.sidebar property controls the color of the sidebar. This is also the color of the background in the Local UI login screen. We suggest you choose a color that contrasts well against your logo as the logo as the color will serve as the background for your logo. The brand color controls the color of buttons and checkboxes in the UI. The following image displays the default logo, brand, and sidebar color.

    A screenshot of Local UI showing the elements that can be adjusted in themes

    info

    The banner and loginBanner objects are supported in Palette VerteX 4.9.38 and later. These objects help satisfy compliance requirements for federal and DoD deployments by presenting a notice throughout the VerteX Local UI and requiring users to explicitly acknowledge a consent notice before authentication. Spectro Cloud-built VerteX appliances ship with default banner and consent notice content. If you are building your own ISO, you can supply your own values.

    The banner object controls a banner that appears on every VerteX Local UI page, including the login screen. You can customize the banner text and colors through the following properties.

    PropertyDescription
    bannerTextThe text displayed in the banner.
    textColorThe banner text color as a hex value, for example #FFFFFF.
    bannerColorThe banner background color as a hex value.

    The loginBanner object controls a consent acknowledgment popup that appears before authentication. The user must explicitly acknowledge the notice before login can proceed. It has the following properties.

    PropertyDescription
    titleThe title displayed at the top of the consent acknowledgment popup.
    messageThe consent notice text displayed before login.

    The banner and consent popup are configured at build time through customizations.json and cannot be modified from the VerteX Local UI after deployment. To change either after deployment, rebuild the ISO and reinstall.

  7. Compress the UI directory to a TAR file. The file must be named local-ui.tar.

    tar cvf local-ui.tar local-ui

  8. Follow the Build Edge Artifacts guide from step 3 onward to finish the EdgeForge process.

Validate​

  1. Use the ISO you produced to install Palette Edge on an Edge device.

  2. Power up the device and follow Access Local UI to access the Edge management console.

  3. Verify that the customizations you made are reflected in the user interface.