White labeling allows you to customize Onyx’s appearance to match your organization’s identity.
White labeling is an Enterprise Edition feature.

​
White Labeling Options

White Labeling Overview Adjust the name and logo of your Onyx instance by specifying Application Name and uploading a Custom Logo. These elements change what is shown in the top left corner of the Onyx interface as well as on the login page.

​
Headers and Popups

In the Advanced Options section, you can add content in the header as well as a custom popup window. Additionally, you can enable a Consent Screen that will be shown to users before they can access the Onyx interface. White Labeling Headers and Popups Below the Consent Screen toggle, you can add content to the footer of the Onyx interface. White Labeling Footer

​
Color Theming

Onyx uses Tailwind CSS.

​
Theme Architecture

The color system is built on two main files:
  • web/tailwind-themes/tailwind.config.js: Base Tailwind configuration and color definitions
  • web/src/app/globals.css: CSS variables for colors used in the Tailwind config

​
Customization Methods

​
Example Configuration

To change the background to black, create or modify your theme file: 
/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    extend: {
      colors: {
        "background": "#000000",
      },
    },
  },
};
Color customizations require building Onyx from source. For local testing, restart the NextJS application to apply changes.