I was making a custom dark theme to be used in my reports, and everything is working fine except for the appearance of slicers. I've switched to the new slicer visual because I can't change the colour of the checkboxes (the black checkbox on a dark background makes it hard to tell what is selected) on the old slicer. The new slicer (named "Slicer (new)" in Power BI) has allowed me to create something I think looks good (pictured below).
I want my theme to have slicers look like this by default, however, edits to the font colour of the selected/unselected slicer items in the JSON file don't seem to be doing anything. I am able to change other properties related to the slicer's item's displayed values such as font, size, bold/italics, alignment, transparency, etc. But no matter what I try, I just can't seem to change the font colour of the slicer items. I can change the colour of the slicer's heading, but not the slicer's items. Below is a picture demonstrating some of these changes on a "fresh" Slicer (new) visual.
Some observations I've made while troubleshooting this is that the font colour seems to be using the "foreground" and "background" colours for the unselected and selected items. I tried removing these two elements from the JSON file to see what happened, but found that they instead used some other default value instead of the one I set for them.
I've also found that "fillCustom" accepts the "$id" property to change the background colour based on whether the item is selected or not, despite "$id" not being present under "fillCustom" in the schema.
Below I've included the part of the JSON I expect to be changing the font colour, and the full theme file below it. Thanks.
{
"visualStyles": {
"advancedSlicerVisual": {
"*": {
"value": [
{
"$id": "default",
"fontSize": 14,
"fontFamily": "Arial",
"fontColor": {
"solid": {
"color": "#439B9D"
}
},
"show": true,
"transparency": 0,
"horizontalAlignment": "center",
"bold": true
},
{
"$id": "selected",
"fontColor": {
"solid": {
"color": "#00FFFF"
}
},
"show": true,
"transparency": 0,
"horizontalAlignment": "right",
"italic": true
}
]
}
}
}
}
And here is the full JSON.
{
"name": "Custom Dark 2",
"$schema": "reportThemeSchema-2.129.json",
"visualStyles": {
"*": {
"*": {
"border": [
{
"color": {
"solid": {
"color": "#6190DE"
}
},
"show": true
}
],
"visualTooltip": [
{
"themedTitleFontColor": {
"solid": {
"color": "#EBE9E6"
}
},
"themedValueFontColor": {
"solid": {
"color": "#EBE9E6"
}
},
"themedBackground": {
"solid": {
"color": "#252423"
}
},
"actionFontColor": {
"solid": {
"color": "#EBE9E6"
}
}
}
],
"visualHeaderTooltip": [
{
"themedTitleFontColor": {
"solid": {
"color": "#EBE9E6"
}
},
"themedBackground": {
"solid": {
"color": "#252423"
}
}
}
],
"background": [
{
"color": {
"solid": {
"color": "#262626"
}
}
}
],
"visualHeader": [
{
"background": {
"solid": {
"color": "#262626"
}
},
"foreground": {
"solid": {
"color": "#EBE9E6"
}
}
}
],
"outspacePane": [
{
"backgroundColor": {
"solid": {
"color": "#252423"
}
}
}
]
}
},
"page": {
"*": {
"outspace": [
{
"color": {
"solid": {
"color": "#000000"
}
}
}
],
"background": [
{
"color": {
"solid": {
"color": "#171717"
}
},
"transparency": 100
}
]
}
},
"advancedSlicerVisual": {
"*": {
"*": [{
"fontColor": {"solid": {"color": "#FF0000"}},
"foreground": {"solid": {"color": "#FF0000"}}
}],
"layout":[
{
"orientation": 1,
"maxTiles": 8,
"paddingSelection": "Custom",
"topMargin": 5,
"style": "Cards",
"backgroundFillColor":{
"solid": {
"color": "#FF0000"
}
},
"backgroundTransparency": 40
}
],
"selection": [
{
"singleSelect": false
}
],
"outline": [
{
"$id": "default",
"lineColor": {
"solid": {
"color": "#909198"
}
}
},
{
"$id": "selected",
"lineColor": {
"solid": {
"color": "#439B9D"
}
}
}
],
"label": [
{
"$id": "default",
"fontColor": {
"solid": {
"color": "#00DDDD"
}
},
"transparency": 40,
"show": true
},
{
"$id": "selected",
"fontColor": {
"solid": {
"color": "#123456"
}
},
"show": false
}
],
"value": [
{
"$id": "default",
"fontSize": 14,
"fontFamily": "Arial",
"fontColor": {
"solid": {
"color": "#439B9D"
}
},
"show": true,
"transparency": 0,
"horizontalAlignment": "center",
"bold": true
},
{
"$id": "selected",
"fontColor": {
"solid": {
"color": "#00FFFF"
}
},
"show": true,
"transparency": 0,
"horizontalAlignment": "right",
"italic": true
}
],
"padding": [
{
"$id": "default",
"paddingSelection": "Custom",
"topMargin": 2
},
{
"$id": "selected",
"paddingSelection": "Custom",
"topMargin": 2
}
],
"background": [
{
"$id": "default",
"color": {
"solid": {
"color": "#5B5B5B"
}
},
"transparency": 30
},
{
"$id": "selected",
"color": {
"solid": {
"color": "#333333"
}
}
},
{
"color": {
"solid": {
"color": "#262626"
}
}
}
],
"image": [{
"$id": "default",
"transparency": 30
}],
"fillCustom": [
{
"$id": "selected",
"fillColor": {"solid": {"color":"#333333"}}
},
{
"$id": "default",
"fillColor": {"solid": {"color":"#5B5B5B"}}
}
]
}
},
"lineChart": {
"*": {
"*":[{
"gridlineShow": true,
"gridlineColor": {
"solid": {
"color": "#999999"
}
},
"gridlineThickness": 1,
"gridlineStyle": "dotted"
}]
}
}
},
"textClasses": {
"label": {
"color": "#EBE9E6"
},
"callout": {
"color": "#F6F6F6"
},
"title": {
"color": "#F6F6F6"
},
"header": {
"color": "#F6F6F6"
}
},
"foreground": "#F3F2F1",
"background": "#252423",
"backgroundLight": "#817D79",
"foregroundNeutralSecondary": "#ECE8E4",
"foregroundNeutralTertiary": "#EBE9E6",
"backgroundNeutral": "#37393B"
}
Hi @DS_Luke ,
Are you referring to changing the font and background color when the slicer is selected?
As far as I know, Power BI doesn't support that feature at the moment with the default slicer.
You can submit an idea for it at Home (microsoft.com) and wait for users with the same needs as you to vote for you to help make it happen as soon as possible.
The same idea has already been submitted here by a user with the same needs:
You can also consider using the custom visual object Chiclet Slicer, which allows you to set the background color for the selected items (but not change the text color), while still allowing you to modify the entire text color.
Solved: How I change in the slicer the color of selected b... - Microsoft Fabric Community
Chiclet slicer: different colors for font; selecte... - Microsoft Fabric Community
This is the related document, you can view this content:
Solved: How to change slicer search box text font and colo... - Microsoft Fabric Community
Solved: Horizontal Slicer: how to change the colour of sel... - Microsoft Fabric Community
Solved: Changing checkbox fill color in a slicer - Microsoft Fabric Community
Best Regards,
Liu Yang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Helpful resources
Europe’s largest Microsoft Fabric Community Conference
Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.
Power BI Monthly Update - June 2024
Check out the June 2024 Power BI update to learn about new features.
Fabric Community Update - June 2024
Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.
