Theme issues, especially with slicers

[esmb0303]

Hello,

I'm currently working on building a theme for my company's PowerBI reports. All of them are in dark mode, and I'm basically just converting it to lightmode. 

While writing a theme.json file, I've hit a wall. Every element in the report can be changed, except for the slicers. They somehow remain black. Using a wildcard also doesn't work.

The Report itself is looking for some kind of "default" theme but I cannot configure it with the theme.

Only a super minimal theme works, the complex one I made doesn't.

What I've tried:

- Downloaded the json schema and validated my file

- wildcards in all places, doesn't apply sadly

- Searched for answers online

Slicer part:

"visualStyles": {
...
"slicer": {
      "*": {
        "general": [
          {
            "responsive": true,
            "keepLayerOrder": true,
            "outlineColor": { "solid": { "color": "#FFFFFF" } },
            "outlineWeight": 1,
            "orientation": 0
          }
        ],
        "padding": [{ "bottom": 5, "left": 5, "right": 5, "top": 10 }],
        "pendingChangesIcon": [
          {
            "color": { "solid": { "color": "#FFFFFF" } },
            "position": "left",
            "show": true,
            "showTooltip": false,
            "size": 11,
            "transparency": 0
          }
        ],
        "spacing": [
          {
            "customizeSpacing": true,
            "spaceBelowSubTitle": 5,
            "spaceBelowTitle": 5,
            "spaceBelowTitleArea": 5,
            "verticalSpacing": 5
          }
        ],
        "selection": [
          {
            "selectAllCheckboxEnabled": true,
            "singleSelect": false,
            "strictSingleSelect": false
          }
        ],
        "header": [
          {
            "show": false,
            "fontColor": { "solid": { "color": "#000000" } },
            "background": { "solid": { "color": "#F8F8F8" } },
            "showRestatement": true,
            "outline": "None",
            "outlineStyle": 15,
            "textSize": 12,
            "fontFamily": "MB Corpo S Text Office Light",
            "bold": false,
            "italic": false,
            "underline": false
          }
        ],
        "divider": [
          {
            "color": { "solid": { "color": "#000000" } },
            "ignorePadding": false,
            "show": false,
            "style": "solid",
            "width": 2
          }
        ],
        "items": [
          {
            "accessibilityContrastProperties": true,
            "expandCollapseToggleType": 2,
            "fontColor": { "solid": { "color": "#000000" } },
            "background": { "solid": { "color": "#F8F8F8" } },
            "padding": 2,
            "outline": "None",
            "outlinestyle": 0,
            "steppedLayoutIndentation": 12,
            "textSize": 11,
            "fontFamily": "MB Corpo S Text Office Light",
            "bold": false,
            "italic": false,
            "underline": false
          }
        ],
        "date": [
          {
            "background": { "solid": { "color": "#F8F8F8" } },
            "bold": false,
            "fontColor": { "solid": { "color": "#000000" } },
            "fontFamily": "MB Corpo S Text Office Light",
            "hideDatePickerButton": false,
            "italic": false,
            "textSize": 11,
            "underline": false
          }
        ],
        "numericInputStyle": [
          {
            "background": { "solid": { "color": "#F8F8F8" } },
            "bold": false,
            "fontColor": { "solid": { "color": "#000000" } },
            "fontFamily": "MB Corpo S Text Office Light",
            "italic": false,
            "textSize": 11,
            "underline": false
          }
        ],
        "searchBox": [
          {
            "background": { "solid": { "color": "#F8F8F8" } },
            "outline": "None",
            "outlineStyle": 1,
            "borderColor": { "solid": { "color": "#000000" } }
          }
        ],
        "slider": [
          {
            "handleBorderColor": { "solid": { "color": "#000000" } },
            "color": { "solid": { "color": "#0078D6" } },
            "secondaryLineColor": { "solid": { "color": "#FFFFFF" } },
            "handleFillColor": { "solid": { "color": "#FFFFFF" } },
            "show": true
          }
        ],
        "title": [
          {
            "show": true,
            "titleWrap": true,
            "fontColor": { "solid": { "color": "#000000" } },
            "background": { "solid": { "color": "#DBDBDB" } },
            "alignment": "left",
            "fontSize": 12,
            "fontFamily": "MB Corpo S Text Office Light",
            "bold": false,
            "italic": false,
            "underline": false
          }
        ],
        "subTitle": [
          {
            "alignment": "left",
            "bold": false,
            "fontColor": { "solid": { "color": "#000000" } },
            "fontFamily": "MB Corpo S Text Office Light",
            "italic": false,
            "show": false,
            "fontSize": 12,
            "underline": false,
            "titleWrap": true
          }
        ],
        "background": [
          {
            "show": true,
            "color": { "solid": { "color": "#DBDBDB" } },
            "transparency": 0
          }
        ],
        "lockAspect": [{ "show": true }],
        "border": [
          {
            "color": { "solid": { "color": "#696969" } },
            "show": false,
            "radius": 2
          }
        ],
        "dropShadow": [
          {
            "show": false,
            "color": { "solid": { "color": "#696969" } },
            "position": "Outer",
            "preset": "Bottom",
            "shadowSpread": 2,
            "shadowBlur": 0,
            "angle": 0,
            "shadowDistance": 0,
            "transparency": 0
          }
        ],
        "visualTooltip": [
          {
            "show": true,
            "type": "Canvas",
            "titleFontColor": { "solid": { "color": "#FFFFFF" } },
            "valueFontColor": { "solid": { "color": "#FFFFFF" } },
            "actionFontColor": { "solid": { "color": "#FFFFFF" } },
            "fontSize": 9,
            "fontFamily": "MB Corpo S Text Office Light",
            "bold": false,
            "italic": false,
            "underline": false,
            "background": { "solid": { "color": "#000000" } },
            "transparency": 10,
            "page": "Auto"
          }
        ],
        "visualHeader": [
          {
            "show": true,
            "background": { "solid": { "color": "#F8F8F8" } },
            "border": { "solid": { "color": "#FFFFFF" } },
            "transparency": 0,
            "foreground": { "solid": { "color": "#000000" } },
            "showVisualInformationButton": true,
            "showVisualWarningButton": true,
            "showVisualErrorButton": true,
            "showDrillRoleSelector": true,
            "showDrillUpButton": true,
            "showDrillToggleButton": true,
            "showDrillDownLevelButton": true,
            "showDrillDownExpandButton": true,
            "showPinButton": true,
            "showFocusModeButton": true,
            "showFilterRestatementButton": true,
            "showSeeDataLayoutToggleButton": true,
            "showOptionsMenu": true,
            "showTooltipButton": true
          }
        ],
        "visualHeaderTooltip": [
          {
            "titleFontColor": { "solid": { "color": "#000000" } },
            "fontSize": 9,
            "fontFamily": "MB Corpo S Text Office Light",
            "background": { "solid": { "color": "#FFFFFF" } },
            "transparency": 0
          }
        ]
      }
    },
...

[esmb0303]

@audreygerred thanks! That site looks great! I'll definately give it a try 🙂

[v-sgandrathi]

Hi @esmb0303,

I wanted to check in your situation regarding the issue. Have you resolved it? Should you have any further questions, feel free to reach out.
Thank you for being a part of the Microsoft Fabric Community Forum!

[esmb0303]

Hey @v-sgandrathi, thank you for your help! I was on vacation and as this is a work account, it was too. Sorry for the late response.

I've tried adding your solution to the slicer/* section but am now unable to import it into pbi.

"slicer": {
      "*": {
        "stylePreset": "Default",
        "general": [
          {
            "responsive": true,
            "keepLayerOrder": true,
            "outlineColor": { "solid": { "color": "#FFFFFF" } },
            "outlineWeight": 1,
            "orientation": 0
          }
        ],
        "padding": [{ "bottom": 5, "left": 5, "right": 5, "top": 10 }],
        "pendingChangesIcon": [
          {
            "color": { "solid": { "color": "#FFFFFF" } },
            "position": "left",
            "show": true,
            "showTooltip": false,
            "size": 11,
            "transparency": 0
          }
        ],
        "filterPane": {
          "background": { "color": "#FFFFFF" },
          "foreground": { "color": "#000000" }
        },
        "filterCard": {
          "background": { "color": "#F8F8F8" },
          "foreground": { "color": "#000000" }
        },
        "spacing": [

I cannot find another point to insert it. My schema validator also says, that it should be an array. Adding it into the general array, results in the same error:

Not sure if I misunderstood your instructions though, thank you for your help!

[audreygerred]

Hi! I am a huge fan of using the theme generator by Power BI Tips: PowerBI.tips

[v-sgandrathi]

Hi @esmb0303,

Thank you for providing the detailed context and your current theme JSON.

The error message “Style preset not found” typically occurs when the selected visual, such as a slicer, refers to a style preset (like “Default”) that isn’t included in your custom theme file.

To resolve this, define the "Default" style preset under the "stylePresets" section for slicers and make sure your visual is referencing it using "stylePreset": "Default" within the visualStyles block.

Here’s a straightforward solution:

1. Add 
   "stylePreset": "Default",
   inside your visualStyles.slicer["*"].

Then, add a new section for the style preset outside of visualStyles.

"stylePresets": {
"slicer": {
"Default": {
"items": {
"background": { "solid": { "color": "#F8F8F8" } },
"fontColor": { "solid": { "color": "#000000" } },
"textSize": 11
},
"background": {
"show": true,
"color": { "solid": { "color": "#DBDBDB" } },
"transparency": 0
}
}
}
}

This ensures Power BI can find and apply the expected style when rendering slicers.

Thank you.

[v-sgandrathi]

Hi @esmb0303,

Just wanted to check regarding your question. We haven’t heard back and want to ensure you're not stuck. If you need anything else or have updates to share, we’re here to help!

Thank you.

[v-sgandrathi]

Hi @esmb0303,

Hope you're doing well! Just following up to see if the response we shared was helpful. If you have any further questions or need clarification, we’re here to assist.

Thank you.

[v-sgandrathi]

Hi @esmb0303,

Just a quick check-in! Has your issue been resolved with the information we shared? We’d be delighted to help further if needed.

Thank you.