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

# Creating a theme

> You can create a theme to choose how the Databrain Plugin in your application should look like

1. **Access UI Theming:**

* Click on the **"Settings"** tab near the Data Studio tab.
* In the **"Embed Settings"** section, select **"UI Theming"** from the settings menu tabs and click on **"+ Add New Theme".**

<Frame>
  <img src="https://mintcdn.com/databrainlabs-bef6850a/MeBlz5-oz998iZWJ/Creatingatheme1.png?fit=max&auto=format&n=MeBlz5-oz998iZWJ&q=85&s=b66161ba3a9282920b343b2f11d8e118" alt="Access UI Theming" width="2938" height="1654" data-path="Creatingatheme1.png" />
</Frame>

2. **Configure Basic Theme & Dashboard Settings:**

* Enter Theme Name in text field and set a suitable Font Family.
* Choose your desired dashboard and metric background colors.

<Frame>
  <img src="https://mintcdn.com/databrainlabs-bef6850a/MeBlz5-oz998iZWJ/Creatingatheme2.png?fit=max&auto=format&n=MeBlz5-oz998iZWJ&q=85&s=1f1ddcec2803d5aad1d926ac9075e84e" alt="Configure Dashboard Settings" width="2934" height="1656" data-path="Creatingatheme2.png" />
</Frame>

3. **Configure Card Settings:**

* Enter card border, card description and card title details.
* Choose relevant colors for the card title and card description.

<Note>
  The metric card title supports a **text color** ("Card Title Text Color") but not its own background color. To change the color behind the title, use **"Metric Card Background Color"** — it applies to the whole card, title included. There is no separate title-background setting; pairing a contrasting card background with a title text color is the supported way to make the title stand out.
</Note>

<Frame>
  <img src="https://mintcdn.com/databrainlabs-bef6850a/MeBlz5-oz998iZWJ/Creatingatheme3.png?fit=max&auto=format&n=MeBlz5-oz998iZWJ&q=85&s=17c983f74fcfc99e157361f3e71611b4" alt="Configure Card Settings" width="2932" height="1656" data-path="Creatingatheme3.png" />
</Frame>

4. **Configure Underlying Data Settings :**

* Choose the Color options for the header and content.

<Frame>
  <img src="https://mintcdn.com/databrainlabs-bef6850a/BdJBdvkTUqNzz4Rl/images/Creatingatheme4.png?fit=max&auto=format&n=BdJBdvkTUqNzz4Rl&q=85&s=8198065f5122828aa6aca7fd9faa0a19" alt="Underling data settings" width="2932" height="1648" data-path="images/Creatingatheme4.png" />
</Frame>

5. **Configure Chart Settings :**

* Enter the Font family and choose the color for the Chart title.
* Choose the Font and colour options for Chart tooltip.

<Note>
  **Chart palettes and why palette selection can appear greyed out.** The theme's chart config defines the available palettes (`chart.palettes`, each `{ name, colors }`), which of them are selectable in chart settings (`chart.paletteOptions`, a list of palette names), and the default (`chart.selected`). If `paletteOptions` is empty or lists none of the defined palettes, the palette picker in chart settings shows "Palette Options not yet configured" and cannot be changed — the dashboard-level theme is the source of truth. To unlock palette selection, add the palette names you want selectable to `paletteOptions`. In embedded dashboards the same can be supplied via the `chartPaletteOptions` and `chartColors` component options.
</Note>

<Frame>
  <img src="https://mintcdn.com/databrainlabs-bef6850a/MeBlz5-oz998iZWJ/Creatingatheme5.png?fit=max&auto=format&n=MeBlz5-oz998iZWJ&q=85&s=08218b2bc8f913b8aa05ed6dcc0b8f4a" alt="Configure Chart Settings" width="2932" height="1654" data-path="Creatingatheme5.png" />
</Frame>

6. **Configure Date Picker :**

* Choose the **Date Picker Format** from the dropdown options (e.g. `MM/DD/YYYY`, `DD-MM-YYYY`, `Mon DD, YYYY`). This controls how dates display in date pickers across the dashboard. In embed code, the same setting is the theme config key `general.datePickerFormat`.
* Finally, click **"Save Theme"** to save your created theme.

<Frame>
  <img src="https://mintcdn.com/databrainlabs-bef6850a/BdJBdvkTUqNzz4Rl/images/Creatingatheme6.png?fit=max&auto=format&n=BdJBdvkTUqNzz4Rl&q=85&s=93ef27ed8fa6a56699c781d89f9f0e5d" alt="Creatingatheme6 Pn" width="2936" height="1656" data-path="images/Creatingatheme6.png" />
</Frame>

7. **View your created theme in the UI Theming page**

<Frame>
  <img src="https://mintcdn.com/databrainlabs-bef6850a/MeBlz5-oz998iZWJ/Creatingatheme7.png?fit=max&auto=format&n=MeBlz5-oz998iZWJ&q=85&s=dc3f30c5dd6cfbcdad919c45e70c50bf" alt="" width="2932" height="1650" data-path="Creatingatheme7.png" />
</Frame>

<Check>
  You have succesfully created your Dashboard theme in Databrain !
</Check>