cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

How to change slicer search box text font and color in Power BI?

Hi,

I have slicer's Seach Box enabled and I would like to change the color and font type of slicer's search box? For example, in below image, If i search APPLE in my slicer's search box, it appears light blue. How can I change different color and also dieeren

 

Capture.PNG

1 ACCEPTED SOLUTION
marcoselias
Advocate V
Advocate V

This is how I changed the slicer's search box background to black and the text to white.

 

Please note that I took out the rest of my .json file configurations to provide a succinct answer to this question. You will probably want to tweak the items' background, overall transparency, etc.:

 

 

{
	"name": "slicer search box color setting",

	"visualStyles": {
		"slicer": {
			"*": {
				"*": [
					{
						"fontColor": { "solid": { "color": "#FFFFFF" } },
						"background": { "solid": { "color": "#000000" } }
					}
				]
			}
		}
	}
}

 

 

View solution in original post

7 REPLIES 7
Giorgi1989
Helper II
Helper II

If anybody still stumbles upon this thread and still wonders how to proceed:

 

1. Copy the code above into a notepad. Make color/background adjustments if needed.

2. When done save it as a .json file.  For example, you can name the file 'Filter color.json'.

3. Import into PBI - Go to the 'View' tab > Click on 'Themes' (there is a tiny arrow down) > Click on "Browse for themes" > Select and import your saved .json file. 

 

DONE!

 

Note: This method is of no help if you are trying to change ONLY the font color of 'Search' field. Let's say when you want your items to be in white font color, but only need black color for search field.

Anonymous
Not applicable

HI I found a solution that doesnt require coding, Under view tab, click dropdown arrow for themes, select customize current theme, then under text, change general text colour, this will also affect text colour for like date sliderst too.

marcoselias
Advocate V
Advocate V

This is how I changed the slicer's search box background to black and the text to white.

 

Please note that I took out the rest of my .json file configurations to provide a succinct answer to this question. You will probably want to tweak the items' background, overall transparency, etc.:

 

 

{
	"name": "slicer search box color setting",

	"visualStyles": {
		"slicer": {
			"*": {
				"*": [
					{
						"fontColor": { "solid": { "color": "#FFFFFF" } },
						"background": { "solid": { "color": "#000000" } }
					}
				]
			}
		}
	}
}

 

 

SteveCampbell
Memorable Member
Memorable Member

Select the visual, then in the formatting ribon, go to items the Font color .

 

Annotation 2019-10-10 141413.png

 

Appreciate your Kudos
Connect with me!

Stay up to date on  linkedin-logo.png
Read my blogs on  powerbi.tips_.png



Did I answer your question? Mark my post as a solution! Proud to be a Super User!


Connect with me!
Stay up to date on  
Read my blogs on  



Anonymous
Not applicable

Thank you Steve for the response.

Actually, I am trying to change the font inside the search box of slicer. Not the items of slicers. If you see my image attached, there is search sign (like lens) and blue text.

@Anonymous 

 

You may use Class name smallLabel.

https://powerbi.microsoft.com/en-us/blog/power-bi-desktop-september-2019-feature-summary/#themeJSON

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Anonymous
Not applicable

Thank you  

 

    {
       "name": "AHT Dashboard",
       "dataColors": ["#ff8c00", "#5999D3", "#FBBD01", "#264478", "#95bee3", "#609350"],
       "background":"#212938",
       "foreground": "#7FDBFF",
       "tableAccent": "#77D7FE",
       "textClasses": {
               "smallLabel": {
                   "fontSize": 14,
                   "fontFace": "Segoe UI",
                   "color": "#000000"
                }
       }
        
   }

 

Helpful resources

Announcements
Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

charticulator_carousel_with_text (1).png

Charticulator Design Challenge

Put your data visualization and design skills to the test! This exciting challenge is happening now through May 31st!

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Power BI Release May 2022 768x460.png

Check it out!

Click here to read more about the May 2022 updates!