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.

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.

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.

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:

1. 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.
2. Chart — a per-chart palette set from the chart’s Series tab (cartesian and pie) or Steps tab (funnel).
3. Dashboard — a palette set on the dashboard from its settings modal. Applies to all tiles in the dashboard unless an individual chart overrides it.
4. 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.
5. Project — a palette set on the project from Project settings —> Appearance. Applies to every chart in the project unless something below overrides it.
6. 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.