Check your eligibility for this 50% exam voucher offer and join us for free live learning sessions to get prepared for Exam DP-700.
Get StartedDon't miss out! 2025 Microsoft Fabric Community Conference, March 31 - April 2, Las Vegas, Nevada. Use code MSCUST for a $150 discount. Prices go up February 11th. Register now.
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"
}
I am facing the same issue where the fontColor property for the advancedSlicerVisual in the json theme file seems to be ignored.
I have observed, as you did, that the foreground color class defines the default, hover & press state font colors, and the background color class defines the selected state font color, but there is apparently no way to override them for this Tile Slicer visual specifically.
Has anybody found a way to fix this?
an issue has been raised on GitHub for this: https://github.com/microsoft/powerbi-desktop-samples/issues/93
Hi @DS_Luke ,
Iam facing the same issue as yours.please share the solution if it is resolved. and also the same issue is happening with the border for the buttons .
Hi @Narendra123,
The font issue is annoyingly, still a problem.
However, I was able to change the button's borders, it is in the theme in my original post. It is under the outline property of the advanced slicer visual.
I was working on the same thing. I suspect this is a bug, because it does not work, but I have seen it in other sample JSON theme scripts by other community members.
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.
Hi @v-yangliu-msft,
I'm trying to change the font colour of the selected text in the "Slicer (new)" visual. Power BI does support changing this, I can change the colour to anything I want with an existing Slicer (new) visual. That's not the problem I'm having.
The issue is I can't seem to get a custom theme to change the font colour for the values of a Slicer (new) visual. The theme's JSON schema seems to support this feature with the "fontColor" parameter for values; changing things like font, size, and boldness does work, and can be independently set based on selection state, but not font colour.
Any update on this? I am having the same issue
Unfortunately, this is still an issue.
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Prices go up Feb. 11th.
Check out the January 2025 Power BI update to learn about new features in Reporting, Modeling, and Data Connectivity.
User | Count |
---|---|
143 | |
78 | |
63 | |
52 | |
47 |
User | Count |
---|---|
212 | |
82 | |
61 | |
61 | |
60 |