Propriedades do tema

Visão geral

Os temas usam estruturas JSON especiais com propriedades CSS. Este artigo descreve propriedades individuais e dá exemplos.

Estrutura completa do JSON

Este é um conjunto de exemplos de propriedades que você pode personalizar (expanda para exibir):

{ "theme" : { "content" : { "palette" : { "primary" : { "base" : "#3049D1" }, "error" : { "base" : "#e54d42" }, "success" : { "base" : "#00c18d" }, "warning" : { "base" : "#f4d521" } }, "typography" : { "font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)", "fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)" }, "button" : { "borderRadius" : "2", "dropShadow" : true }, "modal" : { "title" : { "color" : "#6D7680", "lineColor" : "#DAE2EA" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true, "outsideBackgroundColor" : "#DAE2EA" }, "tooltip" : { "color" : "#C8D0FF", "backgroundColor" : "#07124E" },        "analyticalDesigner" : { "title" : { "color" : "#6D7680" } }, "dashboards" : { "title" : { "color" : "#6D7680", "backgroundColor" : "#F4F5FB",           "borderColor" : "#1b4096" }, "navigation" : { "title" : { "color" : "#6d7680" }, "borderColor" : "#DAE2EA", "item" : { "color" : "#6d7680", "hoverColor" : "#000", "selectedColor" : "#000", "selectedBackgroundColor" : "#F4F5FB" }, "backgroundColor" : "#ffffff" }, "filterBar" : { "filterButton" : { "backgroundColor" : "#F4F5FB" }, "backgroundColor" : "#F4F5FB",           "borderColor" : "#1b4096" }, "section" : { "title" : { "color" : "#6D7680", "lineColor" : "#dde4eb" }, "description" : { "color" : "#999EA5" } }, "content" : { "kpiWidget" : { "title" : { "color" : "#8292E3", "textAlign" : "center" }, "kpi" : { "primaryMeasureColor" : "#E8EAF7", "secondaryInfoColor" : "#8292E3" }, "borderColor" : "#3049D1", "borderRadius" : "6", "borderWidth" : "1", "backgroundColor" : "#1b4096", "dropShadow" : true }, "widget" : { "title" : { "color" : "#101010", "textAlign" : "center" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true }, "backgroundColor" : "#F4F5FB" } } }, "meta" : { "category" : "theme", "deprecated" : "0", "isProduction" : 1, "summary" : "", "tags" : "", "title" : "Demo theme" } } }

Regras gerais

Para personalizar Dashboards de KPI, atualize as propriedades na seção dashboards.

Para personalizar o Analytical Designer, atualize as propriedades na seção analyticalDesigner.

Ao criar temas, siga estas regras gerais:

Cores	Para formatos de codificação de cores use: Cor hexadecimal sem transparência: `#ff0` ou `#ff00ff` Cor hexadecimal com transparência: `#ff06` ou `#ff00ff80` Cores RGB: `rgb(120,120,120)` Cores RGBA: `rgb(120,120,120,0.6)` As cores de fundo devem ter contraste suficiente para leitura dos textos.
Bordas	Raio e espessura da borda usam pixels. Para usar outra unidade, inclua-a na string. Exemplo: `"border-radius" : "2em"`
Bordas de widget	O máximo recomendado para o raio da borda de widget é 30 px. A largura máxima recomendada para as bordas de widget é 4 px. Para ocultar a borda dos widgets, use uma cor transparente em vez de borderwidth=0. Exemplo: `"borderColor": 78787800"` ou `"borderColor": "rgb(120,120,120,0)"`
Seção Meta	Independentemente da quantidade de propriedades alteradas, cada tema personalizado deve incluir a seção `meta`. `"meta" : { "category" : "theme", "deprecated" : "0", "isProduction" : 1, "summary" : "", "tags" : "", "title" : "{Your theme name}" }`

Propriedades

As próximas seções contêm informações sobre propriedades individuais, exemplos e códigos exemplificados.

Cores

As cores básicas dos Dashboards de KPI e do Analytical Designer são definidas na seção palette.

Além dessas cores, você também pode alterar cores de tipos individuais de elemento visual. Consulte as seções abaixo.

Propriedade	Descrição	Exemplo de código
Cor principal	Cor dos principais botões, links e elementos visuais em destaque. Padrão:	`"primary" : { "base" : "#3049D1" }` Personalizada:
Cor de erro	Cor de mensagens e estados de erro. Padrão:	`"error" : { "base" : "#7d07f2" }` Personalizada:
Cor de sucesso	Cor das mensagens e dos estados de sucesso. Padrão:	`"success" : { "base" : "#00c18d" }` Personalizada:
Cor de aviso	Cor de mensagens e estados de aviso. Padrão:	`"warning" : { "base" : "#e60000" }` Personalizada:
Complementar	Apenas para Dashboards de KPI. Cores de vários elementos visuais, como bordas, linhas, sombras, botões etc. A paleta complementar tem 10 cores à sua escolha (`c0` a `c9`). Você pode definir: As 10 cores. A primeira ( `c0` ) e a última cores ( `c9` ). Essas duas cores são obrigatórias. O restante será calculado automaticamente utilizando essas cores. A primeira cor ( `c0` ), a última ( `c9` ) e qualquer quantidade de cores entre elas. O restante será calculado automaticamente utilizando essas cores. As cores individuais são usadas para: `c0` – cor de fundo de dashboards, widgets, caixas de diálogo etc. `c1` – cor de fundo contrastante. `c2` – mais cor de fundo contrastante. `c3` – cor clara da borda. `c4` – cor média da borda. `c5` – cor clara do texto, cor escura da borda. `c6` – cor do texto. `c7` – cor do texto. `c8` – cor do texto. `c9` – cor escura do texto, cor de fundo. Para ver exemplos de utilização da paleta complementar, consulte Exemplos de tema. Não troque o nome das cores. O fundo é definido com a primeira cor, `c0`. Se a cor do fundo (`c0`) for mais escura que a da última cor (`c9`), crie um modo “escuro”. A paleta complementar também se aplica a todos os elementos que não estão definidos especificamente no seu tema.	`"complementary" : { "c0" : "#282a36", "c1" : "#4d4466", "c2" : "#725e97", "c3" : "#9778c8", "c4" : "#bd93f9", "c5" : "#c8a7f7", "c6" : "#d4bbf6", "c7" : "#e0cff4", "c8" : "#ece3f3", "c9" : "#f8f8f2" }`

Fontes

As fontes estão definidas na seção typography do JSON.

Especifique as duas variantes da fonte (normal e negrito). Elas devem ser da mesma família de fontes.

Use os seguintes formatos para fontes externas:

URL absoluto - "font": "url(https://somewebsite.com/path/to/font.woff)"
Formato explícito - "font": "url(https://somewebsite.com/path/to/font.woff) format('woff')"

Para fontes locais use estes formatos:

"font": "local(Arial)"
"font": "local(Time New Roman)"
"font": "local('Times New Roman')"

Propriedade Descrição Exemplo de código

Propriedade	Descrição	Exemplo de código
Fonte normal	Especifica uma fonte normal.	`"font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)"` `"font": "local(font), url(path/to/font.svg) format('svg'), url(path/to/font.woff) format('woff'), url(path/to/font.otf) format('opentype')"`
Fonte em negrito	Especifica uma fonte em negrito.	`"fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)"`

Fonte normal

Especifica uma fonte normal.

"font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)"

"font": "local(font), url(path/to/font.svg) format('svg'), url(path/to/font.woff) format('woff'), url(path/to/font.otf) format('opentype')"

Fonte em negrito

Especifica uma fonte em negrito.

"fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)"

Fontes recomendadas

Aqui estão algumas fontes gratuitas recomendadas para você usar em seus temas.

Sans Serif Fonts	Serif Fonts
Lato Assistant Nono Sans Source Sans Pro Libre Franklin Open Sans Roboto Titilium Web Varela Round	Crimsonn Text Old Standard TT Kameron Copse

Elementos visuais

Personaliza elementos visuais, como botões, janelas de sobreposição e dicas de ferramentas.

Propriedade	Descrição	Exemplo de código
Botão	Personalizar a aparência dos botões nos Dashboards de KPI e no Analytical Designer. Padrão:	`"button" : { "borderRadius" : "0", "dropShadow" : false }` Personalizada:
Janelas de sobreposição	Personalização das janelas de sobreposição.	`"modal" : { "title" : { "color" : "#6D7680", "lineColor" : "#DAE2EA" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true, "outsideBackgroundColor" : "#DAE2EA" }`
Dicas de ferramentas	Personalizar dicas de ferramentas. Padrão:	`"tooltip" : { "color" : "#C8D0FF", "backgroundColor" : "#07124E" },` Personalizada:

Analytical Designer

Personaliza a cor dos nomes dos insights.

Propriedade	Descrição	Exemplo de código
Cor do título do insight	Cor do nome do insight. Padrão:	`"analyticalDesigner" : { "title" : { "color" : "#d6044e" } }` Personalizada:

Dashboards de KPI

Personaliza os vários elementos dos Dashboards de KPI, como títulos, filtros, navegação e widgets.

Propriedade	Descrição	Exemplo de código
Título do dashboard de KPI	Personaliza o título dos seus Dashboards de KPI. Padrão:	`"title" : { "color" : "#0392bd", "backgroundColor" : "#eafafd", "borderColor" : "#1b4096" }` Personalizada:
Navegação	Personalizar a navegação à esquerda dos Dashboards de KPI. Padrão:	`"navigation" : { "title" : { "color" : "#3973ac" }, "borderColor" : "#DAE2EA", "item" : { "color" : "#3973ac", "hoverColor" : "#000", "selectedColor" : "#000", "selectedBackgroundColor" : "#F4F5FB" }, "backgroundColor" : "#ffffff" }` Personalizada:
Barra de filtros	Personaliza a aparência da barra de filtros dos seus Dashboards de KPI. Padrão:	`"filterBar" : { "filterButton" : { "backgroundColor" : "#F4F5FB" }, "backgroundColor" : "#F4F5FB", "borderColor" : "#1b4096" }` Personalizada:
Seções do dashboard	Personaliza o título e a descrição das seções dos Dashboards de KPI. Padrão:	`"section" : { "title" : { "color" : "#3b6ba1", "lineColor" : "#85abd6" }, "description" : { "color" : "#85abd6" } }` Personalizada:

Seção de conteúdo

Propriedade	Descrição	Exemplo de código
KPIs	Personaliza a aparência dos KPIs nos Dashboards de KPI. Mantenha o raio da borda em 4 px ou abaixo para evitar problemas de exibição nos arquivos PDF exportados. Padrão:	`"kpiWidget" : { "title" : { "color" : "#8292E3", "textAlign" : "center" }, "kpi" : { "primaryMeasureColor" : "#E8EAF7", "secondaryInfoColor" : "#8292E3" }, "borderColor" : "#3049D1", "borderRadius" : "6", "borderWidth" : "1", "backgroundColor" : "#1b4096", "dropShadow" : true }` Personalizada:
Insights nos Dashboards de KPI	Personaliza os insights adicionados aos Dashboards de KPI. Se você tiver insights de cabeçalho no seu dashboard de KPI, mantenha o raio da borda em 4 px ou abaixo para evitar problemas de exibição nos arquivos PDF exportados. Padrão:	`"widget" : { "title" : { "color" : "#101010", "textAlign" : "center" }, "borderColor" : "#ffffff", "borderRadius" : "6", "borderWidth" : "2", "dropShadow" : true }` Personalizada:
Cor de fundo	Cor do fundo do dashboard de KPI. Padrão:	`"backgroundColor" : "#F4F5FB"` Personalizada:

Exemplos de tema