---
url: "/es/emailify/design/dark-mode.md"
description: "Los ajustes de modo oscuro solo funcionan en Apple Mail de iOS/macOS (Gmail, Outlook, etc. _no admiten_ ajustes de modo oscuro)."
---

# Ajustes de modo oscuro (solo en Apple Mail de iOS/macOS)

> Los ajustes de modo oscuro solo funcionan en Apple Mail de iOS/macOS (Gmail, Outlook, etc. _no admiten_ ajustes de modo oscuro).

> **Warning:** La [compatibilidad con los estilos de modo oscuro personalizados](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro _no funcionarán_ en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la [mejora progresiva](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

### Tutorial en vídeo: añadir estilos de modo oscuro a diseños de email HTML

En este vídeo verás cómo añadir ajustes de estilo personalizados para el modo oscuro a tus diseños de email y exportar desde Figma emails HTML responsive y listos para producción con el plugin Emailify.
[Embedded media](https://www.youtube-nocookie.com/embed/uAxQ5Psi1m4)

## Aspectos de diseño importantes para el modo oscuro {#important-design-considerations-for-dark-mode}

![Compatibilidad de los clientes de email con el CSS de modo oscuro](/assets/images/emailify/caniemail-dark-mode.jpg)

> **Warning:** La [compatibilidad con los estilos de modo oscuro personalizados](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro _no funcionarán_ en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la [mejora progresiva](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

Como cada cliente de email tiene su propia implementación, diseñar para el modo oscuro es muy complicado, pero merece la pena intentar trabajar _a favor_ de los cambios (a menudo horribles) que cada cliente de email aplica automáticamente en modo oscuro.

Como punto de partida, conviene consultar algunos recursos (como estos artículos de [CampaignMonitor](https://www.campaignmonitor.com/blog/email-marketing/designing-an-email-for-dark-mode-dark-and-light-optimization/) y [Litmus](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/)) que explican exactamente qué cambian estos clientes de email y cómo mitigar algunos de esos cambios desde el diseño.

## Aplicar ajustes de color para el modo oscuro {#applying-dark-mode-color-overrides}

[Video](/assets/videos/emailify/design/dark-mode-color-override.mp4)

Selecciona un elemento, como una capa de texto, una imagen, un Button, una Row, una Column o un Wrapper, y haz clic en el botón **Settings** de la cabecera del plugin. Puedes definir los colores de texto y de fondo para el modo oscuro en la sección **Dark Mode Overrides**, al final del panel Settings.

En las capas Button, Row, Column y Wrapper también puedes definir un ajuste de **Border Color**. Así cambias el color del borde en modo oscuro sin cambiar el grosor ni el estilo del borde que se usan en modo claro.

Estos ajustes se mostrarán en [los clientes de email compatibles](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) con esta función (las apps Apple Mail de iOS/macOS) cuando el email se vea en un dispositivo con el modo oscuro activado.

> **Warning:** La [compatibilidad con los estilos de modo oscuro personalizados](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro _no funcionarán_ en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la [mejora progresiva](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

## Alternar entre dos capas de imagen en modo oscuro y claro {#swapping-between-two-image-layers-in-dark-and-light-mode}

[Video](/assets/videos/emailify/design/swap-dark-mode-content.mp4)

También puedes sustituir ciertas capas de imagen en modo oscuro. Haz clic en tu capa de contenido de Figma (dentro de una capa Column), luego en el botón **Settings** de la cabecera del plugin y activa **Only Hide in Dark Mode** u **Only Show in Dark Mode**, según quieras que la capa de imagen se muestre o se oculte en [los clientes de email compatibles](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) con esta función (las apps Apple Mail de iOS/macOS) cuando el email se vea en un dispositivo con el modo oscuro activado.

> **Warning:** La [compatibilidad con los estilos de modo oscuro personalizados](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro _no funcionarán_ en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la [mejora progresiva](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

## Previsualizar el modo oscuro en el plugin {#previewing-dark-mode-in-the-plugin}

Abre Preview y activa el interruptor **Dark Mode** en la barra de herramientas de HTML Preview. Puedes seguir usando el selector de ancho de la vista previa si quieres comparar el mismo diseño en modo oscuro en anchos de escritorio o de móvil. Dark Mode no está disponible mientras esté seleccionada la vista combinada **Desktop & Mobile** (Hybrid).

La vista previa local usa un tratamiento genérico de modo oscuro automático y activa los estilos `prefers-color-scheme` del email. Sus ajustes de color son una referencia aproximada y no imitan ningún cliente de email concreto. Si el email contiene ajustes de modo oscuro de Emailify, usa el interruptor **Overrides** que hay al lado para mostrar u ocultar sus estilos explícitos de fondo, texto, borde y sustitución de imágenes.

> **Warning:** El interruptor es una ayuda para el diseño, no un emulador de clientes ni de dispositivos. No reproduce los filtros de saneamiento de las cuentas con sesión iniciada, los motores de renderizado y las fuentes nativas, la interfaz de las apps, el procesamiento durante la entrega ni todas las diferencias entre clientes y versiones.

## Probar tus emails en modo oscuro {#testing-your-emails-in-dark-mode}

### Tutorial en vídeo: probar emails HTML exportados desde Figma en modo oscuro

En este vídeo verás cómo probar en modo oscuro emails HTML exportados desde Figma con el plugin Emailify y Litmus.com.
[Embedded media](https://www.youtube-nocookie.com/embed/h5Gq9apZrxk)

Siempre merece la pena probar tus emails con un servicio como [Litmus](https://www.litmus.com/) o [Email on Acid](https://www.emailonacid.com/) para asegurarte de que se ven bien antes de enviarlos.

> **Warning:** La [compatibilidad con los estilos de modo oscuro personalizados](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) en los clientes de email se limita a Apple Mail de iOS/macOS, lo que significa que los ajustes de modo oscuro _no funcionarán_ en ningún otro cliente, como Gmail, Outlook, etc. Tenlo en cuenta e intenta diseñar tus emails pensando en la [mejora progresiva](https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/).

> **Tip:** Puedes [aplicar ajustes en bloque](/es/emailify/design/settings#apply-settings-in-bulk) abriendo **Settings** y seleccionando en Figma varias capas de Emailify del mismo tipo. Cualquier ajuste que cambies se aplicará a todas las capas seleccionadas.