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

json

{
  "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

json

{
  "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

json

{
  "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

json

{
  "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

json

{
  "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

json

{
  "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

json

{
  "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

json

{
  "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

json

{
  "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

json

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

Color Palettes

Microsoft Default

json

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

Corporate Blue

json

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

Earth Tones

json

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

Colorblind-Friendly

json

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

Dark Theme Colors

json

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

Conditional Formatting Colors

Diverging (Bad to Good)

json

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

Sequential

json

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

Using Themes in PBIR

Reference in report.json

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

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

Typography Guidelines

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

Visual Defaults

•Remove unnecessary elements - Hide borders, shadows by default
•Consistent spacing - Same padding/margins
•Align to grid - Use consistent positions
•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