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": "#ffffff" }, "backgroundColor": "#F4F5FB" } } }, "meta": { "category": "theme", "deprecated": "0", "isProduction": 1, "summary": "", "tags": "", "title": "Demo theme" } } }

Regras gerais

Para personalizar Dashboards, 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 e do Analytical Designer são definidas na seção palette.

PropriedadeDescriçãoExemplo 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.

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.

"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')"
PropriedadeDescriçãoExemplo de código
Fonte normalEspecifica 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 negritoEspecifica 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 FontsSerif Fonts

Elementos visuais

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

PropriedadeDescriçãoExemplo de código
Botão

Personaliza a aparência dos botões nos dashboards e no Analytical Designer.

Padrão: 

"button" : { "borderRadius" : "0", "dropShadow" : false }

Personalizada: 

Janelas de sobreposiçãoPersonalizaçã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.

PropriedadeDescriçãoExemplo de código
Cor do título do insight

Cor do nome do insight.

Padrão:

"analyticalDesigner" : { "title" : { "color" : "#d6044e" } }

Personalizada:

Dashboards

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

PropriedadeDescriçãoExemplo de código
Título do dashboard

Personaliza o título dos seus dashboards.

Padrão: 

"title" : { "color" : "#0392bd", "backgroundColor" : "#eafafd",            "borderColor" : "#1b4096" }

Personalizada: 

Navegação

Personalizar a navegação esquerda dos Dashboards.

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.

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 seus dashboards.

Padrão:  

"section" : { "title" : { "color" : "#3b6ba1", "lineColor" : "#85abd6" }, "description" : { "color" : "#85abd6" } }

Personalizada: 

Seção de conteúdo

PropriedadeDescriçãoExemplo de código
KPIs

Personaliza a aparência dos KPIs nos dashboards.

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

Personaliza os insights adicionados aos dashboards.

Se você tiver insights de título no seu dashboard, 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": "#F4F5FB", "borderRadius": "6", "borderWidth": "2", "dropShadow": true, "backgroundColor": "#F4F5FB" }

Personalizada: 

Cor de fundo

Cor do fundo do dashboard.

Padrão: 

"backgroundColor" : "#F4F5FB"

Personalizada: 

 

 

 

Exemplos de tema