Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
swjagodzinski
Frequent Visitor

Filter Pane Dropdown Text

I have updated the theme for my filter pane to have a font color of white. It looks great until you try to select something within the filter, such as Name contains, then the text is black.

 

Filter pane:

swjagodzinski_0-1682096007018.png

Dropdown:

swjagodzinski_1-1682096040077.png

 

As you can see, the text is barely visible. Below is the JSON for the filter theme:

 

 

 

"outspacePane": [{
		"backgroundColor": {
			"solid": {
				"color": "#102E50"
			}
		},
		"foregroundColor": {
			"solid": {
				"color": "#FFFFFF"
			}
		},
		"transparency": 0,
		"border": true,
		"borderColor": {
			"solid": {
				"color": "#6f8196"
			}
		},
		"checkboxAndApplyColor": {
			"solid": {
				"color": "#EC7014"
			}
		}
	}
],
"filterCard": [{
		"$id": "Applied",
		"transparency": 0,
		"foregroundColor": {
			"solid": {
				"color": "#FFFFFF"
			}
		},
		"backgroundColor": {
			"solid": {
				"color": "#3f5772"
			}
		},
		"inputBoxColor": {
			"solid": {
				"color": "#3f5772"
			}
		},
		"borderColor": {
			"solid": {
				"color": "#6f8196"
			}
		},
		"border": true
	}, {
		"$id": "Available",
		"transparency": 0,
		"foregroundColor": {
			"solid": {
				"color": "#FFFFFF"
			}
		},
		"backgroundColor": {
			"solid": {
				"color": "#102E50"
			}
		},
		"inputBoxColor": {
			"solid": {
				"color": "#102E50"
			}
		},
		"borderColor": {
			"solid": {
				"color": "#6f8196"
			}
		},
		"border": true
	}
]

 

 

 

 

Is this a known issue for the newest version? I am using Version: 2.116.843.0 64-bit (April 2023).

 

Thank you,

Sara

 

1 ACCEPTED SOLUTION

I ended up using a different color scheme. Thank you!

View solution in original post

5 REPLIES 5
HarishKM
Impactful Individual
Impactful Individual

@swjagodzinski  Hello Sara,
Kindly change your background color from #102E50 to  #E6E6E6. 

Where ever you have used this #102E50 over there you have to use #E6E6E6. 


Thanks
Harish M

tobiasdirksen
Frequent Visitor

Did you figure this out?

I ended up using a different color scheme. Thank you!

swjagodzinski
Frequent Visitor

Unfortunately, this did not help me. I'm not exactly sure what to do with the levels. I have added my entire JSON.

 

