Power BI full theme json file example

[tomeragam]

Hi there,

It's quite hard to understand from the power BI documentation how to achieve a theme for reports.

Most of the examples in the documentation are 5 liner solutions that only show minimal theming capabilities.

They don't present how to do simple tasks such as changing all the visuals titles and setting them with a specific font size & color (for example).

It seams that almost all visuals have "title" property in which you can set font family, color & size.

However, I failed to find any example of how to target this within the json theme file.

The closest I got was looking at these links -

https://powerbi.microsoft.com/en-us/documentation/powerbi-desktop-report-themes/#report-theme-files-...

&

https://powerbi.tips/tools/report-theme-generator-v3/

The fist link is very hard to understand and it contains too much information about how the theme mechanism works behind the scenes.

Shouldn't it start with a simple example displaying a full blown theme json file?

That would be very helpful and answer most of my questions. I'm sure this would help others as well.

There's nothing like a good example to start working on something...

The second link is a nice tool but is not complete and lacks many settins (such as the one I'm searching for).

Please assist me here - I'm sure there is a simple way to theme PI reports...

[v-haibl-msft]

@tomeragam

It doesn't yet support formatting the title of visuals through themes. That is on PBI team's backlog.

You can also vote on https://ideas.powerbi.com/forums/265200-power-bi-ideas/suggestions/31543114-format-visualization-tit....

Best Regards,
Herbert

[duncfair]

Totally with Tomeragam on this one. I posted as much in the comments of the post specified in the first link. Either that or a video tutorial from the Power BI team demonstrating at least some of this should be high on the to-do list.

[RJ_Nippur]

I found the following GitHub page, which comes close to what you are asking.

It is not complete, but it helped me a lot.

KR Ricardo

[duncfair]

Thanks KR,

link?

[Anonymous]

I think that was the page:

https://github.com/deldersveld/PowerBI-ThemeTemplates

[ajsteers]

Here is a working "dark mode" theme: https://gist.github.com/aaronsteers/5a7f2e454318cc32ea7d0af32c8b710c

... and a sample light theme: https://gist.github.com/aaronsteers/5a7f2e454318cc32ea7d0af32c8b710c#file-sample-light-theme-json

Both of these are my own creation, compiled using resources across the web.

[ajsteers]

Here is a working "Light Theme"

{
  "name": "Sample Light Theme 1.1",
  "background": "#ffffff",
  "backgroundLight": "#ffffff",
  "backgroundNeutral": "#ffffff",
  "foreground": "#000000",
  "foregroundNeutralSecondary": "#535353",
  "foregroundNeutralTertiary": "#9b9b9b",
  "tableAccent": "#0c62fb",
  "dataColors": [
    "#0c62fb",
    "#6da1fd",
    "#85b0fd",
    "#c2d8fe",
    "#9b9b9b",
    "#6e6e6e",
    "#3e3e3e",
    "#efbfbf"
  ],
  "good": "#0c62fb",
  "neutral": "#9b9b9b",
  "bad": "#efbfbf",
  "maximum": "#666666",
  "center": "#9b9b9b",
  "minimum": "#666666",
  "null": "#efbfbf",
  "textClasses": {
    "callout": {
      "fontSize": 28,
      "fontFace": "Segoe UI",
      "color": "#0c62fb"
    },
    "title": {
      "fontSize": 14,
      "fontFace": "Segoe UI",
      "color": "#0c62fb"
    },
    "largeTitle": {
      "fontSize": 14,
      "fontFace": "Segoe UI",
      "color": "#0c62fb"
    },
    "header": {
      "fontSize": 12,
      "fontFace": "Segoe UI",
      "color": "#535353"
    },
    "label": {
      "fontSize": 10,
      "fontFace": "Segoe UI",
      "color": "#535353"
    },
    "lightLabel": {
      "color": "#3e3e3e"
    },
    "largeLightLabel": {
      "color": "#3e3e3e"
    },
    "smallLightLabel": {
      "color": "#3e3e3e"
    }
  },
  "visualStyles": {
    "page": {
      "*": {
        "background": [
          {
            "color": { "solid": { "color": "#ededed" } },
            "transparency": 0
          }
        ],
        "outspace": [
          {
            "color": { "solid": { "color": "#ffffff" } },
            "transparency": 0
          }
        ],
        "outspacePane": [
          {
            "backgroundColor": { "solid": { "color": "#ededed" } },
            "foregroundColor": { "solid": { "color": "#3e3e3e" } },
            "borderColor": { "solid": { "color": "#3e3e3e" } },
            "transparency": 0,
            "titleSize": 18,
            "headerSize": 8,
            "fontFamily": "Segoe UI",
            "border": true
          }
        ],
        "filterCard": [
          {
            "$id": "Applied",
            "backgroundColor": { "solid": { "color": "#0c62fb" } },
            "foregroundColor": { "solid": { "color": "#ffffff" } },
            "borderColor": { "solid": { "color": "#c2d8fe" } },
            "inputBoxColor": { "solid": { "color": "#ffffff" } },
            "transparency": 0,
            "textSize": 11,
            "fontFamily": "Segoe UI",
            "border": true
          },
          {
            "$id": "Available",
            "backgroundColor": { "solid": { "color": "#c2d8fe" } },
            "foregroundColor": { "solid": { "color": "#3e3e3e" } },
            "borderColor": { "solid": { "color": "#c2d8fe" } },
            "inputBoxColor": { "solid": { "color": "#c2d8fe" } },
            "transparency": 0,
            "textSize": 10,
            "fontFamily": "Segoe UI",
            "border": true
          }
        ]
      }
    },
    "*": {
      "*": {
        "*": [
          {
            "responsive": true,
            "wordWrap": true,
            "fontSize": 10,
            "backColorPrimary": { "solid": { "color": "#ffffff" } },
            "backColorSecondary": { "solid": { "color": "#ededed" } }
          }
        ],
        "title": [
          {
            "show": true,
            "fontColor": { "solid": { "color": "#535353" } },
            "background": { "solid": { "color": "#ffffff" } },
            "alignment": "center",
            "fontSize": 12,
            "fontFamily": "Segoe UI"
          }
        ],
        "background": [
          {
            "show": false,
            "color": { "solid": { "color": "#ffffff" } },
            "transparency": 0
          }
        ],
        "lockAspect": [{ "show": true }],
        "border": [
          {
            "show": false,
            "color": { "solid": { "color": "#ffffff" } }
          }
        ],
        "visualTooltip": [{ "type": "Default" }],
        "stylePreset": [{ "name": "None" }],
        "datalabels": { "color": { "solid": { "color": "#0c62fb" } } },
        "wordWrap": [{ "show": true }],
        "labels": [
          {
            "show": true,
            "labelOrientation": "horizontal",
            "color": { "solid": {} },
            "fillcolor": { "solid": {} },
            "enableBackground": true
          }
        ],
        "categoryLabels": [
          {
            "show": true,
            "labelColor": { "solid": {} }
          }
        ],
        "categoryAxis": [
          {
            "showAxisTitle": true,
            "labelColor": { "solid": {} }
          }
        ],
        "valueAxis": [
          {
            "showAxisTitle": true,
            "labelColor": { "solid": {} }
          }
        ]
      }
    },
    "slicer": {
      "*": {
        "background": [
          {
            "show": false,
            "color": { "solid": { "color": "#ffffff" } },
            "transparency": 0
          }
        ],
        "general": [
          {
            "outlineColor": { "solid": {} },
            "outlineWeight": 1,
            "orientation": "vertical",
            "responsive": true
          }
        ],
        "data": [
          {
            "mode": "Basic",
            "relativeRange": "",
            "relativePeriod": ""
          }
        ],
        "selection": [
          {
            "selectAllCheckboxEnabled": false,
            "singleSelect": true
          }
        ],
        "header": [
          {
            "show": true,
            "fontColor": { "solid": { "color": "#c2d8fe" } },
            "background": { "solid": {} },
            "outline": "None",
            "textSize": 10,
            "fontFamily": "Segoe UI"
          }
        ],
        "items": [
          {
            "fontColor": { "solid": { "color": "#0c62fb" } },
            "background": { "solid": {} },
            "outline": "None"
          }
        ]
      }
    },
    "basicShape": {
      "*": {
        "general": [
          {
            "outlineColor": { "solid": { "color": "#ffffff" } },
            "outlineWeight": 0,
            "orientation": "vertical",
            "responsive": true,
            "background": { "solid": { "color": "#ffffff" } }
          }
        ],
        "border": [
          {
            "show": false,
            "color": { "solid": { "color": "#ffffff" } }
          }
        ],
        "line": [
          {
            "lineColor": { "solid": { "color": "#0c62fb" } },
            "transparency": 0,
            "weight": 3,
            "roundEdge": 0
          }
        ],
        "fill": [
          {
            "show": true,
            "fillColor": { "solid": { "color": "#0c62fb" } },
            "transparency": 0
          }
        ],
        "rotation": [{ "angle": 0 }],
        "visualHeader": [{ "show": false }]
      }
    },
    "waterfallChart": {
      "*": {
        "sentimentColors": [
          {
            "increaseFill": { "solid": { "color": "#0c62fb" } },
            "decreaseFill": { "solid": { "color": "#efbfbf" } },
            "totalFill": { "solid": { "color": "#535353" } },
            "otherFill": { "solid": { "color": "#c2d8fe" } }
          }
        ],
        "breakdown": [
          {
            "maxBreakdowns": 8
          }
        ]
      }
    },
    "textbox": {
      "*": {
        "visualHeader": [{ "show": false }],
        "background": [
          {
            "show": false,
            "color": { "solid": {} },
            "transparency": 0
          }
        ]
      }
    }
  }
}

[pleger]

I don't understand

Where is the Schema definition? Anything available in TypeScript?

Thanks,

Philippe