control the tag colors?

[M S]

The formatting has a TAG option.
Is there any way to control the colors used on a specific test string?

[John Dempster]

Hi,

The colours are based on a hash of the text using the code below. We haven’t thought of a reasonable way to expose these tags for customization as they don’t use a palette. Your best option may be to generate a similar span tag yourself but setting your own colours programmatically.

<span class='bp4-tag .modifier' style='background-color:" + stringToColour(value) + "'>" + value + "</span>"

 private static stringToColour(str: string) {
	 let hash = 0;
	 let i = 0;
	 for (i = 0; i < str.length; i++) {
		 hash = str.charCodeAt(i) + ((hash << 5) - hash);
	 }
	 let colour = '#';
	 for (i = 0; i < 3; i++) {
		 const value = (hash >> (i * 8)) & 0xFF;
		 colour += ('00' + value.toString(16)).substr(-2);
	 }
	 return colour + "AA";
 }
 

[Author]

Posts