Customizing the appearance of your project

To customize the colors used by default in your organization, head to the Organization settings —> Appearance and you can update any and all of your default colors used in your organization.

Viewing available palettes

You will see a list of color palettes that you can choose from for each mode. You can create your own palette by clicking on the Add new palette button. Here you can preview the palette before you save it.

The organization appearance settings listing the available color palettes, each showing its color swatches

Color palettes for light and dark mode

You can configure different color palettes for light mode and dark mode to ensure optimal contrast and readability in each theme. The appearance configuration includes separate tabs for both light mode and dark mode, allowing you to customize color schemes for each theme independently.

Switching between the light mode and dark mode tabs in appearance settings, each with its own palette selection

Since dark mode is available as a user preference setting within the app, having separate palettes ensures your charts look great regardless of which theme users choose. Note that dark mode is only available when using the app directly - embedded charts, Slack integrations, and other external integrations will continue to display in light mode.

Set the palette as the default

Once you have created your palette, you can set it as the default palette for the current mode (light or dark) by clicking on the Use this theme button. You can always come back to this page to change the default palette.

A saved color palette with its "Use this theme" button, marking it the default for the current mode

Color palette hierarchy

Palettes themselves are always managed at the organization level, but you can pick a specific palette at lower levels to override the default. When a chart is rendered, Lightdash resolves which palette to use by walking up the following chain and stopping at the first override it finds:

Embed / SDK — when a chart is rendered through an embedded dashboard or the React SDK, a palette passed in via the embed token or SDK config takes precedence over every other level, including a per-chart override. See Embedding with React SDK — Color palettes.
Chart — a per-chart palette set from the chart’s Series tab (cartesian and pie) or Steps tab (funnel).
Dashboard — a palette set on the dashboard from its settings modal. Applies to all tiles in the dashboard unless an individual chart overrides it.
Space — a palette set on a space. Nested spaces walk up through their parent spaces, so a child space inherits its nearest ancestor’s palette before falling through to the project.
Project — a palette set on the project from Project settings —> Appearance. Applies to every chart in the project unless something below overrides it.
Organization — the organization’s active palette (set on Organization settings —> Appearance). This is the final fallback.

In short: embed/SDK > chart > dashboard > space (and parent spaces) > project > organization.

Setting a project-level palette

Project admins can pick one of the org’s palettes for a project under Project settings —> Appearance. The picker is read-only — to add or edit palettes themselves, go to Organization settings —> Appearance. Charts in the project use the project palette and fall back to the org’s active palette when none is set.

Setting a space-level palette

When creating or editing a space, you can pick a palette underneath the space name. The palette applies to every chart in that space and to any nested spaces below it that don’t set their own palette. If you leave it unset, the space inherits from its parent space (when nested) or from the project.

Setting a dashboard-level palette

Open the dashboard settings modal to pick a palette for a dashboard. Tiles in the dashboard render with the dashboard’s chosen palette unless the chart itself sets a per-chart override.

Setting a chart-level palette

In the chart editor, the palette picker is at the top of the Series tab (cartesian and pie charts) and the Steps tab (funnel charts). The preview reflects the staged palette before you save; the override only persists when you click Save changes.

Brand appearance

Under Organization settings —> Appearance, organization admins can also configure a Brand appearance for the org. This stores your brand’s domain, logos, fonts, and colors alongside the color palettes above. The saved brand colors feed the Brand and Accent themes of a homepage Call to action, and Generate palette under Chart palette expands them into a chart palette you can save. If your instance has an Enterprise license, the brand’s logo and name also replace Lightdash’s in the navigation bar and the browser tab for signed-in members. Signed-out pages, such as the login page, use the instance branding set by environment variables on self-hosted instances.

Brand appearance can use a Brandfetch integration to detect a brand from its website, but Brandfetch is optional: with an Enterprise license you can set the brand name and logo directly without it. On Lightdash Cloud, Brandfetch is configured for you. On self-hosted or OSS deployments, set the BRANDFETCH_API_KEY environment variable to a Brandfetch API key to enable it. The hasBrandfetch flag on GET /health indicates whether the current instance can detect new brands from a website. Without a valid Enterprise license, Brandfetch, or an already-saved brand, the Brand appearance section is hidden.

Editing your brand

Open Organization settings —> Appearance —> Brand appearance. You’ll see a form containing:

Website — your brand’s website (for example, https://acme.com). When Brandfetch is enabled, Lightdash uses it to fetch brand information.
Name — under Brand identity. Needs a valid Enterprise license; it replaces “Lightdash” in the browser tab title.
Logo — under Brand identity. Needs a valid Enterprise license. Upload an image (PNG, JPG, SVG, WebP, or GIF, up to 512 KB) or paste an image URL; Brandfetch isn’t required.
Brand colors — the colors detected for your brand, or added manually. You can add a color, remove one, or edit a hex value.

Refreshing from Brandfetch

Next to the domain field is a refresh icon. Clicking it calls Brandfetch for the current domain and replaces the form with the freshly detected brand without persisting anything — you can review the change and either keep it (by saving) or discard it (by reverting).

The refresh icon is grey when the domain has not been edited and blue when it differs from the saved brand.
The fetch is fully revertible up until you click Save changes.
The domain can be a bare domain (ecom-store.com) or a full URL.
If Brandfetch has no brand for the domain, or its rate limit is reached, the refresh shows an error. After a rate-limit error, wait a moment and try again.

Saving and reverting

Any edit — including a Brandfetch refresh — opens an Unsaved changes footer with Revert and Save changes buttons. Nothing is persisted to your organization until you click Save changes. Revert restores the last saved brand.

Live preview

Alongside the form, a sample dashboard previews your brand. It’s an illustration, not the live app:

The sample dashboard title and description use your configured title and body fonts.
Sample charts are drawn with your brand colors, or with the generated palette once you click Generate palette.

The preview updates live as you edit, so you can see the impact of a color re-classification or a Brandfetch refresh before saving.

Brand API endpoints

The brand appearance settings are backed by three endpoints under the organization API:

Method	Path	Purpose
`GET`	`/org/brand`	Return the organization’s currently saved brand, or `null` if none is stored.
`POST`	`/org/brand/fetch`	Fetch a brand from Brandfetch for a given domain without persisting it. Used to power the preview.
`PUT`	`/org/brand`	Persist the edited brand payload (domain, colors, fonts, logos) exactly as provided.

Example — fetch a brand for a domain without saving:

curl -X POST 'https://<your-lightdash-host>/api/v1/org/brand/fetch' \
  -H 'Content-Type: application/json' \
  -d '{ "domain": "ecom-store.com" }'

Example — save the edited brand payload:

curl -X PUT 'https://<your-lightdash-host>/api/v1/org/brand' \
  -H 'Content-Type: application/json' \
  -d '{
    "domain": "ecom-store.com",
    "name": "Ecom Store",
    "description": "Sample brand for illustration",
    "logos": [],
    "colors": [
      { "hex": "#1f6feb", "type": "brand" },
      { "hex": "#f5a524", "type": "accent" }
    ],
    "fonts": [
      { "name": "Inter", "type": "title" },
      { "name": "Inter", "type": "body" }
    ]
  }'

​Viewing available palettes

​Color palettes for light and dark mode

​Set the palette as the default

​Color palette hierarchy

​Setting a project-level palette

​Setting a space-level palette

​Setting a dashboard-level palette

​Setting a chart-level palette

​Brand appearance

​Editing your brand

​Refreshing from Brandfetch

​Saving and reverting

​Live preview

​Brand API endpoints