All Collections
Build your dashboard
Customizing dashboards
Customize your Geckoboard dashboard with advanced theming
Customize your Geckoboard dashboard with advanced theming

Deeply customize the look and feel of your dashboards to match your company or team colors.

Updated yesterday

The Advanced Theming feature allows you to customize the colors of your dashboards to match your company branding while maintaining a consistent look and ensuring your metrics remain understandable at a glance.

How to apply a custom theme to your dashboard

A custom theme is available for all trialists and is included in our Pro and Scale plans.

  1. Click Customize from your dashboard’s navigation menu. From here, you can also upload a dashboard logo.

  2. Under the Theme heading, click on the dropdown and select Custom.

  3. Enter six-digit hex color codes for the dashboard elements you wish to change. The dashboard will automatically preview your changes.

  4. Click Save to save your new color scheme.

The table below provides more details on each dashboard element, our recommendations for choosing the right color, and the hex color codes for our default Dark and Light themes.

Element

Description

Hex code #

Main visualization color

Used for Series 1 in Bar, Line, and Column charts and for comparison visualizations.

Dark: 00D1FF
Light: 00C4EF

Dashboard background

Used for the dashboard frame and footer color.

Dark: 16113A

Light: DFE4EE

Widget background

Use the same hue as the dashboard color but with more or less brightness.

Dark: 272953

Light: FFFFFF

Text

Select a dark color for light themes and a light color for dark themes.

Dark: E1E1E7

Light: 666666

Positive

Used for positive states and alerts. E.g., on your status indicators, goals, and comparison visualizations.

Dark: 0FD354

Light: 0FD354

Negative

Used for negative states and alerts.

Dark: FC5C6A

Light: FC5C6A

Caution

Used for caution states.

Dark: FEB554

Light: FEB554

Chart series 2-9

Used for the other series in Bar, Line, and Column charts.

Dark and Light:

Series 2: E5C852

Series 3: C552E5

Series 4: 52E5D4

Series 5: E57452

Series 6: B7E552

Series 7: E5528D

Series 8: 52E56A

Series 9: 9252E5

Advanced theme templates

Use these examples as-is or as a starting guide to help you customize dashboard elements to match your brand's style.

Light themes

Example 1

Main visualization color: 2499D3

Dashboard background: EFEFEF

Widget background: FFFFFF

Text: 2152A0

Positive: 0FD354
Negative: FC5C6A
Caution: FEB554

Example 2

Main visualization color: FCB040

Dashboard background: FFE2B7

Widget background: FFFCF8

Text: 49230D

Positive: 0FD354

Negative: FF2E00

Caution: E0843D

Dark themes

Example 1

dark theme example 1

Main visualization color: F2A93C
Dashboard background: 183F80
Widget background: 0A1D3F
Text: FFFFFF
Positive: 8ACD41
Negative: D02E2A
Caution: E0843D

Example 2

dark theme example 2

Main visualization color: 01CCCC
Dashboard background: 000228
Widget background: 00294A
Text: EFEFF3
Positive: 0FD354
Negative: FC5C6A
Caution: FEB554

Did this answer your question?