> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Herencia de configuración de marca

> Aprende a utilizar la configuración de marcas, como logotipos y colores de marcas, dentro de un tema o en archivos HubL/HTML y CSS. 

Con [la configuración de marca](https://knowledge.hubspot.com/branding/edit-your-logo-favicon-and-brand-colors#customize-your-company-logo-and-colors), los usuarios pueden configurar los colores , logotipos y favicons de la marca de la empresa que se utilizarán en todo el contenido de HubSpot. Esto te permite acceder a esa configuración de marca con tokens en el archivo de un tema `fields.json` y dentro de los archivos HTML/HubL y CSS. También puedes acceder a los colores de las marcas dentro del archivo de un módulo `fields.json`.

Después de agregar estos tokens dentro de un archivo `fields.json`, los creadores de contenido pueden editar sus valores dentro del editor de configuración del tema. Al agregar estas fichas en un HTML, HubL o CSS, los valores estarán codificados de forma rígida y los creadores de contenido no podrán modificarlos en el editor de la página.

A continuación, conoce las variables de configuración de marca disponibles junto con ejemplos de implementación.

## Variables de configuración de marca

La siguiente es una lista de opciones a las que se puede acceder desde el área de configuración de la marca dentro del valor del objeto `property_value_paths` o dentro de los archivos HTML/HubL y CSS.

### Colores

Los colores de la marca se pueden acceder tanto dentro del [archivo fields.json ](#fields-json-color) de un tema o módulo, como dentro de los archivos HTML/HubL y CSS utilizando los siguientes tokens HubL:

* **Principal:**

  * `{{brand_settings.primaryColor}}`
  * `{{brand_settings.colors[0]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-primary.png" alt="marca-colores-primarios" />
</Frame>

* **Secundario:** `{{brand_settings.secondaryColor}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-secondary.png" alt="marca-colores-secundario" />
</Frame>

* **Colores de contraste:**

  * `{{brand_settings.accentColor1}}`
  * `{{brand_settings.accentColor2}}`
  * `{{brand_settings.accentColor3}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-accent.png" alt="marca-colores-acento" />
</Frame>

* **Colores adicionales:**

  * `{{brand_settings.colors[1]}}`
  * `{{brand_settings.colors[2]}}`
  * `{{brand_settings.colors[3]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-additional.png" alt="marca-colores-adicionales" />
</Frame>

Para acceder directamente al código hexadecimal de un color, incluye un filtro `hex` en el token. Por ejemplo: `{{brand_settings.primaryColor.hex}}`

Para incluir colores de configuración de la marca en el archivo `fields.json` de un tema o módulo, utiliza el siguiente formato:

```json theme={null}
//Example of using the primary color in within a theme's
// field.json file
{
  "name": "branding_color",
  "label": "branding_color",
  "type": "color",
  "default": {
    "color": "#26ff55",
    "opacity": 60
  },
  "inherited_value": {
    "property_value_paths": {
      "color": "brand_settings.primaryColor"
    }
  }
}
```

<Warning>
  Hay ocasiones en que las cuentas pueden no tener colores adicionales configurados en su configuración de marcas. Si el código hace referencia a un color heredado que no existe en la configuración de la marca, se utiliza la siguiente lógica de reserva:

  * `secondaryColor` vuelve al primer color adicional (`colors[1]`).
  * `accentColor1` vuelve al segundo color adicional (`colors[2]`).
  * `accentColor2` vuelve al tercer color adicional (`colors[3]`).
  * `accentColor3` vuelve al cuarto color adicional (`colors[4]`).
  * Los colores adicionales (por ejemplo, `colors[3]`) volverán al valor `default`. Si no hay una propiedad predeterminada color establecido, se utilizará `primaryColor`.
</Warning>

### Logotipos

Se puede acceder a los logotipos de marcas dentro del archivo `fields.json` de un módulo y dentro de los archivos HTML / HubL y CSS.

Puedes usar los siguientes tokens para acceder al conjunto de logotipos principales dentro de la configuración de marcas:

* `{{brand_settings.primaryLogo}}`
* `{{brand_settings.logos[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-logo0.png" alt="logotipo-de-configuración-de-marca0" />
</Frame>

Se puede acceder a todos los logotipos adicionales mediante `{{brand_settings.logos[1-19]}}`.

Además, puede acceder a los siguientes atributos del logotipo:

* **URL del logotipo:** `{{brand_settings.primaryLogo.link}}`
* **Texto alternativo del logotipot:** `{{brand_settings.primaryLogo.alt}}`
* **Altura del logotipo:** `{{brand_settings.primaryLogo.height}}`
* **Ancho del logotipo:** `{{brand_settings.primaryLogo.width}}`
* **Enlace a la imagen del logotipo:** `{{brand_settings.primaryLogo.src}}`

### Favicons

Sólo se puede acceder a los favicons de marca dentro de archivos HTML/HubL y CSS.

Puedes usar los siguientes tokens para acceder al conjunto de logotipos principales dentro de la configuración de marcas:

* `{{brand_settings.primaryFavicon}}`
* `{{brand_settings.favicons[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-favicon0.png" alt="marca-configuración-favicon0" />
</Frame>

Se puede acceder a todos los favicons adicionales usando `{{brand_settings.favicons[1-19]}}`.

Puedes acceder a la URL del logotipo directamente incluyendo un filtro `src`. Por ejemplo:`{{brand_settings.primaryFavicon.src}}`