Apariencia y modo oscuro del embed

Las props cssVars y css permiten adaptar los colores, los bordes y los elementos del embed a tu aplicación. Conserva espacio para leer el PDF, revisar los campos y completar la autenticación con Digito ID.

Los ejemplos usan el contrato previsto de los paquetes de Digito. Consulta su estado de publicación y la guía de tu framework.

Variables CSSCopiar link al encabezado

Pasa un objeto a cssVars. Las claves usan camelCase; sus valores de color pueden ser hexadecimales, RGB, HSL o nombres de colores CSS. Usa valores concretos, como #4338ca o rgb(67, 56, 202), para que el embed pueda convertirlos a su tema.

Este ejemplo de React utiliza una paleta clara y deshabilita el modo oscuro dentro del embed:

import { EmbedSignDocument } from '@digitogroup/embed-react';

export function FirmaConTema({ token }: { token: string }) {
  return (
    <div className="embed-firma">
      <EmbedSignDocument
        token={token}
        host="https://business.digito.do"
        language="es"
        className="embed-firma-marco"
        darkModeDisabled={true}
        cssVars={{
          background: '#ffffff',
          foreground: '#172033',
          widget: '#f8fafc',
          widgetForeground: '#172033',
          primary: '#4338ca',
          primaryForeground: '#ffffff',
          border: '#cbd5e1',
          ring: '#4338ca',
          radius: '0.75rem',
        }}
      />
    </div>
  );
}

token es el token del destinatario de un documento ya preparado. Consulta firma con embed para obtenerlo desde tu servidor y manejar los callbacks.

Colores admitidosCopiar link al encabezado

BordesCopiar link al encabezado

Las variables que omitas conservan sus valores del tema. Las mismas opciones están disponibles en los otros frameworks; cambia la sintaxis de las props según su guía.

CSS personalizadoCopiar link al encabezado

Utiliza css para pasar una cadena de estilos al contenido del embed. Este ejemplo ajusta el panel de firma y la separación del documento en pantallas amplias:

<EmbedSignDocument
  token={token}
  host="https://business.digito.do"
  language="es"
  css={`
    .embed--DocumentWidgetContainer {
      box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
    }

    @media (min-width: 48rem) {
      .embed--DocumentContainer {
        gap: 2rem;
      }
    }
  `}
/>

Clases del embedCopiar link al encabezado

Cada clase aparece cuando corresponde a ese elemento o estado del flujo. Usa las clases del embed para personalizar elementos internos; className se aplica al marco que monta el componente en tu aplicación.

Atributos de los camposCopiar link al encabezado

Los campos exponen atributos que permiten aplicar estilos según su tipo y estado:

Por ejemplo, esta regla distingue los campos que ya contienen un valor sin ocultar su contenido:

.field--FieldRootContainer[data-inserted='true'] {
  background-color: #eef2ff;
}

Estos atributos describen los campos de la interfaz. Un campo con valor no demuestra que una firma ni el documento completo hayan finalizado; consulta el resultado con la API.

Contenedor adaptableCopiar link al encabezado

El CSS del contenedor se aplica a tu aplicación; las props css y cssVars personalizan el contenido del embed. Para el contenedor del primer ejemplo:

.embed-firma {
  width: 100%;
  height: 48rem;
  min-height: 34rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  overflow: hidden;
}

.embed-firma-marco {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 40rem) {
  .embed-firma {
    height: calc(100dvh - 5rem);
    border-radius: 0.5rem;
  }
}

Revisa ambos modosCopiar link al encabezado

darkModeDisabled={true} deshabilita el modo oscuro dentro del embed; no cambia el tema de tu aplicación. Para conservar el modo oscuro, omite esa prop o establece false, y revisa tus colores en ambos modos.

• Conserva contraste entre texto, fondo, controles y estados de error.
• Usa un logo de Digito que siga siendo visible en fondos claros y oscuros.
• Permite navegación por teclado y no ocultes el foco.
• Comprueba que el PDF, las acciones y la autenticación de Digito ID sigan visibles en pantallas pequeñas.
• Revisa los estados de carga, error, rechazo y finalización del embed, además de su pantalla inicial.

Antes de cada acción de firma, el firmante se autentica de nuevo con Digito ID. Los estilos deben conservar los controles, los avisos de autorización y la información de evidencia que presente el flujo. No uses CSS para ocultarlos ni para saltar la autenticación.

Embed en tu aplicación · Firma con embed · Editor con embed.