Power BI Style Presets: Visual Consistency and Efficiency
- Jihwan Kim
- Apr 27
- 5 min read
In this writing, I'd like to share how I started learning to configure stylePresets in Power BI and why it’s an exciting breakthrough for Power BI professionals.
Why Do I as a Power BI Developer Need Style Presets?
As Power BI projects grow — across teams, departments, or global organizations — maintaining consistent styling becomes a real operational challenge. I often spend countless hours fine-tuning visuals one-by-one: adjusting colors, fonts, corner radius, header visibility, and so on. Worse, inconsistencies creep in when different developers build reports or when themes evolve over time.
stylePresets solves this.
By defining a preset once in the theme JSON, I can apply a fully formatted style to a visual with just a click. No more manual tweaking every single time. It's about building scalable design systems inside Power BI itself.
Benefits of Using Style Presets
🔹 Efficiency: Apply rich visual configurations instantly across multiple visuals.
🔹 Consistency: Ensure all visuals follow your organization's branding standards.
🔹 Flexibility: Update presets in the JSON theme and propagate changes automatically.
🔹 Professionalism: Raise the perceived quality of reports without adding manual workload.
🔹 User Experience: Deliver more beautiful and coherent experiences to report consumers.
How to Implement Style Presets in Power BI
Here’s the basic workflow:
Prepare a Theme JSON File
Configure stylePreset for visualStyles
Define Preset Names
Import the theme into the Power BI desktop, and apply to the visualizations
Specify a default style per visual, or let developers to select among available presets
My Journey: Breaking Down the Sample JSON
Let’s walk through the sample theme I created to start experimenting with stylePresets:
1. Basic Theme Setup
This part sets the color palette and KPI colors (good, neutral, bad)
{
"name": "pbi_scheme",
"dataColors": [
"#006400",
"#228B22",
"#32CD32",
"#7CFC00",
"#00FF00",
"#ADFF2F",
"#98FB98",
"#2E8B57"
],
"bad": "#F50707",
"neutral": "#FDFD03",
"good": "#3EF805",
"minimum": "#E9E9E9",
"center": "#F9FD00",
"maximum": "#585858"
}
2. visualStyles Section: Global Settings
Here, I applied a filter pane background and text color.
{
"name": "pbi_scheme",
"dataColors": [
"#006400",
"#228B22",
"#32CD32",
"#7CFC00",
"#00FF00",
"#ADFF2F",
"#98FB98",
"#2E8B57"
],
"bad": "#F50707",
"neutral": "#FDFD03",
"good": "#3EF805",
"minimum": "#E9E9E9",
"center": "#F9FD00",
"maximum": "#585858",
"visualStyles": {
"*": {
"*": {
"filterCard": [
{
"$id": "Applied",
"backgroundColor": {
"solid": {
"color": "#005A9B"
}
},
"foregroundColor": {
"solid": {
"color": "#B3B3B3"
}
},
"transparency": 0
}
]
}
}
}
}3. Card Visual: Defining Style Presets
For card visuals, I introduced two style options:
pbi_stylePreset_01
pbi_stylePreset_02
They become selectable options in the Format pane.
"cardVisual": {
"*": {
"stylePreset": [
{
"name": "pbi_stylePreset_01"
},
{
"name": "pbi_stylePreset_02"
}
]
}4. Style Preset 01 Details
Rounded rectangle with slight curve (10).
Black value font, smaller label font (gray).
Bright yellow fill.
Light gray border.
Hide visual header (cleaner look).
"pbi_stylePreset_01": {
"general": [
{
"keepLayerOrder": true
}
],
"shapeCustomRectangle": [
{
"$id": "default",
"tileShape": "rectangleRounded",
"rectangleRoundedCurve": 10
}
],
"value": [
{
"$id": "default",
"show": true,
"fontColor": {
"solid": {
"color": "#000000"
}
},
"fontSize": 15
}
],
"label": [
{
"$id": "default",
"show": true,
"fontColor": {
"solid": {
"color": "#605E5C"
}
},
"fontSize": 10
}
],
"fillCustom": [
{
"$id": "default",
"show": true,
"fillColor": {
"solid": {
"color": "#FFE512"
}
}
}
],
"outline": [
{
"$id": "default",
"lineColor": {
"solid": {
"color": "#E6E6E6"
}
},
"show": true
}
],
"visualHeader": [
{
"show": false
}
]
}5. Style Preset 02 Details
More pronounced curve (20).
Larger white fonts for value and label.
Deep pink background fill.
Dark purple border.
"pbi_stylePreset_02": {
"general": [
{
"keepLayerOrder": true
}
],
"shapeCustomRectangle": [
{
"$id": "default",
"tileShape": "rectangleRounded",
"rectangleRoundedCurve": 20
}
],
"value": [
{
"$id": "default",
"show": true,
"fontColor": {
"solid": {
"color": "#ffffff"
}
},
"fontSize": 30
}
],
"label": [
{
"$id": "default",
"show": true,
"fontColor": {
"solid": {
"color": "#ffffff"
}
},
"fontSize": 20
}
],
"fillCustom": [
{
"$id": "default",
"show": true,
"fillColor": {
"solid": {
"color": "#C71585"
}
}
}
],
"outline": [
{
"$id": "default",
"lineColor": {
"solid": {
"color": "#8B008B"
}
},
"show": true
}
],
"visualHeader": [
{
"show": false
}
]
}Full json code looks like the below.
{
"name": "pbi_scheme",
"dataColors": [
"#006400",
"#228B22",
"#32CD32",
"#7CFC00",
"#00FF00",
"#ADFF2F",
"#98FB98",
"#2E8B57"
],
"bad": "#F50707",
"neutral": "#FDFD03",
"good": "#3EF805",
"minimum": "#E9E9E9",
"center": "#F9FD00",
"maximum": "#585858",
"visualStyles": {
"*": {
"*": {
"filterCard": [
{
"$id": "Applied",
"backgroundColor": {
"solid": {
"color": "#005A9B"
}
},
"foregroundColor": {
"solid": {
"color": "#B3B3B3"
}
},
"transparency": 0
}
]
}
},
"cardVisual": {
"*": {
"stylePreset": [
{
"name": "pbi_stylePreset_01"
},
{
"name": "pbi_stylePreset_02"
}
]
},
"pbi_stylePreset_01": {
"general": [
{
"keepLayerOrder": true
}
],
"shapeCustomRectangle": [
{
"$id": "default",
"tileShape": "rectangleRounded",
"rectangleRoundedCurve": 10
}
],
"value": [
{
"$id": "default",
"show": true,
"fontColor": {
"solid": {
"color": "#000000"
}
},
"fontSize": 15
}
],
"label": [
{
"$id": "default",
"show": true,
"fontColor": {
"solid": {
"color": "#605E5C"
}
},
"fontSize": 10
}
],
"fillCustom": [
{
"$id": "default",
"show": true,
"fillColor": {
"solid": {
"color": "#FFE512"
}
}
}
],
"outline": [
{
"$id": "default",
"lineColor": {
"solid": {
"color": "#E6E6E6"
}
},
"show": true
}
],
"visualHeader": [
{
"show": false
}
]
},
"pbi_stylePreset_02": {
"general": [
{
"keepLayerOrder": true
}
],
"shapeCustomRectangle": [
{
"$id": "default",
"tileShape": "rectangleRounded",
"rectangleRoundedCurve": 20
}
],
"value": [
{
"$id": "default",
"show": true,
"fontColor": {
"solid": {
"color": "#ffffff"
}
},
"fontSize": 30
}
],
"label": [
{
"$id": "default",
"show": true,
"fontColor": {
"solid": {
"color": "#ffffff"
}
},
"fontSize": 20
}
],
"fillCustom": [
{
"$id": "default",
"show": true,
"fillColor": {
"solid": {
"color": "#C71585"
}
}
}
],
"outline": [
{
"$id": "default",
"lineColor": {
"solid": {
"color": "#8B008B"
}
},
"show": true
}
],
"visualHeader": [
{
"show": false
}
]
}
}
}
}After importing the theme file into Power BI Desktop, I was able to see three different style preset options available for card visuals.
In this sample, I focused on configuring stylePresets for the card visualization. We can find many examples online (by typing in json power bi theme generator) that show how to set default formatting for other visual types and how to structure the necessary JSON code. By following a similar approach to what I demonstrated above, you can create stylePresets for other visuals as well.
Summary
Power BI's new stylePresets capability brings a professional-grade design system mentality to report development.
It makes reports faster to build, easier to maintain, and far more consistent.
I can now create reusable design building blocks, unlocking scalable, branded analytics environments.
With just a simple theme file update, I can empower our teams to produce stunning visuals effortlessly — and focus more energy where it matters: on data storytelling.
I hope this helps have fun setting up the Power BI report theme for your team and organization!
Comentarios