> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gorbit.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# White Labeling

> Customize Gorbit's branding and appearance

White labeling allows you to customize Gorbit's appearance to match your organization's identity.

<Note>
  White labeling is an Enterprise Edition feature.
</Note>

## White Labeling Options

<img className="rounded-image" src="https://mintcdn.com/gorbit/i9pIrvFbh53KkrjR/assets/admins/advanced_configs/whitelabeling_overview.png?fit=max&auto=format&n=i9pIrvFbh53KkrjR&q=85&s=5a4a5355ade94a8a1aa28f3d3a3401bf" alt="White Labeling Overview" width="2588" height="1952" data-path="assets/admins/advanced_configs/whitelabeling_overview.png" />

### Name and Logo

Adjust the name and logo of your Gorbit instance by specifying **Application Name** and uploading a **Custom Logo**.

These elements change what is shown in the top left corner of the Gorbit 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 Gorbit interface.

<img className="rounded-image" src="https://mintcdn.com/gorbit/i9pIrvFbh53KkrjR/assets/admins/advanced_configs/whitelabeling_advanced.png?fit=max&auto=format&n=i9pIrvFbh53KkrjR&q=85&s=535a2f8b59fdcaeef7a9410c68e6eb56" alt="White Labeling Headers and Popups" width="4132" height="1400" data-path="assets/admins/advanced_configs/whitelabeling_advanced.png" />

### Footer

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

<img className="rounded-image" src="https://mintcdn.com/gorbit/i9pIrvFbh53KkrjR/assets/admins/advanced_configs/whitelabeling_footer.png?fit=max&auto=format&n=i9pIrvFbh53KkrjR&q=85&s=6178caff42f2c9d0ed14df48f0f6b2b6" alt="White Labeling Footer" width="4132" height="934" data-path="assets/admins/advanced_configs/whitelabeling_footer.png" />

## Color Theming

Gorbit uses [Tailwind CSS](https://tailwindcss.com/).

### 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

<AccordionGroup>
  <Accordion title="Method 1: Direct CSS Variable Modification">
    <Steps>
      <Step title="Navigate to globals.css">
        Navigate to `web/src/app/globals.css`
      </Step>

      <Step title="Modify CSS variables">
        Modify the CSS variables to customize base colors (accent colors, backgrounds, etc.)
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Method 2: Tailwind Config Override">
    <Steps>
      <Step title="Navigate to Tailwind config">
        Navigate to `web/tailwind-themes/tailwind.config.js`
      </Step>

      <Step title="Override configuration values">
        Override specific values from the base configuration
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Method 3: Organization-Specific Theme (Recommended)">
    For comprehensive theming:

    <Steps>
      <Step title="Navigate to themes directory">
        Navigate to `web/tailwind-themes/`
      </Step>

      <Step title="Create organization folder">
        Create a new folder with your organization's name
      </Step>

      <Step title="Create Tailwind config">
        Create a `tailwind.config.js` file in this folder
      </Step>

      <Step title="Override base configuration">
        Override any values from the base configuration
      </Step>

      <Step title="Set environment variable">
        Set the `NEXT_PUBLIC_THEME` environment variable to your organization's folder name
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Example Configuration

To change the background to black, create or modify your theme file:

```javascript theme={null}
/** @type {import('tailwindcss').Config} */

module.exports = {
  theme: {
    extend: {
      colors: {
        "background": "#000000",
      },
    },
  },
};
```

<Warning>
  Color customizations require building Gorbit from source. For local testing,
  restart the NextJS application to apply changes.
</Warning>