{
    "name": "Name",
    "dataColors": ["#1D84B5", "#9ED9EF", "#D2F2FC", "#EC7014", "#F9B180", "#F9D9AF",  "#449773", "#69BB97", "#9BD2BA", "#505151", "#C7CCCD", "#DEE7E7"],
    "foreground": "#FFFFFF",
    "foregroundNeutralSecondary": "#D2D0CE",
    "foregroundNeutralTertiary": "#6f8196",
    "background": "#102E50",
    "backgroundLight": "#274261",
    "backgroundNeutral": "#3f5772",
    "tableAccent": "#2878BD",
    "maximum": "#2878BD",
    "center": "#FCB714",
    "minimum": "#D0E4F5",
    "hyperlink": "#FFFFFF",
    "visitedHyperlink": "#D0E4F5",
    "visualStyles": {
        "*": {
            "*": {
                "background": [{
                        "color": {
                            "solid": {
                                "color": "#102E50"
                            }
                        }
                    }
                ],
                "visualHeader": [{
                        "foreground": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "border": {
                            "solid": {
                                "color": "#102E50"
                            }
                        },
                        "background": {
                            "solid": {
                                "color": "#102E50"
                            }
                        }
                    }
                ],
                "visualTooltip": [{
                        "titleFontColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "valueFontColor": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        },
                        "background": {
                            "solid": {
                                "color": "#102E50"
                            }
                        }
                    }
                ],
		"outspacePane": [{
				"backgroundColor": {
					"solid": {
						"color": "#102E50"
					}
				},
				"foregroundColor": {
					"solid": {
						"color": "#FFFFFF"
					}
				},
				"transparency": 0,
				"border": true,
				"borderColor": {
					"solid": {
						"color": "#6f8196"
					}
				},
				"checkboxAndApplyColor": {
					"solid": {
						"color": "#EC7014"
					}
				}
			}
		],
		"filterCard": [{
				"$id": "Applied",
				"transparency": 0,
				"foregroundColor": {
					"solid": {
						"color": "#FFFFFF"
					}
				},
				"backgroundColor": {
					"solid": {
						"color": "#3f5772"
					}
				},
				"inputBoxColor": {
					"solid": {
						"color": "#3f5772"
					}
				},
				"borderColor": {
					"solid": {
						"color": "#6f8196"
					}
				},
				"border": true
			}, {
				"$id": "Available",
				"transparency": 0,
				"foregroundColor": {
					"solid": {
						"color": "#FFFFFF"
					}
				},
				"backgroundColor": {
					"solid": {
						"color": "#102E50"
					}
				},
				"inputBoxColor": {
					"solid": {
						"color": "#102E50"
					}
				},
				"borderColor": {
					"solid": {
						"color": "#6f8196"
					}
				},
				"border": true
			}
		]
            }
        },
        "slicer": {
            "*": {
                "items": [{
                        "background": {
                            "solid": {
                                "color": "#274261"
                            }
                        },
						"backgroundColor": {
							"solid": {
								"color": "#274261"
							}
							}
                    }
                ],
                "numericInputStyle": [{
                        "background": {
                            "solid": {
                                "color": "#274261"
                            }
                        }
                    }
                ],
				"date": [
					{
					  "background": {
						"solid": {
						  "color": "#274261"
						}
					  }
					}
				],
                "selected": [{
                        "checkbox": {
                            "color": "#EC7014"
                        }
                    }
                ],
				"header": [{
						"background": {
							"solid": {
								"color": "#274261"
							}
						}
					}
				],														
				"background": [{
						"color": {
							"solid": {
								"color": "#274261"
							}
						}
					}
				]
            }
        },
        "keyDriversVisual": {
            "*": {
                "keyInfluencersVisual": [{
                        "canvasColor": {
                            "solid": {
                                "color": "#274261"
                            }
                        }
                    }
                ]
            }
        },
        "card": {
            "*": {
                "background": [{
                        "color": {
                            "solid": {
                                "color": "#274261"
                            }
                        }
                    }
                ]
            }
        },
        "multiRowCard": {
            "*": {
                "background": [{
                        "color": {
                            "solid": {
                                "color": "#274261"
                            }
                        }
                    }
                ]
            }
        },
        "page": {
            "*": {
                "outspace": [{
                        "color": {
                            "solid": {
                                "color": "#102E50"
                            }
                        }
                    }
                ],
                "background": [{
                        "transparency": 0
                    }
                ]
            }
        }
    },
    "textClasses": {
        "callout": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "title": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "header": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "label": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "smallLightLabel": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "lightLabel": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "largeLightLabel": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "boldLabel": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "smallLabel": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "largeLabel": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "semiboldLabel": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        },
        "largeTitle": {
            "fontFace": "Object Sans",
            "color": "#FFFFFF"
        }
    }
}

 

 

Is it possible to change the black font color in this dropdown to white?

swjagodzinski_0-1685561853603.png

 

amitchandak
Super User
Super User

@swjagodzinski , Please check the meaning of level here, if that can help in setup

Use report themes in Power BI Desktop - Power BI | Microsoft Learn

 

amitchandak_0-1682217436484.png

 

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors