With the newest desktop push, our previous .json color themes no longer work and throw many different errors.
I started with a new .pbix file, and started rebuilding the color theme from scratch. However, I cannot figure out how to set the background color for slicers.
I have reviewed the .json documentation, but am getting an error when trying to add anything to this section which is working.
"slicer": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#3A3847"
}
},
"transparency": 0
}
],
"outspace": [
{
"color": {
"solid": {
"color": "#3A3847"
}
}
}
]
}
}
However, slicers look like then when clicked, and users cannot read the items for selection. I am trying to change the color of this background in the dropdown to match the darker color, while also having white text, so that users can see their selections.
Here's the full .json I have so far.
{
"name": "User Dark Theme",
"dataColors": [
"#00FFB0",
"#2155FF",
"#F8B225",
"#F600ED",
"#F600ED",
"#6D63FF",
"#FF707A",
"#E5EFD8",
"#3599B8",
"#DFBFBF",
"#4AC5BB",
"#5F6B6D",
"#FB8281",
"#F4D25A",
"#7F898A",
"#A4DDEE",
"#FDAB89",
"#B687AC",
"#28738A",
"#A78F8F",
"#168980",
"#293537",
"#BB4A4A",
"#B59525",
"#475052",
"#6A9FB0",
"#BD7150",
"#7B4F71",
"#1B4D5C",
"#706060",
"#0F5C55",
"#1C2325"
],
"bad": "#C4314B",
"neutral": "#FDB913",
"good": "#92C353",
"foreground": "#FFFFFF",
"foregroundNeutralSecondary": "#FFFFFF",
"backgroundLight": "#3C395D",
"foregroundNeutralTertiary": "#C2C2C2",
"background": "#11111C",
"backgroundNeutral": "#85858D",
"visualStyles": {
"*": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#000000"
}
},
"transparency": 69
}
],
"border": [
{
"show": true,
"radius": 4
}
],
"outspacePane": [
{
"backgroundColor": {
"solid": {
"color": "#726E8A"
}
}
}
],
"filterCard": [
{
"$id": "Available",
"backgroundColor": {
"solid": {
"color": "#726E8A"
}
},
"foregroundColor": {
"solid": {
"color": "#FFFFFF"
}
},
"transparency": 0
},
{
"$id": "Applied",
"foregroundColor": {
"solid": {
"color": "#FFFFFF"
}
}
}
]
}
},
"page": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#3A3847"
}
},
"transparency": 0
}
],
"outspace": [
{
"color": {
"solid": {
"color": "#3A3847"
}
}
}
]
}
},
"slicer": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#3A3847"
}
},
"transparency": 0
}
],
"outspace": [
{
"color": {
"solid": {
"color": "#3A3847"
}
}
}
]
}
}
},
"textClasses": {
"label": {
"color": "#FFFFFF"
},
"callout": {
"color": "#FFFFFF"
},
"title": {
"color": "#FFFFFF"
},
"header": {
"color": "#FFFFFF"
}
}
}
After some tinkering with .json formats, I was able to resolve via the code below:
"slicer": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#3A3847"
}
},
"transparency": 0
}
],
"outspace": [
{
"color": {
"solid": {
"color": "#3A3847"
}
}
}
],
"items": [
{
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"background": {
"solid": {
"color": "#3A3847"
}
}
}
]
}
}
After some tinkering with .json formats, I was able to resolve via the code below:
"slicer": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#3A3847"
}
},
"transparency": 0
}
],
"outspace": [
{
"color": {
"solid": {
"color": "#3A3847"
}
}
}
],
"items": [
{
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"background": {
"solid": {
"color": "#3A3847"
}
}
}
]
}
}
Helpful resources
New to Fabric Survey
If you have recently started exploring Fabric, we'd love to hear how it's going. Your feedback can help with product improvements.
Power BI DataViz World Championships - June 2026
A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.
FabCon &SQLCon Highlights
Experience the highlights from FabCon & SQLCon, available live and on-demand starting April 14th.
Power BI Community Update - March 2026
Check out the March 2026 Power BI update to learn about new features.
