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 alterna 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 tanto las propiedades light como dark para mostrar la variante correcta para cada tema. Alterne el selector de tema en la esquina superior derecha para ver cómo cambia la 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 capturas de pantalla en modo claro y oscuro al documentar la interfaz de usuario. Esto ofrece 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 el desplazamiento del 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 gestionan el contenedor starlight-image-zoom mediante :has() para que la funcionalidad de zoom funcione correctamente con ambas variantes.

Todas las imágenes de captura de pantalla reciben un estilo uniforme: 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 con conciencia de tema	Sí	No
Borde y sombra con estilo	Automático	No
Efecto de sombra al pasar el cursor	Sí	No
Compatibilidad con 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 disponga de variantes de imagen específicas para cada tema o desee la apariencia estilizada de captura de pantalla. Use imágenes estándar de Markdown para gráficos en línea, diagramas o imágenes que tengan el mismo aspecto en ambos temas.