Customizing themes for embedded dashboards is a beta feature that must be enabled by Looker. Please contact your Account Manager to update your license for this feature.
Themes are a way to customize the appearance of your embedded Looker dashboards. You can use themes to customize font family, text color, background color, and tile color.
For example, you can create a “dark” theme to really change the appearance of your embedded dashboard:
If you are a Looker admin, you can see the themes on your Looker instance by clicking on Admin at the top right of the window, scrolling down in the left panel of the Admin page, and clicking Themes:
The Looker theme is created automatically on your instance, and it cannot be deleted or edited. (You can see the settings of the Looker theme by creating a copy of the theme.)
Creating a Custom Theme
To create a custom theme, click Add Theme:
Except for the theme’s title, which must be unique, all of 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 Custom Theme Settings section below. Click Save to keep your changes and save your new theme.
Custom Theme Settings
When you add, edit or copy a theme, you will see the following settings:
- Name: The name for the theme must be unique, and can contain only numbers, letters, and underscores. If you enter spaces in the theme name, the spaces will be replaced with underscores when you save the theme.
Font Family: The name of the font family. This font will be used for all of the text on the dashboard, including tile titles, text tiles, and legends in visualizations. 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
httpsand points to the
urlvalue that is specified in the
For example, for Vera Serif Bold, you could enter “Vera Serif Bold” in the Font Family field and then enter
https://mdn.mozillademos.org/files/2468/VeraSeBd.ttfin the Font Source field. The font source file is most commonly a true type font (
.ttf) file or a web open font format (
Background Color: This is the color displayed between dashboard tiles and as the background of any text tiles. For all color fields, enter a hexadecimal code preceded by the hashtag symbol, such as
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 Tile Body: The hexadecimal color code for the body text and the subtitle text in text tiles.
Tile 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 section.)
- Dashboard Title: Check the box to display the title of the dashboard. Filter BarCheck the box to display the filters bar at the top of the dashboard.
Be sure to click Save 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. 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 Custom Theme Settings above. Be sure to click Save to keep all of 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 Custom Theme Settings above. Be sure to click Save to keep your updates.
Setting a Default Theme for Embedded Dashboards
To specify the default theme for the embedded dashboards on your instance, click on a theme’s menu and select Set as Default:
The default theme is used for embedded dashboards on your Looker instance, unless you specify different settings for an individual dashboard. There are two ways to specify that an embedded dashboard should not use the default theme:
- You can specify a different theme name in the URL of an embedded dashboard.
- You can modify the embed settings for a dashboard using the Edit Embed Settings option from the dashboard’s gear menu.
Applying a Theme to Specific Embedded Dashboards
If you want a dashboard to use a theme other than the default theme, you can specify a different theme in the URL of the embedded dashboard. 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 like this:
The theme element in the URL is not case sensitive, so you can use either
If embed settings are applied to a dashboard, they override any custom theme specified in the embed URL. If you want to use a theme for a dashboard that uses embed settings, you can remove the dashboard’s embed settings so that you can use a custom theme.
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.