管理员设置 - 主题背景

您可以使用自定义主题来自定义嵌入式 Looker 信息中心、Look 和探索的外观。您可以使用主题来自定义字体系列、文本颜色、背景颜色、按钮颜色、图块颜色以及其他视觉元素。

例如,您可以创建“深色”主题,以更改嵌入式信息中心的外观。

如需了解如何为信息中心和探索设置默认主题,或者了解如何将主题应用于特定信息中心或探索,请参阅嵌入入门 - 应用自定义主题文档页面。

通过管理面板的平台部分的主题页面,您可以为嵌入式信息中心中的图块定义主题、嵌入式探索和编辑窗口

本页面介绍以下内容:

默认主题

Looker 默认主题是在您的实例上自动创建的,此主题无法删除或修改。系统会将 Looker 主题用作默认主题,除非 Looker 管理员将其他主题指定为默认主题

您可以通过选择主题旁边的 View 按钮或创建主题的副本来查看 Looker 主题设置,这些设置分为以下几部分:

主题

设置名称 价值
名称 Looker

常规

本部分中的设置同时适用于嵌入式信息中心和嵌入式探索。

设置名称 价值 Notes
按键颜色 #1A73E8 信息中心为主要按钮和过滤器控件使用此颜色。

探索会将此颜色用于主要按钮、横幅和强调内容。
文本颜色 #3e3f40
背景颜色 #f6f8fa
字体系列 Roboto、Noto Sans JP、Noto Sans CJK KR、Noto Sans 阿拉伯语界面、Noto Sans Devanagari 界面、Noto Sans 希伯来语、Noto Sans 泰语界面、Helvetica、Arial、sans-serif 这些字体由 Looker 应用提供,并且推荐使用,因为它们在浏览器中以及在图片渲染时可用。Looker 使用支持字符的字体系列列表中的第一个字体,因此应首先列出优先级较高的字体或专用字体。Looker 会使用字体的“界面”变体(如果可用),以便对字符进行略微修改,使其更好地适应视觉组件的边界。
字体来源

信息中心页面

设置名称 价值
颜色集合
背景颜色 #f6f8fa

信息中心图块

设置名称 价值
标题颜色 #3a4245
文本颜色 #3a4245
文本正文颜色
背景颜色 #ffffff
标题对齐 居中

信息中心控件

设置名称 价值
显示信息中心标题
显示过滤器栏

探索页面

设置名称 价值
显示标题
显示标题
显示上次运行时间
显示时区
显示“运行”按钮
显示设置按钮

Look 页面

设置名称 价值
显示标题
显示标题
显示上次运行时间
显示时区
显示“运行”按钮
显示设置按钮

以下是信息中心、信息中心图块的编辑窗口以及“使用 Looker”主题进行探索的示例。

采用 Looker 主题的信息中心示例

使用默认 Looker 主题的嵌入式 Looker 信息中心。

采用 Looker 主题的信息中心图块修改窗口示例

使用默认 Looker 主题的嵌入式 Looker 信息中心内的“修改图块”对话框。

采用 Looker 主题的“探索”页面示例

使用默认 Looker 主题的嵌入式 Looker 探索。

如何应用主题和嵌入设置

您可以使用自定义主题和网址参数更改嵌入式信息中心或“探索”的默认主题的外观。显示嵌入式信息中心或探索时,Looker 会按以下顺序应用设置:

  1. 默认主题的设置开始
  2. 应用网址的 theme 参数中指定的自定义主题中的设置(如果有)
  3. 应用 _theme 网址参数中指定的属性(如果有)(仅适用于信息中心)

每项内容都会覆盖之前的内容,也就是说,嵌入设置会覆盖默认主题设置,而自定义主题会覆盖嵌入设置和默认主题。

但是,对于 _theme 网址参数,只有 _theme 参数中指定的元素会替换其他主题或嵌入设置中的元素。系统仍会使用其余的自定义主题设置和嵌入设置。例如,如果您在嵌入式信息中心的网址中添加 _theme={"show_filters_bar":false} 参数,系统将不会显示过滤条件栏,即使您在嵌入设置或自定义主题中开启了显示过滤条件也是如此。不过,系统仍会使用自定义主题或嵌入设置中的其他设置。

