Capturas de pantalla

El componente Screenshot renderiza imágenes con conciencia de tema que cambian automáticamente entre variantes claras y oscuras cuando el usuario cambia el tema del sitio. Úselo siempre que necesite mostrar capturas de pantalla de interfaz de usuario que deban coincidir con el esquema de colores actual del lector.

Referencia de propiedades

Propiedad	Tipo	Requerida	Descripción
light	string	No	Ruta a la imagen en modo claro
dark	string	No	Ruta a la imagen en modo oscuro
alt	string	Sí	Texto alternativo para accesibilidad
width	number	No	Ancho de la imagen en píxeles
height	number	No	Alto de la imagen en píxeles

Nota

Al menos una de las propiedades light o dark debe proporcionarse. Cuando se suministran ambas, el componente alterna entre ellas según el tema activo.

Modo dual (claro + oscuro)

Proporcione ambas propiedades light y dark para mostrar la variante correcta para cada tema. Active el selector de tema en la esquina superior derecha para ver el cambio de imagen.

import Screenshot from '@f5-sales-demo/docs-theme/components/Screenshot.astro';

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage"
/>

Consejo

Capture siempre las capturas de pantalla en modo claro y oscuro al documentar interfaces de usuario. Esto proporciona a los lectores una representación precisa independientemente de su preferencia de tema.

Imagen única

Cuando solo hay disponible una variante, pase únicamente light o dark. La imagen se renderiza en ambos temas sin alternancia.

<Screenshot
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage (dark only)"
/>

Con dimensiones

Use width y height para controlar el tamaño renderizado y evitar desplazamientos de diseño.

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage at fixed width"
  width={600}
  height={338}
/>

Cómo funciona

El componente renderiza uno o dos elementos <img> dentro de un contenedor .screenshot-pair. Las reglas CSS alternan la visibilidad según el tema activo:

• Modo oscuro (predeterminado) — la imagen .screenshot-light se oculta mediante :root:not([data-theme="light"]) .screenshot-light \{ display: none \}
• Modo claro — la imagen .screenshot-dark se oculta mediante :root[data-theme="light"] .screenshot-dark \{ display: none \}

Los selectores adicionales manejan el contenedor starlight-image-zoom usando :has() para que la funcionalidad de zoom funcione correctamente con ambas variantes.

Todas las imágenes de captura de pantalla reciben un estilo consistente: un borde sutil, esquinas redondeadas y una sombra que se intensifica al pasar el cursor.

Comparación con imágenes Markdown

Característica	Componente Screenshot	Markdown 
Alternancia según el tema	Sí	No
Borde y sombra con estilo	Automático	No
Efecto de sombra al pasar el cursor	Sí	No
Soporte de zoom	Funciona con el complemento de zoom de imágenes	Funciona con el complemento de zoom de imágenes
Texto alternativo	Propiedad alt	![alt text]()

Use el componente Screenshot cuando tenga variantes de imagen específicas para cada tema o desee la apariencia estilizada de captura de pantalla. Use imágenes Markdown estándar para gráficos en línea, diagramas o imágenes que se vean igual en ambos temas.