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
- 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
kpbray