home User Guide Getting Started Help Center Documentation Community Training Certification
menu
close
settings
Looker keyboard_arrow_down
language keyboard_arrow_down
English
Français
Deutsch
日本語
search
print
Creating and Applying Themes for Embedded Dashboards and Explores

add

New in Looker 7.20, custom themes are available for embedded Explores. Embedded Explore themes are available only when the Upgraded Explore Field Picker Labs feature is enabled.

Customizing themes for embedded dashboards and Explores is a feature that must be enabled by Looker. Contact your Looker account manager to update your license for this feature.

The options for custom themes continue to grow as we add more functionality. When we add an option for custom themes, any existing themes will be assigned the default value for the new option. The default value can then be modified using the theme editor. To see what’s new, check in with the Custom theme settings section below, or check the Theme : manage themes API documentation page for the list of settings supported for themes.

Overview

You can define themes for embedded dashboards from the Themes page in the Platform section of the Admin panel. When the Upgraded Explore Field Picker Labs feature is enabled, these themes also apply to embedded Explores and dashboard query tiles when in edit mode:

You can use custom themes to customize the appearance of your embedded Looker dashboards and Explores. You can use themes to customize font family, text color, background color, button color, tile color, and other visual elements.

For example, you can create a “dark” theme to change the appearance of your embedded dashboard:

This page describes:

Default Theme

The Looker default theme is created automatically on your instance, and it cannot be deleted or edited. The Looker theme is used as the default theme unless a Looker admin specifies another theme as the default.

Below are examples of a dashboard, a dashboard tile in edit mode, and an Explore with the Looker theme.

Dashboard:

Editing a dashboard tile in dashboard edit mode:

Explore:

The Looker theme settings, which you can see by clicking the View button beside the theme or by creating a copy of the theme, are:

Theme:

Setting Name Value Notes
Name Looker

General:

The settings in this section apply both to embedded dashboards and to Explores.

Setting Name Value Notes
Key Color #1A73E8 Legacy dashboards use this color for primary buttons.
Dashboards use this color for primary buttons and filter controls.
Explores use this color for primary buttons, banners, and accents.
Font Family Roboto, ‘Noto Sans JP’, ‘Noto Sans CJK KR’, ‘Noto Sans Arabic UI’, ‘Noto Sans Devanagari UI’, ‘Noto Sans Hebrew’, ‘Noto Sans Thai UI’, ‘Helvetica’, ‘Arial’, sans-serif
Font Source None

These fonts are served by the Looker applications and are recommended because they will be available both in browsers and when rendering images. Looker uses the first font in the font family list that supports a character, so the higher priority or specialized fonts should be listed first. Looker uses the “UI” variations of fonts when available so that characters are slightly modified to better fit within the boundaries of visual components.

Dashboard Page:

Setting Name Value Notes
Color Collection None
Background Color #f6f8fa

Dashboard Tiles:

Setting Name Value Notes
Title Color #3a4245
Text Color #3a4245
Text Body Color None
Background Color #ffffff
Title Alignment Center Not available for legacy dashboards

Legacy Dashboards Button Colors:

Settings for legacy dashboards only:

Setting Name Value Notes
Info Button Color #0087e1
Warning Button Color #980c11

Dashboard Controls:

Setting Name Value Notes
Display Dashboard Title Yes
Display Filters Bar Yes

How Themes and Embed Settings Are Applied

You can change the appearance of an embedded dashboard or Explore from the default theme by using embed settings and custom themes. When displaying an embedded dashboard or Explore, Looker applies settings in the following manner:

  1. Begin with the settings from the default theme.
  2. Apply customizations from the Edit Embed Settings option of a legacy dashboard’s gear menu, if any.
  3. Apply settings from the custom theme specified in the theme argument of the URL, if any.
  4. Apply properties specified in the _theme URL argument, if any (for dashboards only).

Each item overrides the previous items, meaning that the embed settings override the default theme settings, and custom themes override the embed settings and the default themes.

However, in the case of the _theme URL argument, only the elements specified in the _theme argument override elements from the other themes or from the embed settings. The rest of the custom theme settings and embed settings will still be used. For example, if you add the _theme={"show_filters_bar":false} argument in an embedded dashboard’s URL, the filters bar will not be displayed, even if you have turned on Show Filters in the embed settings or in a custom theme. But the other settings from the custom theme or embed settings will still be used.

Creating a Custom Theme

To create a custom theme, click Add Theme:

Next, add style and color specifications for each desired setting on the New Theme page:

Except for the theme’s title, which must be unique, all the fields are automatically filled in with the values from the default theme. You can change any of the settings, which are described in the sections below. Click Save Theme to keep your changes and save your new theme.

Theme

Name: The name for the theme must be unique, and can contain only alphanumeric characters and underscores. If you enter spaces in the theme name, the spaces will be replaced with underscores when you save the theme.

General

The settings in this section apply both to embedded dashboards and to Explores.

The Upgraded Explore Field Picker Labs feature must be enabled for embed themes to apply to Explores. Starting in Looker 7.20, this Labs feature is enabled by default.

Key Color: Dashboards use this color for primary buttons and filter controls. Explores use this color for field picker links and icons, primary buttons, banners, and accents. Legacy dashboards use this color for primary buttons.

Font Family: The name of the font family. This font will be used for all the text on the dashboard, including tile titles, text tiles, and legends in visualizations. This font will also be used for all the text in an Explore. If there is a space in the name of the font, use quotes around the name, such as “Open Sans”.

Font Source: Leave this field blank unless you want to use a custom font — a font that is not a common web-safe font. The Font Source must be a complete URL that starts with https and points to the url value that is specified in the src argument of @font-face. We recommend using a web open font format (.woff) file, since .woff2 files aren’t supported by Internet Explorer 11.

