Change color of search-widget icon

888
2
12-30-2022 06:13 AM
AndreasEugster
Occasional Contributor

Is there a way to change the search-widget search-icon-color and background color?

By default the search-widget takes the color from the design-theme. Changing the design will update the background color of the widget. I have a usecase where the search-icon-background should be white and the magnifier icon black.

Challenge 1: Only that specific search-icon background color, not every other widget in the experience which uses the "primary-theme-color"...

Challenge 2: the theme changes only the background of the search-widget-icon. The color of the magnifier is not affectet and stays always white, making it disappear if the background-color is white too...

Any ideas?

2022-12-30 14_49_26-ArcGIS Experience Builder.png

- Andi

2 Replies
DaveFullerton
Occasional Contributor III

Please support the idea about this issue that I posted here: https://community.esri.com/t5/arcgis-experience-builder-ideas/search-widget-add-style-settings-for-t...

Adding a comment about why this is important for your organization and how many people it effects would further help push this along.

0 Kudos
AndreasEugster
Occasional Contributor

I'll support the idea asap.

In the meantime, the workaround: After downloading the app, manipulate the widget.js file by adding the color and background-color to the .search-button.

...\cdn\0\widgets\common\search\dist\runtime\widget.js

 

.search-button {
	width: ${n.polished.rem(32)};
	border-radius: 0;
	color: #4678B4;
	background-color: white;
    }