Skip to content

Commit c5ec5e9

Browse files
docs: add color palettes docs to React SDK (#529)
* Add color palettes documentation to React SDK reference Generated-By: mintlify-agent * Revise color palette setup instructions Updated instructions for copying palette UUID and removed section on retrieving available palettes. --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Giorgi Bagdavadze <12987425+notgiorgi@users.noreply.github.com>
1 parent 9087c65 commit c5ec5e9

1 file changed

Lines changed: 26 additions & 0 deletions

File tree

references/react-sdk.mdx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ type DashboardProps = {
106106
fontFamily?: string; // Font family for all text
107107
};
108108
filters?: SdkFilter[]; // Apply filters programmatically
109+
paletteUuid?: string; // Color palette UUID for custom theming
109110
contentOverrides?: LanguageMap; // Localization/translation overrides
110111
onExplore?: (options: {
111112
chart: SavedChart
@@ -464,6 +465,31 @@ Sets the background for the embedded content. Can be any color value or `'transp
464465
/>
465466
```
466467

468+
## Color palettes
469+
470+
You can customize the appearance of embedded dashboards using color palettes. Define multiple color palettes in your organization settings, then apply them to embedded dashboards using the `paletteUuid` prop.
471+
472+
For more on customizing appearance, see [customizing the appearance of your project](/references/workspace/customizing-the-appearance-of-your-project).
473+
474+
### Setting up color palettes
475+
476+
1. Go to **Organization settings > Appearance** in Lightdash
477+
2. Define one or more color palettes
478+
3. Copy the palette UUID for the palette you want to use (or fetch from API `GET /api/v1/org/color-palettes`)
479+
480+
### Applying a palette
481+
482+
Pass the `paletteUuid` prop to the `Lightdash.Dashboard` component:
483+
484+
```tsx
485+
<Lightdash.Dashboard
486+
instanceUrl="https://app.lightdash.cloud"
487+
token={token}
488+
paletteUuid="your-palette-uuid"
489+
/>
490+
```
491+
492+
467493
## Filtering data
468494

469495
Filters can be passed to `<Lightdash.Dashboard/>` to filter dimensions by values. Filters are applied as AND operations, each further restricting results.

0 commit comments

Comments
 (0)