Uso de íconos SVG en la documentación de ayuda para que sea visualmente compatible con el Modo Oscuro

General
1

Después de habilitar el cambio automático al modo oscuro, noté que muchas de mis capturas de pantalla que explicaban los botones individuales de la interfaz de usuario se veían horribles con sus fondos blancos. Intenté reutilizar el código SVG que usa la interfaz real, pero eso no funcionó. Encontré:

pero usar archivos SVG descargados directamente de Font Awesome tampoco funcionó y el enlace de GitHub a los íconos de esa conversación no coincidía perfectamente con la interfaz de usuario actual de Discourse. Afortunadamente, me topé con:

Esto me ayudó a darme cuenta de que sí, faltan el ancho y la altura en las descargas de Font Awesome. Encontré los íconos v5 en Font Awesome y modifiqué esos archivos SVG. Una altura de 17px funcionó bien para los botones de acción de publicación (14px para los botones del editor) y el ancho que tuviera sentido según la configuración de viewBox; una calculadora de relación de aspecto resultó útil en ocasiones.

Además de necesitar agregar width y height, también necesité agregar un fill a la ruta. Opté por fill="currentColor" en lugar de un color estático, ya que consideré que el color del texto circundante era un excelente valor predeterminado. Sin embargo, todavía quería que los íconos coincidieran con los colores de los botones de la interfaz de usuario y no con el texto circundante, y descubrí que podía mantener la sintaxis de carga de archivos ![alt](file) y aún así apuntar a estos SVG específicos envolviéndolos en un span HTML (algo que los usuarios normales no harían) y agregando

p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img { 
    filter: invert(85%) sepia(14%) saturate(0%) hue-rotate(169deg) brightness(85%) contrast(83%); 
}

@media (prefers-color-scheme: dark) {
    p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img { 
        filter: invert(51%) sepia(0%) saturate(484%) hue-rotate(216deg) brightness(102%) contrast(88%);
    }
}

al CSS. Este CSS específico imita var(--primary-low-mid) cuando el color primario se establece en negro en nuestro esquema de color claro y #eee en nuestro esquema de color oscuro, y también tiene en cuenta un span envolvente existente en el panel de vista previa del editor. Puedes usar un generador de filtros CSS para averiguar cómo cambiar el color del SVG cuando se usa de esta manera. (Dependiendo de tus esquemas de color, es posible que desees verificar cómo se ve si un usuario no tiene la opción de cambio automático al modo oscuro guardada en sus configuraciones de preferencias, pero tiene su dispositivo en modo oscuro, ya que hay un estado intermedio que puede ocurrir al usar @media (prefers-color-scheme: dark) en tu CSS).

¡Espero que este proceso de descubrimiento ayude a alguien más! Si deseas descargar y reutilizar/modificar los íconos que hice para este propósito (porque esto consumió bastante tiempo), puedes encontrarlos en las páginas del tutorial que he completado hasta ahora: acciones y reacciones de publicación, estilo básico de publicación, estilo avanzado de publicación y constructor de encuestas. (Solo reemplacé los íconos individuales y mantuve las capturas de pantalla del esquema de color claro para las imágenes contextuales, que son una mezcla de imágenes tomadas de la documentación de ayuda aquí en meta y capturas de pantalla que hice de nuestro sitio específico).

7 Me gusta