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.

Custom themes are not supported on embedded Looks. Custom themes are available only for embedded dashboards and embedded Explores.

The options for custom themes continue to grow as we add more functionality. When we add an option for custom themes, any existing themes are 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 Create Theme API documentation page for the list of settings supported for themes.

Overview

You can define themes for embedded dashboards, embedded Explores, and the edit window for tiles in an embedded dashboard from the Themes page in the Platform section of the Admin panel:

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:

• The Looker default theme
• How themes are applied to embedded dashboards and Explores
• How to create, copy, edit, and delete a custom theme
• How to set a default theme for dashboards and Explores
• How to apply a theme other than the default to selected dashboards and Explores
• How to apply the _theme URL argument to select dashboard theme elements

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’s edit window, 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:

General:

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

Dashboard Page:

Dashboard Tiles:

Legacy Dashboards Button Colors:

Settings for legacy dashboards only:

Dashboard Controls:

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. Begins with the settings from the default theme
2. Applies customizations from the Edit Embed Settings option of a legacy dashboard’s gear menu, if any
3. Applies settings from the custom theme that is specified in the theme argument of the URL, if any
4. Applies properties that are 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 that are 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 embedded Explores.

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”.

• If you are using a common web-safe font, you can just type the font name in the Font Family field and leave the Font Source field blank. If you want to use a less common font, enter the font name in the Font Family field and then use the Font Source field below to provide a URL to the definition of the font you want to use.

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.

• For example, for PT Sans Narrow, you could enter “PT Sans Narrow” in the Font Family field and then enter https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff in the Font Source field.

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:

A tile’s edit window on an embedded dashboard in edit mode

In addition to the Explore elements above, when you’re editing a dashboard tile, the banner appears in the shade that is specified in the Key Color setting (#e82042), and the font that is 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.

• When you assign a color collection to an embedded theme, the theme’s color collection will override any color collection previously assigned to a tile. However, a theme’s color collection will not override customized colors assigned to a data series, nor will it override conditional formatting applied to a table visualization.

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 that has that theme specified in its URL will use the default theme.

Setting a default theme for embedded dashboards and Explores

Custom themes are not supported on embedded Looks. Custom themes are available only for embedded dashboards and embedded 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 on this page 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

Custom themes are not supported on embedded Looks. Custom themes are available only for embedded dashboards and embedded 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 that are specified for a legacy dashboard. See the How themes and embed settings are applied section on this page 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 documentation page.

Here is the format for the _theme URL argument:

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:

Use a comma to specify multiple theme properties:

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:

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

• Any element that is specified in the _theme URL argument will override the settings for that element in any other theme or in the embed settings for a legacy dashboard. This makes the _theme argument a handy way to refine themes or embed settings. For example, let’s say you have a custom theme that hides the filters bar, but you have one dashboard where having the filters bar show would make sense. You can use the custom theme for your dashboard and then add the _theme={"show_filters_bar":true} argument in the embedded dashboard’s URL to show the filters bar on that dashboard but keep all the other custom theme settings. See the How themes and embed settings are applied section on this page for more information on how themes and embed settings are applied to an embedded dashboard.
• For programming scripts, you must URL-encode the _theme argument.
• The _theme argument is not applied when delivering embedded legacy dashboards or embedded dashboards in PDF format.
• The _theme argument is applied if you download the dashboard as a PDF.