Create Custom Power BI Theme via JSON Files

Photo by Stephen Dawson on Unsplash

On your report development journey in Power BI, you may have used the default report themes available. There is an array of predefined color schemes to choose from.

From learn.microsoft.com [1]

We will introduce you to an alternative that allows for more granular control and customization of the visual representation of your data. There are typically three ways to apply a report theme in Power BI:

• Select one of the default report themes available.
• Customize the current theme via the Customize theme dialog and save it as a JSON file for later applications.
• Import a JSON file that has all your chosen attribute values.

This article will focus on the third application of report themes; importing a JSON file. Open up your favorite text editor (I like to use VS Code) and create a file with any name you choose that is of the “.json” file extension. Place the following attributes listed below.

{
    "name": "My Theme",
    "dataColors": [
        "#006BA4",
        "#FF800E",
        "#ABABAB",
        "#595959",
        "#5F9ED1",
        "#C85200",
        "#898989",
        "#A2C8EC",
        "#3599B8",
        "#DFBFBF"
    ],
    "bad": "#AB1A1A",
    "neutral": "#E5AC12",
    "good": "#178E0B",
    "minimum": "#FD625E",
    "center": "#F5D33F",
    "maximum": "#01B8AA"
}

In the above code, we set default hexadecimal values for your basic report color-related attributes:

• dataColors: these values set the color of shapes like those in charts. After all the colors have been exhausted in the values provided, it will revert to Power BI’s default color palette.
• good, neutral, bad: typically used in KPI visuals.
• maximum, center, minimum: sets the gradient colors used in the conditional formatting dialog box.

With the basics down, we can change other report attributes, such as the color of the page background for the shape and slicer objects of the report. Notice the asterisk (*) symbols below the sub-sections. The symbol represents the styleName, but in future iterations, one will have more granular controls on other style features (i.e., table and matrix). Both are encapsulated under the visualStyles section.

"visualStyles": {
    "page": {
      "*": {
        "background": [
          { "color": { "solid": { "color": "#E2E5E5" } }, "transparency": 0 }
        ]
      }
    },
    "shape": {
      "*": {
        "border": [
          {
            "show": true,
            "color": { "solid": { "color": "#ffffff" } },
            "radius": 8
          }
        ],
        "background": [
          {
            "show": true,
            "color": { "solid": { "color": "#ffffff" } },
            "transparency": 0
          }
        ]
      }
    },
    "slicer": { "*": { "border": [{ "show": false, "radius": 8 }] } }
  }

There are other attributes not shown above that we could do such as set default settings for images we use for the reports background. This is shown in the sample JSON script below.

"page": {
      "*": {
        "background": [
          {
            "color": {
              "solid": {
                "color": "#E2E5E5"
              }
            },
            "image": {
              "name": "background",
              "scaling": "Fit",
              "url": "<Base64 Encode>"
            },
            "transparency": 0
          }
        ]
      }
    }

For more on extracting other theme settings not found in Microsoft’s Official documentation check out this article, here.

Conclusion
We covered more than the basics of developing custom themes using JSON. The below script list all that we have covered with a few additions. Use it change it, and I hope that it was helpful. Please, show your support by giving me a hand below.

{
    "name": "My Theme",
    "dataColors": [
      "#006BA4",
      "#FF800E",
      "#ABABAB",
      "#595959",
      "#5F9ED1",
      "#C85200",
      "#898989",
      "#A2C8EC",
      "#3599B8",
      "#DFBFBF",
      "#4AC5BB",
      "#5F6B6D",
      "#FB8281",
      "#F4D25A",
      "#7F898A",
      "#A4DDEE",
      "#FDAB89",
      "#B687AC",
      "#28738A",
      "#A78F8F",
      "#168980",
      "#293537",
      "#BB4A4A",
      "#B59525",
      "#475052",
      "#6A9FB0",
      "#BD7150",
      "#7B4F71",
      "#1B4D5C",
      "#706060",
      "#0F5C55",
      "#1C2325"
    ],
    "visualStyles": {
      "page": {
        "*": {
          "background": [
            {
              "color": {
                "solid": {
                  "color": "#E2E5E5"
                }
              },
              "image": {
                "name": "background",
                "scaling": "Fit",
                "url": "<Base64 Encode>"
              },
              "transparency": 0
            }
          ]
        }
      },
      "shape": {
        "*": {
          "border": [
            {
              "show": true,
              "color": {
                "solid": {
                  "color": "#ffffff"
                }
              },
              "radius": 8
            }
          ],
          "background": [
            {
              "show": true,
              "color": {
                "solid": {
                  "color": "#ffffff"
                }
              },
              "transparency": 0
            }
          ]
        }
      },
      "slicer": {
        "*": {
          "border": [
            {
              "show": false,
              "radius": 8
            }
          ]
        }
      }
    },
    "foreground": "#4584D3",
    "tableAccent": "#31B6FD",
    "bad": "#AB1A1A",
    "neutral": "#E5AC12",
    "good": "#178E0B",
    "minimum": "#FD625E",
    "center": "#F5D33F",
    "maximum": "#01B8AA",
    "textClasses": {
      "callout": {
        "fontFace": "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif"
      },
      "title": {
        "fontFace": "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif"
      }
    }
  }

Resources

[1] Learn Microsoft: https://learn.microsoft.com/en-us/power-bi/create-reports/media/desktop-report-themes/