Explore Examples

The following examples show embedded Explores that have a custom theme. The Key Color is set to #e82042 and the Font Family is set to Verdana.

Embedded Explore

When you’re running an Explore in an embedded setting, the text in the Explore appears in the specified Font Family font, Verdana. Accent colors, buttons, and links appear in the specified Key Color, #e82042:

After an Explore is run, the Run button outline and text appears in the specified Key Color, #e82042:

Explore in edit tile mode from an embedded dashboard

In addition to the Explore elements above, when you’re editing a dashboard tile, the banner appears in the shade specified in the Key Color setting (#e82042), and the font specified in the Font Family setting (Verdana):

Dashboard Page

Color Collection: Optionally, you can choose a color collection, which is a set of coordinating palettes that work well together. When you assign a color collection to a dashboard, all the data series in all the dashboard’s tiles are colored according to the palettes in the collection, ensuring that the data series’ colors are coordinated over the entire dashboard.

Background Color: The hexadecimal color code for the background of all tiles except text tiles. (Text tiles use the same background color as the dashboard, which is set using the Background Color in the Dashboard Page section.)

Dashboard Tiles

Title Color: The hexadecimal color code for the title of the dashboard and the titles of the dashboard tiles. (This color does not apply to the titles of text tiles. For that, use the Text Color field.)

Text Color: The hexadecimal color code for the text on the dashboard, including legends in visualizations, the text in single value visualizations, and the title for text tiles.

Text Body Color: The hexadecimal color code for the body text and the subtitle text in text tiles.

Background Color: The hexadecimal color code for the background of all tiles except text tiles. (Text tiles use the same background color as the dashboard, which is set using the Background Color in the Dashboard Page section.)

Title Alignment: Set the alignment of tile titles to left, right, or center. This option is not available for legacy dashboards.

Legacy Dashboard Button Colors

These settings are available only for legacy dashboards.

Info Button Color: The Info Button Color setting is reserved for future enhancements.

Warning Button Color: The hexadecimal color code for the button color when it is in a warning state. For example, when a dashboard is updating, the button uses this color code with the label Stop. The text color on the button is determined by the Text Color setting above.

Dashboard Controls

Display Dashboard Title: Select the checkbox to display the title of the dashboard.

Display Filters Bar: Select the checkbox to display the filters bar at the top of the dashboard.

Be sure to click Save Theme to keep your theme settings.

Copying a Theme

You can copy an existing theme by clicking on the theme’s menu and selecting Copy Theme:

When you make a copy of a theme, the new theme’s name defaults to the name of the copied theme, followed by “(copy)”. Be sure to manually change this name to a new, unique name with only alphanumeric characters and underscores, and be sure to remove the parentheses.

You can edit the rest of the settings just as you would when you create a new theme. For a description of the settings, see the theme settings above. Be sure to click Save to keep all your theme settings.

Editing a Theme

The Looker theme is created automatically on your instance, and it cannot be edited. (If you want to modify the Looker theme, you can instead create a copy of the theme and then edit the copy.)

For all other themes, you can click the associated Edit button to update theme settings:

You can edit the settings just as you would when you create a new theme. For a description of the settings, see the theme settings above. Be sure to click Save to keep your updates.

Deleting a Theme

You can delete any theme except the Looker theme or the theme that is currently set as the default. To delete a theme, click on the theme’s menu and select Delete Theme:

After you delete a theme, any embedded dashboard with that theme specified in its URL will use the default theme.

Setting a Default Theme for Embedded Dashboards and Explores

To specify the default theme for the embedded dashboards and Explores on your instance, click on a theme’s menu and select Set as Default:

The default theme is used for embedded dashboards and Explores on your Looker instance, unless you specify different settings for an individual dashboard or Explore. See the How Themes and Embed Settings Are Applied section for more information on how themes and embed settings are applied to an embedded dashboard or Explore.

Applying a Theme to Specific Embedded Dashboards and Explores

If you want a dashboard or an Explore to use a theme other than the default theme, you can specify a different theme in the URL of the embedded dashboard or Explore. To do this, add the parameter theme= with the name of the theme to the end of the embed URL. For example, if you have a theme called “Red,” you would add theme=Red at the end of your embed dashboard URL:

https://example.looker.com/embed/dashboards/246?theme=red

For Explores, you would add theme=Red at the end of your embed Explore URL:

https://example.looker.com/embed/explore/model_name/explore_name?theme=red

The theme element in the URL is not case-sensitive, so you can use either theme=Red or theme=red.

Custom theme settings override any embed settings specified for the dashboard. See the How Themes and Embed Settings Are Applied section for more information on how themes and embed settings are applied to an embedded dashboard.

Using the _theme URL Argument to Apply Individual Dashboard Theme Elements

You can use the _theme URL argument to customize individual theme elements for your embedded dashboard, such as tile_background_color and show_title.

To see all the supported properties of the _theme object, refer to the list in “ThemeSettings” on the Create Theme API 3.1 documentation page.

Here is the format for the _theme URL argument:

_theme={"<property>":value}

For example, you can use _theme={"show_filters_bar":false} to hide the filters bar of your embedded dashboard. The full URL might look like this:

https://docsexamples.dev.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}

Use a comma to specify multiple theme properties:

_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}

Color values must be in quotes, and can be expressed with the color name, or with the hexadecimal color code. If using a hex code, be sure to use URL encoded version of the # sign, which is %23. For example, both of these URL arguments specify the color red:

_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}

Here are some things to consider when using the _theme object for an embedded dashboard:

Top