White Labeling

Customize Onyx’s branding and appearance

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

Name and Logo

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.

Footer

Below the Consent Screen toggle, you can add content to the footer of the Onyx interface.

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

Method 1: Direct CSS Variable Modification

1. Navigate to globals.css

   Navigate to web/src/app/globals.css

2. Modify CSS variables

   Modify the CSS variables to customize base colors (accent colors, backgrounds, etc.)

Method 2: Tailwind Config Override

1. Navigate to Tailwind config

   Navigate to web/tailwind-themes/tailwind.config.js

2. Override configuration values

   Override specific values from the base configuration

Method 3: Organization-Specific Theme (Recommended)

For comprehensive theming:

1. Navigate to themes directory

   Navigate to web/tailwind-themes/

2. Create organization folder

   Create a new folder with your organization’s name

3. Create Tailwind config

   Create a tailwind.config.js file in this folder

4. Override base configuration

   Override any values from the base configuration

5. Set environment variable

   Set the NEXT_PUBLIC_THEME environment variable to your organization’s folder name

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.