background color of the Visual Slicer Value

[Arsash_Bizaval]

Hi

In the JSON file, how do I change both the Visual Slicer background and the background color of the Visual Slicer Value?

Assuming I would like the first blue and the second to choose red.

[divyed]

Hello @Arsash_Bizaval ,

Please use below code :

{
"visualStyles": {
"*": {
"*": {
"background": [
{
"color": "#0000FF", // Blue for slicer background
"value": "Background"
}
],
"slicer": [
{
"color": "#FF0000", // Red for slicer value background
"value": "Slicer Values"
}
]
}
}
}
}

How to Apply :

1. Copy this JSON and modify it as per your need.

2. Use this in the Power BI Theme JSON file.

3. Load the updated theme in Power BI to apply the color changes to your slicer visual.

I hope this helps.

Did I answer your question ? Mark this as solution if this helps so that other members can find this quickly.

Regards,

Neeraj Kumar

[DataNinja777]

Hi @Arsash_Bizaval ,

To change both the Visual Slicer background and the background color of the Visual Slicer Values in Power BI using a JSON theme, you need to define these properties under the visualStyles section in your JSON file.

For the slicer background, set the background color property at the slicer level. To ensure the slicer background appears blue, use "#0000FF". For the slicer values background, modify the values property and set its background to a solid fill with the color red ("#FF0000").

{
    "visualStyles": {
        "slicer": {
            "*": {
                "background": [
                    {
                        "color": "#0000FF"
                    }
                ],
                "values": [
                    {
                        "background": {
                            "solid": {
                                "color": "#FF0000"
                            }
                        }
                    }
                ]
            }
        }
    }
}

To apply this theme in Power BI, save the JSON content as a .json file, then go to the View tab in Power BI, click Themes, and select Browse for Themes to upload your file. This will update the slicer visuals accordingly, applying a blue background to the entire slicer and a red background to the slicer values.

Best regards,

[Arsash_Bizaval]

I applied these codes but I got an error while making changes in Power BI. Could you please check my file?
Thanks

myTheme 

[Anonymous · Accepted solution]

Thanks for the reply from divyed  and DataNinja777 , please allow me to provide another insight:

Hi, @Arsash_Bizaval 
Thanks for reaching out to the Microsoft fabric community forum.

Regarding the issue you raised, my solution is as follows:

I suggest you replace the slicer section of your JSON file with the following:

"slicer": {
    "*": {
        "items": [
            {
                "fontColor": { "solid": { "color": "#FFFFFF" } },
                "background": { "solid": { "color": "#E4080A" } }
            }
        ],
        "background": [
            {
                "transparency": 100
            }
        ]
    }
}

Below are the results after I modified your JSON file:

You can refer to the following link for official guidance:

PowerBI-ThemeTemplates/Slicer.json at master · MattRudy/PowerBI-ThemeTemplates · GitHub

You may need to note that in my settings, I changed the font colour to white to contrast with the red font background. Additionally, if the slicer is in slider mode, the red font background may be in the JSON. 

Of course, if you have any new discoveries or questions, please feel free to get in touch with us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.