下载的信息中心会显示任何已应用的自定义主题。

创建自定义主题

如需创建自定义主题,请选择添加主题

“添加主题”按钮显示在“主题”页面顶部。

接下来,在 New Theme 页面上,为所需的每项设置添加样式和颜色规范。

除了主题的标题(必须唯一)以外,其他所有字段都自动填充默认主题中的值。您可以更改任何设置,具体如以下部分所述。选择保存主题以保留更改并保存新主题。

主题

名称:主题的名称必须是唯一的,并且只能包含字母数字字符和下划线。如果您在主题名称中输入空格,则在保存主题时,空格将被下划线替换。

常规

本部分中的设置同时适用于嵌入式信息中心和嵌入式探索。

按键颜色:信息中心会将此颜色用于主要按钮和过滤器控件。探索会将此颜色用于字段选择器链接和图标、主要按钮、横幅和强调色。

文字颜色:探索和信息中心上文字的十六进制颜色代码。

背景颜色:探索和信息中心页面的背景色的十六进制颜色代码。

字体系列:字体系列的名称。此字体将用于信息中心内的所有文本,包括可视化图表中的图块标题、文本图块和图例。此字体也将用于“探索”中的所有文本。如果字体名称中包含空格,请在名称前后加上英文引号,例如 "Open Sans"。

  • 如果您使用的是常见的网络安全字体,则只需在字体系列字段中输入字体名称,并将字体来源字段留空即可。如果您要使用不常用的字体,请在字体系列字段中输入字体名称,然后使用下文所述的字体来源字段提供指向要使用的字体定义的网址。

字体来源:除非您要使用自定义字体(一种不是常见的网络安全字体的字体),否则请将此字段留空。字体来源必须是以 https 开头的完整网址,并指向在 @font-facesrc 参数中指定的 url 值。我们建议使用网络开放字体格式 (.woff) 文件,因为 Internet Explorer 11 不支持 .woff2 文件。

  • 例如,对于 PT Sans Narrow,您可以在字体系列字段中输入“PT Sans Narrow”,然后在字体来源字段中输入 https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff

包含自定义主题的嵌入式“探索”示例

以下示例展示了具有自定义主题的嵌入式“探索”。Key Color 设为 #e82042Font Family 设为 Verdana。

