Click on your user icon on the top right corner and select “Custom Styles” from the dropdown.

Change parameters to customize your dashboards

​
Multiple Style/Theme Profiles

You can manage multiple style/theme profiles within Explo. By default, explo displays the ‘default’ theme/style in your embedded components. However, you can pass in the name of a theme/style via the theme prop in the iframe or web component to display a different theme/style.

#iframe
<iframe
  src="https://app.explo.co/iframe/<DASHBOARD_ID>/<CUSTOMER_TOKEN>/<ENVIRONMENT>?theme="theme_name"
  style="width: 100%;border: none;height: 100vh;">
</iframe>

#web component
<explo-dashboard
  dash-customer-token="DASHBOARD_ID:CUSTOMER_TOKEN"
  environment="production"
  theme="theme_name"
/>

Copy the exact styles from your own application in order to match the design. If you want to select new colors, you can reference tools such as Adobe Color Wheel for help!

You can reference the following table to understand how each setting affects your dashboard:

ParameterEffects on Dashboard
Number of dashboard columnsThe number of columns on the dashboard determines the layouts that can be created. 12 columns provides the greatest flexibility, so we recommend that you don’t change this value unless you have a unique use case.
Default: 12
Background ColorThe background color for the dashboard.
Default: #FAFAFA
Actions ColorThe default color for buttons and input states.
Default: #0069ED
Button ColorOverrides the default action color for buttons.
Default: Inherit
Interaction States ColorOverrides the default action color for hover interactions (e.g. dropdown input).
Default: Inherit
SpacingThe number of pixels between adjacent elements on the dashboard.
Default:
FillThe background color for charts and containers.
Default: #FFFFFF
OutlineThe border color and width for elements on the dashboard.
Default: Enabled, #D9E0E9, 1px
ShadowThe box shadow color and size for elements on the dashboard. A box shadow allows elements to appear a “layer above” the background.
Default: Disabled, #000000, 4px
PaddingInterior padding within charts and containers.
Default: 20px
Corner RadiusDetermines the roundness of the corners of elements on the dashboard.
Default: Inherit
Button Corner RadiusOverrides the default corner radius for buttons.
Default: Inherit
Primary TextFont style and color for headings and most body text on the dashboard. Leaving this value as “Inherit” allows the dashboard to inherit the font family from the website in which it’s embedded.
Default: Inherit, #000000
Secondary TextFont style and color for supporting text and icons (e.g. “download CSV” icon button on the Data Table). Leaving this value as “Inherit” allows the dashboard to inherit the font family from the website in which it’s embedded.
Default: Inherit, #626262
Text SizeThe size of body text on the dashboard. Other text sizes are derived from this value as follows:
- Header 1: + 8px
- Header 2: + 6px
- Header 3: + 2px
- Body: + 0px
- Small Heading: - 2px
- Small Body: - 2px
Custom Text OverridesCustom overrides for the various text types contained in a dashboard. These types are typically used as follows:
- Header 1: Extra large text to communicate a single value (e.g. KPI value)
- Header 2: Chart headings (e.g. Bar chart, Line chart, etc.)
- Header 3: Secondary headings (e.g. heading in date picker modal)
- Body: Most text on the dashboard, such as data table values, dropdown input options, and share button text.
- Small Heading: Chart axis and legend titles
- Small Body: Supporting text, such as chart axis and legend values
Categorical PaletteDefault palette for category-based charts (e.g. Bar chart, Pie chart) Good for clear differentiation between categories.
Default: #0069ED, #907EFF, #7E9AFF, #7ACC39, #FF8750, #FCD508
Diverging PaletteGood for data where values fall on one end of a “middle point”.
Default: #7ACC39, #FFFFFF, #0069ED
Gradient PaletteDefault palette for spectrum-based charts (e.g. Heat map). Good for data that falls on a spectrum or within a range.
Default: #FFFFFF, #0069ED

If you need any additional customizations, feel free to reach out to us at [email protected].

Embedding EnvironmentsCustom Fonts