Themes Skill

This skill helps create Power BI report themes for consistent visual styling and branding.

When to Use This Skill

• Creating custom color palettes
• Setting default fonts and sizes
• Applying corporate branding
• Configuring visual defaults
• Creating dark/light mode themes
• Standardizing conditional formatting

Theme File Basics

File Format

Themes are JSON files with .json extension. They can be:

• Imported into Power BI Desktop (View > Themes > Browse for themes)
• Embedded in PBIR reports
• Shared across an organization

Basic Structure

{
  "name": "Custom Theme",
  "dataColors": ["#118DFF", "#12239E", "#E66C37", "#6B007B", "#E044A7", "#744EC2"],
  "background": "#FFFFFF",
  "foreground": "#252423",
  "tableAccent": "#118DFF"
}

Theme Properties

Core Colors

Property	Description
dataColors	Array of colors for data series
background	Default background color
foreground	Default text color
tableAccent	Accent color for tables/matrices
hyperlink	Link color
good	Positive/good indicator
neutral	Neutral indicator
bad	Negative/bad indicator

Typography

{
  "textClasses": {
    "label": {
      "fontFace": "Segoe UI",
      "fontSize": 12,
      "color": "#252423"
    },
    "title": {
      "fontFace": "Segoe UI Semibold",
      "fontSize": 14,
      "color": "#252423"
    },
    "header": {
      "fontFace": "Segoe UI Semibold",
      "fontSize": 12,
      "color": "#252423"
    },
    "callout": {
      "fontFace": "Segoe UI Light",
      "fontSize": 28,
      "color": "#252423"
    },
    "largeTitle": {
      "fontFace": "Segoe UI Light",
      "fontSize": 40,
      "color": "#252423"
    }
  }
}

Text Classes

Class	Used For
label	Data labels, axis labels
title	Visual titles
header	Table/matrix headers
callout	Card values, KPI values
largeTitle	Large display values

Complete Theme Structure

{
  "name": "Corporate Theme",
  "dataColors": [
    "#0078D4",
    "#00BCF2",
    "#00B294",
    "#FFB900",
    "#E81123",
    "#5C2D91",
    "#B4009E",
    "#107C10"
  ],
  "background": "#FFFFFF",
  "foreground": "#323130",
  "tableAccent": "#0078D4",
  "hyperlink": "#0078D4",
  "good": "#107C10",
  "neutral": "#FFB900",
  "bad": "#E81123",
  "maximum": "#107C10",
  "center": "#FFB900",
  "minimum": "#E81123",
  "textClasses": {
    "label": {
      "fontFace": "Segoe UI",
      "fontSize": 11,
      "color": "#605E5C"
    },
    "title": {
      "fontFace": "Segoe UI Semibold",
      "fontSize": 14,
      "color": "#323130"
    },
    "header": {
      "fontFace": "Segoe UI Semibold",
      "fontSize": 12,
      "color": "#323130"
    },
    "callout": {
      "fontFace": "Segoe UI",
      "fontSize": 28,
      "color": "#323130"
    }
  },
  "visualStyles": {
    "*": {
      "*": {
        "background": [{
          "color": { "solid": { "color": "#FFFFFF" } },
          "transparency": 0
        }],
        "border": [{
          "show": false
        }],
        "dropShadow": [{
          "show": false
        }]
      }
    }
  }
}

Visual Styles

Structure

{
  "visualStyles": {
    "<visualType>": {
      "<propertyGroup>": {
        "<property>": [{ <settings> }]
      }
    }
  }
}

Wildcards

Wildcard	Meaning
"*"	All visuals / all properties

Common Visual Types

Type	Description
"*"	All visuals
"page"	Report page
"card"	Card visual
"multiRowCard"	Multi-row card
"columnChart"	Column chart
"barChart"	Bar chart
"lineChart"	Line chart
"pieChart"	Pie chart
"donutChart"	Donut chart
"tableEx"	Table
"pivotTable"	Matrix
"slicer"	Slicer
"kpi"	KPI visual
"gauge"	Gauge
"map"	Map
"shape"	Shape
"textbox"	Text box

Common Property Groups

Group	Properties
background	Visual background
border	Visual border
dropShadow	Shadow effect
title	Visual title
subTitle	Subtitle
legend	Legend settings
categoryAxis	X-axis
valueAxis	Y-axis
labels	Data labels
dataPoint	Data point colors

Setting Defaults for All Visuals

{
  "visualStyles": {
    "*": {
      "*": {
        "background": [{
          "color": { "solid": { "color": "#FFFFFF" } },
          "transparency": 0
        }],
        "border": [{
          "show": true,
          "color": { "solid": { "color": "#E0E0E0" } },
          "radius": 5
        }],
        "dropShadow": [{
          "show": true,
          "color": { "solid": { "color": "#000000" } },
          "position": "Outer",
          "preset": "BottomRight",
          "transparency": 80
        }],
        "title": [{
          "show": true,
          "fontColor": { "solid": { "color": "#252423" } },
          "fontSize": 14,
          "fontFamily": "Segoe UI Semibold",
          "alignment": "left"
        }]
      }
    }
  }
}

Card Visual Styling

{
  "visualStyles": {
    "card": {
      "*": {
        "labels": [{
          "color": { "solid": { "color": "#0078D4" } },
          "fontSize": 32
        }],
        "categoryLabels": [{
          "show": true,
          "color": { "solid": { "color": "#605E5C" } },
          "fontSize": 12
        }],
        "background": [{
          "color": { "solid": { "color": "#F3F2F1" } }
        }]
      }
    }
  }
}

Chart Styling

