Forum Discussion

tobny76's avatar
tobny76
Icon for Helper III rankHelper III
10 months ago
Solved

Configure list slicer in theme

Hi!
I hope I have an easy question.
I don't get the theme file to work with the ListSlicer.
Can anyone share an example of how I for example modify the colors for it so I know how to start.

 

  • Hi tobny76 ,

    Thanks for reaching out to Microsoft Fabric Community and thanks for sharing the update.

    From what I’ve seen in similar discussions such as this thread: Solved: Re: Unable to change new slicer font colour with c... - Microsoft Fabric Community, the $id: "selection:selected" property works for the new slicer visual (advancedSlicerVisual) when changing the font or background color for selected items.

    However, this behavior doesn’t seem to apply in the same way to the listSlicer.

    For the classic list slicer, only a few formatting options such as background color and basic text settings appear to take effect through JSON theming, while selection-specific colors may not currently respond.

    You can refer to the official documentation on Power BI JSON themes
    for the list of supported visual style properties. It might also be worth testing with future Power BI Desktop versions in case expanded support for listSlicer theming becomes available.

     

    Hope this helps. Please reach out for further assistance.

    Thank you.

18 Replies

  • Hi tobny76 

     

    You can customize your List Slicer colors through a Power BI JSON theme file.

    Here’s a quick example:

    {
      "visualStyles": {
        "slicer": {
          "*": {
            "selection": [
              { "fontColor": { "solid": { "color": "#FFFFFF" } } },
              { "background": { "solid": { "color": "#0078D4" } } }
            ],
            "unselected": [
              { "fontColor": { "solid": { "color": "#333333" } } },
              { "background": { "solid": { "color": "#F2F2F2" } } }
            ]
          }
        }
      }
    }

    Could you please try below steps:

    1. Save this as a .json file.

    2. In Power BI >> View >>Themes >> Browse for themes, import the file.

    This will apply your custom background and text colors to the list slicer automatically.

     

    • tobny76's avatar
      tobny76
      Icon for Helper III rankHelper III

      I have tried to use almost the same as you suggested,
      I tried your code as well but I don't get it to work with the "List Slicer".
      For the new buttonslicer I get it to work with "advancedSlicerVisual".


       

      • rohit1991's avatar
        rohit1991
        Icon for Super User rankSuper User

        Hi tobny76 

         

        You’re right , the JSON theme code works for the classic list or dropdown slicer, but not for the new button-style slicer (also called advancedSlicerVisual).

        At present, the advanced slicer doesn’t fully support JSON theming, only a few properties (like font or background) may apply, while most style settings must be done manually.

        Could you please try below steps:

        1. For classic List Slicer:

          • The JSON theme example shared earlier will work.

          • Save it as a .json file >> Power BI View >> Themes >> Browse for themes >> import it.

        2. For new Button Slicer (advancedSlicerVisual):

          • Format it manually under Format pane >> Buttons >> Style (set background, border, and font).

          • Then save the report as a template (.pbit) to reuse the same style later.

    • tobny76's avatar
      tobny76
      Icon for Helper III rankHelper III

      Now I have at least solved the background, I changed "slicer" to "listSlicer".
      But I don't get the fontcolor and background for selection/unselected to work.

      {
        "name": "Custom List Slicer Theme",
        "visualStyles": {
          "listSlicer": {
            "*": {
              "background": [{
                  "show": true,
                  "color": {
                    "solid": {
                      "color": "#00FF00"
                    }
                  },
                  "transparency": 0
                }
              ]        
            }
          } 
        }
      }

       

       

      • v-veshwara-msft's avatar
        v-veshwara-msft
        Icon for Community Support rankCommunity Support

        Hi tobny76 ,

        Thanks for reaching out to Microsoft Fabric Community and thanks for sharing the update.

        From what I’ve seen in similar discussions such as this thread: Solved: Re: Unable to change new slicer font colour with c... - Microsoft Fabric Community, the $id: "selection:selected" property works for the new slicer visual (advancedSlicerVisual) when changing the font or background color for selected items.

        However, this behavior doesn’t seem to apply in the same way to the listSlicer.

        For the classic list slicer, only a few formatting options such as background color and basic text settings appear to take effect through JSON theming, while selection-specific colors may not currently respond.

        You can refer to the official documentation on Power BI JSON themes
        for the list of supported visual style properties. It might also be worth testing with future Power BI Desktop versions in case expanded support for listSlicer theming becomes available.

         

        Hope this helps. Please reach out for further assistance.

        Thank you.

  • You can change the button color and background color of the slicer.

     

     

     

     

    For your reference.

    • tobny76's avatar
      tobny76
      Icon for Helper III rankHelper III

      I would like to do handle my settings for the "List Slicer" in the theme file.

    • tobny76's avatar
      tobny76
      Icon for Helper III rankHelper III

      Yes I have had a look on some of the Theme generators.

  • Hi tobny76 ,

    Just checking in to see if you query is resolved and if any responses were helpful.
    Otherwise, feel free to reach out for further assistance.

    Thank you.

    • tobny76's avatar
      tobny76
      Icon for Helper III rankHelper III

      Hi,
      No I have not found the solution for changing the ListSlicer yet.
      If I for example try to modify the settings for the title color on both
      "Slicer" and "advancedSlicerVisual" it will not affect the ListSlicer.



       

      • tobny76's avatar
        tobny76
        Icon for Helper III rankHelper III

        Title is working to change with "listSlicer".