Which template to override to change the markup of a reference field to taxonomy and how to get term fields values in that template?

Question

I have a node that has a reference field to the taxonomy vocabulary. In the Manage display of the reference field, the Rendered entity format is selected, and the view mode (field_image field display) I need to override the template and make something like this:

<div style="background-color: {{content.field_hex.0.value}};"> 
 {{content.field_image}}  
</div>

The variable may not be content but something else. It depends on the template.

If a taxonomy term has an added image, we display it; if not, we display the background-color where we pass the field_hex field of the term, which is of type Text (plain).

Which template needs to be overridden to get the required markup? field.html.twig? Or taxonomy-term.html.twig? And how to get the value of the field_image and field_hex fields in the template?

Inside the overridden field.html.twig {{dump(item.content)}} shows:

array:6 [
 "#taxonomy_term" => Drupal\taxonomy\Entity\Term {
#18802
}
 "#view_mode" => "product_colors"
 "#cache" => array:5 [
]
 "#theme" => "taxonomy_term"
 "#weight" => 0
 "#pre_render" => array:1 []
]

Inside the overridden taxonomy-term.html.twig {{ dump(term) }} shows:

Drupal\taxonomy\Entity\Term {
 #entityTypeId: "taxonomy_term"
 // other keys
 #values: array:23 []
 #fields: array:3 []
 // other keys
}

Screenshot of the current markup from the page where the nodes with the reference field are displayed:

Answer 1

Can override field template with this naming convention:

 field--node--field-available-colors--product.html.twig

Note: It 'll override the field for : specific field(available colors) & content type(product)

Get the value of the field_image and field_hex fields: in field template

{% set taxonomy_content = item.content['#taxonomy_term'] %}
Get Color field value: {{ taxonomy_content.field_hex_color.value }}

Here field_hex_color denotes the machine name of color field in taxonomy

{% set taxonomy_content = item.content['#taxonomy_term'] %}
{% if taxonomy_content.field_img.entity %}
  {% set file_entity = taxonomy_content.field_img.entity %}
  {% set file_uri = file_entity.uri.value %}
  {% set file_path = file_uri|file_url %}
Get the image url
  <img src='{{ file_path }}'>
{% endif %}

Here field_img denotes the machine name of color field in taxonomy

Answer 2

Your code example

<div style="background-color: {{content.field_hex.0.value}};"> 
 {{content.field_image}}  
</div>

works with a small change in taxonomy-term.html.twig:

<div style="background-color: {{term.field_hex.0.value}};"> 
 {{content.field_image}}  
</div>

{{ content.field_name }} renders the field as configured in UI and {{ entity_type.field_name.0.value }} prints the raw value of the first field item as stored in the database.

Don't forget to remove the image field when you render the rest of the content variable:

{{ content|without('field_image') }}