{
  "visualStyles": {
    "columnChart": {
      "*": {
        "categoryAxis": [{
          "show": true,
          "labelColor": { "solid": { "color": "#605E5C" } },
          "fontSize": 11,
          "gridlineShow": false
        }],
        "valueAxis": [{
          "show": true,
          "labelColor": { "solid": { "color": "#605E5C" } },
          "fontSize": 11,
          "gridlineShow": true,
          "gridlineColor": { "solid": { "color": "#E0E0E0" } }
        }],
        "legend": [{
          "show": true,
          "position": "Top",
          "fontSize": 11,
          "fontColor": { "solid": { "color": "#605E5C" } }
        }],
        "labels": [{
          "show": false
        }]
      }
    }
  }
}

Table Styling

{
  "visualStyles": {
    "tableEx": {
      "*": {
        "grid": [{
          "gridVertical": true,
          "gridVerticalColor": { "solid": { "color": "#E0E0E0" } },
          "gridHorizontal": true,
          "gridHorizontalColor": { "solid": { "color": "#E0E0E0" } },
          "rowPadding": 4
        }],
        "columnHeaders": [{
          "fontColor": { "solid": { "color": "#FFFFFF" } },
          "backColor": { "solid": { "color": "#0078D4" } },
          "fontSize": 12,
          "bold": true
        }],
        "values": [{
          "fontColor": { "solid": { "color": "#323130" } },
          "fontSize": 11
        }],
        "total": [{
          "fontColor": { "solid": { "color": "#323130" } },
          "backColor": { "solid": { "color": "#E0E0E0" } },
          "bold": true
        }]
      }
    }
  }
}

Slicer Styling

{
  "visualStyles": {
    "slicer": {
      "*": {
        "header": [{
          "show": true,
          "fontColor": { "solid": { "color": "#252423" } },
          "fontSize": 14
        }],
        "items": [{
          "fontColor": { "solid": { "color": "#323130" } },
          "fontSize": 11
        }],
        "selection": [{
          "selectAllCheckboxEnabled": true,
          "singleSelect": false
        }]
      }
    }
  }
}

Page Background

{
  "visualStyles": {
    "page": {
      "*": {
        "background": [{
          "color": { "solid": { "color": "#F3F2F1" } },
          "transparency": 0
        }],
        "wallpaper": [{
          "color": { "solid": { "color": "#F3F2F1" } }
        }]
      }
    }
  }
}

Color Palettes

Microsoft Default

{
  "dataColors": [
    "#118DFF",
    "#12239E",
    "#E66C37",
    "#6B007B",
    "#E044A7",
    "#744EC2",
    "#D9B300",
    "#D64550"
  ]
}

Corporate Blue

{
  "dataColors": [
    "#0078D4",
    "#00BCF2",
    "#004578",
    "#5C2D91",
    "#B4009E",
    "#008272",
    "#00B294",
    "#002050"
  ]
}

Earth Tones

{
  "dataColors": [
    "#5B5EA6",
    "#9B2335",
    "#00A4CC",
    "#E4712B",
    "#3A4D39",
    "#8B6914",
    "#6B4226",
    "#4A5859"
  ]
}

Colorblind-Friendly

{
  "dataColors": [
    "#000000",
    "#E69F00",
    "#56B4E9",
    "#009E73",
    "#F0E442",
    "#0072B2",
    "#D55E00",
    "#CC79A7"
  ]
}

Dark Theme Colors

{
  "dataColors": [
    "#00BCF2",
    "#00CC6A",
    "#FFB900",
    "#E81123",
    "#B4009E",
    "#10893E",
    "#FF8C00",
    "#6B69D6"
  ],
  "background": "#1E1E1E",
  "foreground": "#FFFFFF",
  "tableAccent": "#00BCF2"
}

Conditional Formatting Colors

Diverging (Bad to Good)

{
  "bad": "#E81123",
  "neutral": "#FFB900",
  "good": "#107C10"
}

Sequential

{
  "minimum": "#FFFFFF",
  "center": "#00BCF2",
  "maximum": "#0078D4"
}

Using Themes in PBIR

Reference in report.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/fabric/item/report/definition/report/1.0.0/schema.json",
  "themeCollection": {
    "baseTheme": {
      "name": "CY24SU06",
      "reportVersionAtImport": "5.55",
      "type": "SharedResources"
    },
    "customTheme": {
      "name": "CustomTheme",
      "reportVersionAtImport": "5.55",
      "type": "Custom"
    }
  }
}

Embed Theme in Report

Store custom theme file in StaticResources/ folder of the report.

Best Practices

Color Guidelines

1. Use 6-8 data colors - Enough for variety, not overwhelming
2. Ensure contrast - 4.5:1 minimum for accessibility
3. Consistent semantics - Red=bad, Green=good across report
4. Consider colorblindness - Use patterns or labels too

Typography Guidelines

1. Limit font families - 1-2 maximum
2. Use system fonts - Segoe UI, Arial for consistency
3. Establish hierarchy - Titles > Headers > Body
4. Readable sizes - Minimum 10pt for data labels

Visual Defaults

1. Remove unnecessary elements - Hide borders, shadows by default
2. Consistent spacing - Same padding/margins
3. Align to grid - Use consistent positions
4. Default titles on - Help users understand visuals

Boundaries and Constraints

DO

• Test themes across all visual types
• Verify accessibility (contrast ratios)
• Document color meanings
• Keep color count manageable
• Test on different screen sizes

DO NOT

• Don't use too many colors (max 8-10)
• Avoid low contrast combinations
• Don't mix font families excessively
• Avoid theme-breaking individual visual formats