当您运行嵌入式设置中的“探索”时,“探索”中的文本会以指定的字体系列字体 Verdana 显示。强调色、按钮和链接以指定的 Key Color (#e82042) 显示:

将颜色 #e82042 应用于“添加”按钮、“转到 LookML”按钮、齿轮菜单按钮以及“快速入门”分析标题的嵌入式探索。

运行探索后,Run 按钮轮廓和文本将以指定的 Key Color (#e82042) 显示:

将颜色 #e82042 应用于“运行”按钮的嵌入式探索。

具有自定义主题的嵌入式信息中心图块编辑窗口示例

除了上一部分介绍的“探索”元素之外,当您修改信息中心图块时,横幅会显示在 Key Color 设置 (#e82042) 中指定的色调和 Font Family 设置中指定的字体 (Verdana):

嵌入式 Looker 信息中心内的“修改图块”对话框,颜色 #e82042 应用于横幅,而 Verdana 字体系列应用于页面上的所有文本。

信息中心页面

颜色集合:您可以选择一个“颜色集合”,即一组相互协调的调色板。当您将某个颜色集合分配给信息中心时,系统将根据该集合中的调色板为该信息中心的所有图块中的所有数据系列着色,从而确保数据系列的颜色在整个信息中心协调一致。

  • 当您将颜色集合分配给嵌入的主题时,该主题的颜色集合将覆盖之前分配给功能块的所有颜色集合。不过,主题的颜色集合不会覆盖分配给数据系列的自定义颜色,也不会覆盖应用于可视化图表的条件格式

背景颜色:信息中心背景和文本图块背景的十六进制颜色代码。

上外边距:(可选)为信息中心顶部的外边距设置特定值。从下拉菜单的预定义选项中进行选择。边距以像素 (px) 为单位。

下外边距:(可选)为信息中心底部的外边距设置特定值。从下拉菜单的预定义选项中进行选择。边距以像素 (px) 为单位。

Margin Sides:(可选)为信息中心两侧的外边距设置特定值。从下拉菜单的预定义选项中进行选择。边距以像素 (px) 为单位。

数字面板板块

Title Color:以下元素的十六进制颜色代码:

文字颜色:以下元素的十六进制颜色代码:

  • 信息中心内的文本,包括可视化图表中的图例
  • Markdown 图块的字幕和正文文字(1 级标题文字除外)
  • 文本图块上的标题级别 1、标题级别 2 和普通文本
  • 单值可视化图表中的图块图标

文本正文颜色:以下元素的十六进制颜色代码:

  • Markdown 图块中的正文文本(标题级别 2 和标题级别 3 除外)。
  • 文本图块中的正文

背景颜色:所有图块(文本图块除外)背景的十六进制颜色代码。(文本图块使用与信息中心相同的背景颜色,该颜色通过信息中心页面部分中的背景颜色进行设置)。

标题对齐方式:将图块标题的对齐方式设置为左对齐、右对齐或居中。

Title Font Size(标题字体大小):(可选)根据一组预定义的大小(以像素为单位)调整信息中心图块的字体大小。

Box Shadow:使用 CSS 语法在信息中心图块周围创建阴影。您可以从预定义的方框阴影中进行选择,也可以创建自定义方框。如需创建自定义框阴影,请输入所需的 horizontal-offset vertical-offset blur-radius spread-radius color ,然后选择输入自定义样式以应用您的设置。右侧会显示方框阴影设置的预览。

列间距大小:(可选)根据一组预定义的尺寸(以像素为单位)调整信息中心图块列之间的间距大小。

行间距大小:(可选)根据一组预定义的尺寸(以像素为单位)调整信息中心图块行之间的间距大小。

边框半径:(可选)调整信息中心图块的边框半径,以创建方形或圆角。

信息中心控件

显示信息中心标题:停用此选项可隐藏整个信息中心标题,包括所有信息中心过滤条件和控件。停用此选项后,系统会取消选择并停用所有其他信息中心控件选项。

显示信息中心标题 (Display Dashboard Title):选中该复选框可显示信息中心的标题。

Center Dashboard Title:选中此复选框可在信息中心上居中对齐信息中心标题。如果未启用此选项,信息中心标题将左对齐。此选项仅在 Display Dashboard Title 选项已启用时可用。

显示过滤条件栏:选中此复选框可在信息中心顶部显示过滤栏。如果未选择此选项,则显示过滤条件切换选项会被取消选中并停用,从而隐藏信息中心过滤条件图标

显示过滤条件切换开关:选中此复选框可显示信息中心过滤条件图标

显示信息中心上次更新时间指示符:选中该复选框可显示信息中心上次更新时间指示符

显示重新加载数据图标:选中该复选框以显示信息中心重新加载数据图标

显示信息中心菜单:选中该复选框以显示三点状信息中心菜单。取消选中此选项后,信息中心菜单选项将不可用。

探索页面

在自定义主题中,您可以调整嵌入式“探索”页面上的以下元素:

显示标题:停用此选项可隐藏嵌入式“探索”部分的整个标题,包括标题、“上次跑步时间”指示器、数据的时区、跑步按钮和探索操作齿轮菜单。

显示标题:停用此选项可隐藏嵌入式“探索”功能的标题

显示上次运行时间:停用此选项可隐藏“探索”功能的运行时间。

显示时区:停用此选项可隐藏嵌入式探索中数据的时区。

显示“运行”按钮:停用此选项可在嵌入的“探索”部分隐藏运行按钮。

显示操作按钮:停用此选项可在嵌入式“探索”工具中隐藏“探索”操作齿轮菜单

Look 页面

在自定义主题中,您可以调整嵌入式 Look 中的以下元素:

显示标题:停用此选项可隐藏嵌入式 Look 的整个标题,包括标题、上次运行时间指示器、数据的时区、Run 按钮和探索操作齿轮菜单。

显示标题:停用此选项可隐藏嵌入式 Look 的标题

显示上次运行时间:停用此选项可隐藏 Look 的运行时间。

显示时区:停用此选项可在嵌入式 Look 中隐藏数据的时区。

显示“Run”按钮:停用此选项可在嵌入式 Look 中隐藏“Run”按钮。停用在嵌入式 Look 上显示过滤条件后,此切换开关将不会显示运行按钮。

显示操作按钮:停用此选项可在嵌入式 Look 中隐藏“探索操作”齿轮菜单

复制主题

您可以复制现有主题背景,只需选择主题背景的菜单,然后选择复制主题背景即可。

当您复制主题时,新主题的名称默认为复制的主题的名称后面加上“(复制)”。请务必手动将此名称更改为仅包含字母数字字符和下划线的新唯一名称,并移除括号。

您可以修改其余设置,就像创建新主题时一样。有关这些设置的说明,请参阅前述主题设置。请务必选择保存,以保留所有主题背景设置。

编辑主题

Looker 主题是在您的实例上自动创建的,此主题无法修改。(如果您想修改 Looker 主题,可以改为创建主题的副本,然后修改此副本。)

对于所有其他主题背景,您可以选择关联的修改按钮来更新主题背景设置。

您可以修改设置,方法与创建新主题背景时一样。有关这些设置的说明,请参阅前述主题设置。请务必选择保存以保留更新。

删除主题

您可以删除 Looker 主题或当前设置为默认主题之外的任何主题。要删除主题,请选择相应主题的菜单,然后选择删除主题

删除某个主题后,在其网址中指定该主题的任何嵌入式信息中心都将使用默认主题

为嵌入式信息中心和探索设置默认主题

嵌入式 Look 不支持自定义主题。自定义主题仅适用于嵌入式信息中心和嵌入式探索。

如需为实例上的嵌入式信息中心和探索指定默认主题,请选择主题的菜单,然后选择设为默认

除非您为单个信息中心或“探索”指定了不同的设置,否则默认主题将用于 Looker 实例上的嵌入式信息中心和“探索”。请参阅此页面上的主题和嵌入设置的应用方式部分,详细了解如何将主题和嵌入设置应用到嵌入式信息中心或“探索”页面。

将主题应用于特定的嵌入式信息中心和探索

嵌入式 Look 不支持自定义主题。自定义主题仅适用于嵌入式信息中心和嵌入式探索。

如果您希望信息中心或“探索”使用默认主题以外的主题,可以在嵌入式信息中心或“探索”的网址中指定其他主题。为此,请在嵌入网址的末尾添加参数 theme= 以及主题名称。例如,如果您有一个名为“Red”的主题,则应在嵌入信息中心网址的末尾添加 theme=Red

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

对于“探索”,您需要在所嵌入的“探索”网址的末尾添加 theme=Rednone https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red

网址中的主题元素不区分大小写,因此您可以使用 theme=Redtheme=red

使用 _theme 网址参数应用各个信息中心主题元素

您可以使用 _theme 网址参数为嵌入式信息中心自定义各个主题元素,例如 tile_background_colorshow_title

_theme 网址参数的格式如下:

_theme={"<property>":value}

例如,您可以使用 _theme={"show_filters_bar":false} 隐藏嵌入式信息中心的过滤条件栏。完整网址可能如下所示:

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

使用英文逗号指定多个主题属性:

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

颜色值必须括在引号中,且可以使用颜色名称或十六进制颜色代码表示。如果使用的是十六进制代码,请务必使用 # 符号的网址编码版本,即 %23。例如,这两个网址参数都指定红色:

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

针对嵌入式信息中心使用 _theme 对象时,您需要考虑以下事项:

  • _theme 网址参数中指定的任何元素都将替换任何其他主题中该元素的设置。这使得 _theme 参数成为优化主题或嵌入设置的便捷方式。例如,假设您有一个会隐藏过滤条件栏的自定义主题,但您只有一个信息中心适合在其中显示过滤条件栏。您可以为信息中心使用自定义主题,然后在嵌入式信息中心的网址中添加 _theme={"show_filters_bar":true} 参数,以便在该信息中心显示过滤条件栏,但保留所有其他自定义主题设置。请参阅本页中的主题和嵌入设置的应用方式部分,详细了解如何将主题和嵌入设置应用到嵌入式信息中心。
  • 对于编程脚本,您必须对 _theme 参数进行网址编码。
  • 以 PDF 格式提供嵌入式信息中心时,系统不会应用 _theme 参数。
  • 如果您将信息中心下载为 PDF 文件,则系统会应用 _theme 参数。