Hello, I'm trying to modify the coloring of cards on hover and on select using the PowerBI theme. The desktop counterpart for this would be
, but I can't seem to find an equivalent with the theme. I've tried using the background attribute, but it doesn't change the background of the cards, only the background of the visualization and the voice customFill doesn't have an id option.
What should I add to the theme?
Hi @GrossoKubo
This should be the code for all the status of the slicer:
"value": [
{
"$id": "default",
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"fontSize": 8,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"horizontalAlignment": "left",
"textWrap": true,
"labelDisplayUnits": 0,
"labelPrecision": 0,
"customFormatString": "",
"showBlankAs": "--",
"transparency": 0
},
{
"$id": "hover",
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"fontSize": 8,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"horizontalAlignment": "left",
"textWrap": true,
"labelDisplayUnits": 0,
"labelPrecision": 0,
"customFormatString": "",
"showBlankAs": "--",
"transparency": 0
},
{
"$id": "selected",
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"fontSize": 8,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"horizontalAlignment": "left",
"textWrap": true,
"labelDisplayUnits": 0,
"labelPrecision": 0,
"customFormatString": "",
"showBlankAs": "--",
"transparency": 0
},
{
"$id": "disabled",
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"fontSize": 8,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"horizontalAlignment": "left",
"textWrap": true,
"labelDisplayUnits": 0,
"labelPrecision": 0,
"customFormatString": "",
"showBlankAs": "--",
"transparency": 0
},
{
"show": false
}
]
don't mind the values is just a test
Regards
Miguel Félix
Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
Check out my blog: Power BI em PortuguêsHi @GrossoKubo ,
Sorry I misslead you with the previous code there is an additional property for the background of the cards:
"fillCustom": [
{
"$id": "default",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#FFFFFF"
}
},
"transparency": 0,
"imageTransparency": 0
},
{
"$id": "hover",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#BBAEED"
}
},
"transparency": 16,
"imageTransparency": 0
},
{
"$id": "selected",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#FFFFFF"
}
},
"transparency": 0,
"imageTransparency": 0
},
{
"$id": "disabled",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#FFFFFF"
}
},
"transparency": 0,
"imageTransparency": 0
},
{
"show": true
}
]Regards
Miguel Félix
Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
Check out my blog: Power BI em PortuguêsHi @GrossoKubo
This should be the code for all the status of the slicer:
"value": [
{
"$id": "default",
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"fontSize": 8,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"horizontalAlignment": "left",
"textWrap": true,
"labelDisplayUnits": 0,
"labelPrecision": 0,
"customFormatString": "",
"showBlankAs": "--",
"transparency": 0
},
{
"$id": "hover",
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"fontSize": 8,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"horizontalAlignment": "left",
"textWrap": true,
"labelDisplayUnits": 0,
"labelPrecision": 0,
"customFormatString": "",
"showBlankAs": "--",
"transparency": 0
},
{
"$id": "selected",
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"fontSize": 8,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"horizontalAlignment": "left",
"textWrap": true,
"labelDisplayUnits": 0,
"labelPrecision": 0,
"customFormatString": "",
"showBlankAs": "--",
"transparency": 0
},
{
"$id": "disabled",
"fontColor": {
"solid": {
"color": "#FFFFFF"
}
},
"fontSize": 8,
"fontFamily": "Segoe UI",
"bold": false,
"italic": false,
"underline": false,
"horizontalAlignment": "left",
"textWrap": true,
"labelDisplayUnits": 0,
"labelPrecision": 0,
"customFormatString": "",
"showBlankAs": "--",
"transparency": 0
},
{
"show": false
}
]
don't mind the values is just a test
Regards
Miguel Félix
Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
Check out my blog: Power BI em PortuguêsHi @GrossoKubo ,
Sorry I misslead you with the previous code there is an additional property for the background of the cards:
"fillCustom": [
{
"$id": "default",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#FFFFFF"
}
},
"transparency": 0,
"imageTransparency": 0
},
{
"$id": "hover",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#BBAEED"
}
},
"transparency": 16,
"imageTransparency": 0
},
{
"$id": "selected",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#FFFFFF"
}
},
"transparency": 0,
"imageTransparency": 0
},
{
"$id": "disabled",
"image": {
"name": "",
"url": "",
"scaling": "Normal"
},
"fillColor": {
"solid": {
"color": "#FFFFFF"
}
},
"transparency": 0,
"imageTransparency": 0
},
{
"show": true
}
]Regards
Miguel Félix
Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
Check out my blog: Power BI em Português
Helpful resources
Join our Fabric User Panel
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Power BI Monthly Update - June 2025
Check out the June 2025 Power BI update to learn about new features.
Fabric Community Update - June 2025
Find out what's new and trending in the Fabric community.
