Skip to main content
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

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.)
1

Navigate to Tailwind config

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

Override configuration values

Override specific values from the base configuration

​
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.
⌘I