Recomendaciones para la compatibilidad del modo oscuro en las wikis de Wikimedia
 | Estas recomendaciones son realizadas y manternidas por el equipo Web. Se basan en datos, tendencias tecnológicas y nuestras capacidades. Como tales, evolucionan y pueden cambiar. |
Permitir el cambio entre el modo estándar y el oscuro es una característica adoptada en muchos sitios web, dispositivos móviles, etc. Ofrece al usuario más control para que la lectura sea más cómoda. Se está añadiendo a nuestro software como parte del proyecto Reading/Web/Accesibilidad para la lectura.
Across Wikimedia wikis, there are efforts underway to introduce night mode in the user's preferences on the desktop and mobile sites. Las apps de Wikipedia para iOS y Android ya disponen de estas opciones desde hace tiempo.
Un obstáculo importante para implantar el modo oscuro es cómo se construyen y estilizan las plantillas. Otro problema es el uso de colores explícitos, especificados como estilos CSS en línea en varios artículos.
Podemos resolver estos problemas concienciando a las personas editoras sobre el modo oscuro, especialmente a editores/as de plantillas. Esto se debe a que las plantillas pueden incluirse en muchos artículos y, por lo tanto, tienen un gran impacto para la compatibilidad con el modo oscuro.
A continuación se ofrecen recomendaciones y directrices generales a tener en cuenta a la hora de componer artículos y plantillas.
¿Cómo puedo utilizar diferentes temas en MediaWiki?
Por ahora, puedes añadir ?minervanightmode=1 al final de cualquier URL para ver cómo se comporta actualmente el contenido en el tema oscuro.
También puedes usar https://test.m.wikipedia.org/wiki/Special:MobileOptions para activar el modo oscuro en nuestra wiki de pruebas.
Actualizaremos estas instrucciones a medida que se desarrolle la función.
Recomendaciones
Utiliza el marcado HTML recomendado para describir tus plantillas ==
El modo oscuro incluirá estilos que solucionan automáticamente los problemas conocidos de las plantillas.
Esto es importante para los proyectos con menos editores/as técnicos/as.
Será posible excluirse de estos estilos añadiendo la clase notheme al elemento respectivo o globalmente (phab:T358071).
Los proyectos que no utilicen estas clases probablemente recibirán la funcionalidad más tarde que los demás.
Más información: Utilizar nombres de clase estandarizados en el marcado HTML para componentes de plantillas en todos los proyectos
Utilizar colores accesibles que superen las comprobaciones WCAG AA
Muchos de los colores utilizados en el modo diurno han sido históricamente inaccesibles. Cuando seleccione colores para el modo oscuro, asegúrese de comprobar los colores existentes con el WebAIM contrast checker. Por favor, considera modificar la luminancia para que los colores lo superen. Considera la posibilidad de instalar una extensión del navegador como la herramienta WCAG Color Contrast (Chrome, o Firefox) para obtener más información sobre los problemas de contraste de color en tu wiki.
Mal ejemplo
html.skin-theme-clientpref-night .element {
background-color: #666666;
color: #ace;
}
Buen ejemplo
html.skin-theme-clientpref-night .element {
background-color: #383838;
color: #ace;
}
Modo nocturno usando media query estándar y clases HTML
Se aplicará una clase estándar legible skin-theme-clientpref-night al elemento HTML cuando se haya activado el modo oscuro. Sin embargo, los estilos que tienen como objetivo el modo oscuro también deben tener como objetivo prefers-color-scheme ya que ciertos usuarios pueden haber optado a través de su sistema operativo y haberse suscrito a esos estilos a través de skin-theme-clientpref-os.
Si se prefiere el esquema de color, el contenido se adaptará a ambos grupos de usuarios.
Mal ejemplo
Template:Example/styles.css
html.skin-theme-clientpref-night .pane {
background-color: white;
color: black;
}
Buen ejemplo
Template:Example/styles.css
/* forced night mode */
html.skin-theme-clientpref-night .pane {
background-color: black;
color: white;
}
@media (prefers-color-scheme: dark) {
/* automatic mode */
html.skin-theme-clientpref-os .pane {
background-color: black;
color: white;
}
}
Evitar valores estáticos para los colores de fondo y texto en línea
Numerosas plantillas y artículos utilizan colores explícitos en línea, cuando en realidad no son necesarios. Al crear nuevas plantillas o revisar las existentes, considere la posibilidad de eliminar los colores en línea para el fondo o el texto. Esto permitirá que la skin actual aplique sus estilos a todos los elementos automáticamente.
Si estás navegando por un artículo en modo nocturno y observas que un elemento parece desentonar (por ejemplo, un fondo de mesa blanco brillante), es muy probable que se deba a un color en línea especificado para ese elemento. Considera la posibilidad de revisar el artículo o la plantilla que da salida a ese elemento y eliminar el color en línea.
Si crees que un determinado elemento debe tener un color específico, considera buscar una clase CSS apropiada (proporcionada por el skin) que pueda aplicarse al elemento, lo que le daría un color más distintivo. Si no dispone de una clase CSS de este tipo, contacta con los desarrolladores de la skin para solicitar la creación de una nueva clase CSS.
Si quieres aplicar estilos, se recomienda utilizar una hoja de estilos (ver Help:TemplateStyles para más información) o una variable CSS.
Mal ejemplo
Template:Example
<div class="pane" style="background-color: white; color: black;">Text</div>
Buen ejemplo
Template:Example
<templatestyles src="Template:Example/styles.css" />
<div class="pane">Text</div>
Template:Example/styles.css
html.skin-theme-clientpref-night .pane { background-color: white; color: black; }
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .pane { background-color: black; color: white; }
}
Definir siempre el color al definir el fondo
Al definir un color de fondo, puede resultar tentador no definir el color si es el mismo que el del texto del artículo. Sin embargo, cuando se aplican diferentes temas, por ejemplo, el modo nocturno, esto podría tener consecuencias no deseadas (por ejemplo, texto blanco sobre fondo amarillo). Por ello, se recomienda definir siempre los dos juntos. Se proporciona una lint rule para ayudar a identificar las páginas y plantillas con este problema.
Aunque se utilicen variables CSS, es importante definir explícitamente el color junto al fondo para evitar suposiciones sobre el contexto en el que se está utilizando. Por ejemplo, una plantilla puede estar incrustada dentro de otra plantilla/tabla que defina sus propios fondos o colores, o puede haber estilos globales que se apliquen a la página y que puedan afectar inadvertidamente a su propio contenido.
Mal ejemplo
Template:Example
<div style="background-color: yellow; padding: 16px;">Text</div>
Buen ejemplo
Template:Example
<div style="background-color: yellow; color: #333; padding: 16px;">Text</div>
Utiliza variables CSS o tokens de diseño CSS con fallback para el fondo y el texto siempre que sea posible
CSS variables can only be defined inside gadgets and site CSS e.g. MediaWiki:Common.css.
When using design tokens you must note that stability is currently not guaranteed and may require later changes based on phab:T340477.Al utilizar estilos en línea para modificar el texto o el fondo, utilicemos un token de diseño CSS que sea compatible con el skin. La lista de tokens de diseño se encuentra en la documentación del Codex. Cuando se utilicen las variables CSS para los tokens de diseño del Codex, proporciona siempre un valor alternativo para las pieles en las que no se admitan las variables CSS.
También puedes definir tus propias variables CSS dentro de un gadget (por ejemplo, the default hidden night mode gadget on English Wikivoyage).
Mal ejemplo
<span style="font-size:0.95em; font-size:95%; color: #54595d;">A subscription is required to read this URL.</div>
Buen ejemplo
En este ejemplo, se utiliza el color-sutil design token, con #54595d sólo utilizado como un fallback cuando las variables CSS no están disponibles en el skin.
Esto proporciona a las pieles con modo oscuro la información necesaria para ajustar el contenido a un color adecuado.
<!-- Always define a CSS fallback value for skins which do not support Codex e.g. Monobook. -->
<span style="font-size:95%; color:var(--color-subtle, #54595d);">A subscription is required to read this URL.</div>
Anular estilos de modo oscuro / desactivar el tema de modo oscuro
En la implementación actual del Page Content Service (el servicio utilizado por las aplicaciones móviles para mostrar artículos), el modo oscuro funciona anulando los colores de la mayoría de los elementos con estilos nocturnos, utilizando la propiedad CSS !important.
Esto se debe precisamente al gran número de plantillas y elementos que especifican estilos en línea.
En la versión web, esto también ocurre en menor medida (principalmente en elementos relacionados con infoboxes, navboxes y otras plantillas comunes).
Puede haber casos en los que la eliminación del color no esté justificada o en los que los editores no estén de acuerdo con la elección realizada.
En tales casos, puede incluir la clase notheme en el estilo del elemento, lo que impedirá que se anule su color (es decir, que se le aplique un tema).
De este modo, el contenido tendrá exactamente el mismo estilo en todos los temas (por ejemplo, noche/luz/sepia).
Mal ejemplo
En este ejemplo, el tema se anulará dentro de las aplicaciones Wikimedia y los colores se invertirán en el modo oscuro en el escritorio o en la web móvil:
<div class="pane">Text</div>
Buen ejemplo
En este ejemplo, la plantilla ha solicitado explícitamente que no se anule dentro de las aplicaciones Wikimedia y los colores no se invertirán en ningún otro lugar:
<div class="pane notheme mw-no-invert">Text</div>
Aplicar filtros a imágenes oscuras con fondo transparente
Ciertas imágenes (por ejemplo, las firmas en los infoboxes) tienden a ser de contenido negro con fondos transparentes.
En el modo oscuro, esto da lugar a SVG ilegibles porque el contenido negro estará sobre un fondo oscuro.
Para solucionar esto, puedes utilizar un filtro de inversión CSS (utilizando la clase skin-invert o skin-invert-image).
Cuando la miniatura va acompañada de un pie de foto, debe utilizar la clase skin-invert-image para evitar invertir también el pie de foto.
Mal ejemplo
En este ejemplo, el resultado puede ser una firma entintada en negro sobre un fondo negro.
[[File:Tupac Shakur's signature.svg|thumb]]
[[Fichier:Gas flare fr.svg|vignette|gauche|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]
Buen ejemplo
Aquí se invierten los colores para que la firma se vuelva blanca.
[[File:Tupac Shakur's signature.svg|thumb|class=skin-invert]]
[[Fichier:Gas flare fr.svg|vignette|gauche|class=skin-invert-image|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]
Evitar el uso de background: none o background: transparent
La mayoría de las veces son innecesarios, y lo que es peor, interferirán con las correcciones automáticas del modo nocturno de su proyecto. Deberían eliminarse o trasladarse a TemplateStyles si es absolutamente necesario para evitar problemas de contraste de colores en el tema oscuro.
Mal ejemplo
<div style="background: transparent;">Text with transparent background</div>
Buen ejemplo
La norma de fondo es innecesaria.
<div>Text with transparent background</div>
Ejemplo aceptable
Si el fondo es necesario, defina también 1 $.
<div style="background: transparent; color: inherit;">Text with transparent background</div>
Consejos para editores/as que crean temas alternativos
En términos más generales, queremos animar a considerar las plantillas y los artículos como agnósticos con respecto a la temática y los estilos. Además del modo oscuro, puede haber un gran número de posibles temas de color y, de hecho, las aplicaciones móviles de Wikipedia (a través del servicio de contenido de páginas) ya ofrecen un tema "sepia", así como un tema "negro" pensado para las pantallas OLED de bajo consumo.
¿Invertir o no invertir?
Una inversión utilizando filtros CSS proporciona una forma rápida de convertir el contenido diseñado en un tema claro en un tema más oscuro.
Aunque no podemos recomendar este enfoque para todos los contenidos, sigue siendo una herramienta útil que a menudo puede utilizarse de forma segura y barata.
El gadget de modo oscuro de Wikipedia utiliza la propiedad invertir propiedad de filtro CSS para dar estilo al contenido.
Puedes evitar que un elemento tenga los colores invertidos añadiendo la clase mw-no-invert.
También puede utilizar la clase skin-invert para solicitar que el software invierta el contenido cuando esté disponible.
Considere patrones en lugar de colores de fondo
Las personas lectoras daltónicas pueden tener dificultades para distinguir y reconocer pequeños objetos de color. En los artículos, considere la posibilidad de utilizar motivos en lugar de colores, o además de ellos, cuando proceda. Lo ideal es que el patrón esté separado del texto. Considera la posibilidad de utilizar CSS Background Patterns monocromáticos y de leer cómo Trello introdujo un modo amigable para daltónicos.
Mal ejemplo
Template:Example/styles.css
html.skin-theme-clientpref-night .ib-youtube-above {
background-color: #B60000;
color: white;
}
Buen ejemplo
Template:Example/styles.css
html.skin-theme-clientpref-night .ib-youtube-above {
background-image: linear-gradient(135deg, #ff1c00 25%, transparent 25%), linear-gradient(225deg, #ff1c00 25%, transparent 25%), linear-gradient(45deg, #ff1c00 25%, transparent 25%), linear-gradient(315deg, #ff1c00 25%, var(--background-color-base) 25%);
background-position: 8px 0, 8px 0, 0 0, 0 0;
background-size: 8px 8px;
background-repeat: repeat-x;
}
Consider globally setting link color inside tables with background
It is quite common for editors to create tables with background colors defined on rows or columns. If the table contains links this can be problematic, as often the color choices will be tailored towards accessibility in the standard theme, or will not consider accessibility at all.
For example the links in this table are accessible in light theme but not the dark theme:
| Phab ticket | Description |
|---|---|
| T360844 | Links in elements with background color should become black so they are accessible |
| https://phabricator.wikimedia.org/T357575 | File pages are not compatible with night mode |
Instead of blue links inside these tables, it might be better to create blank links with underlines (to distinguish them from other text).
More information in https://phabricator.wikimedia.org/T360844
/********* General fixes for night mode *********/
/* [[phab:T360844]] */
html.skin-theme-clientpref-night [style*="background"] a {
color: #333;
text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os [style*="background"] a {
color: #333;
text-decoration: underline;
}
}
No es necesario que el texto para discapacitados cumpla las directrices de contraste de color
From https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.
Ejemplos
Los siguientes tickets explican correcciones para varios espacios de nombres/plantillas y tipos de páginas que se aplicaron a un único proyecto. Pueden ser útiles para otros proyectos con plantillas similares o copias obsoletas de esas plantillas.
No dejes de leer la discusión y, si tienes alguna pregunta, hazla para que otros proyectos puedan beneficiarse del intercambio de experiencias.
Cuestiones generales
- Links inside table rows with background colors: phab:T360844
- Tables with alternating row colors T358003
Portales
- Portal:Current events T357717
Plantillas / módulos
- Template:Color
- Module:Track listing
- Module:Citation https://phabricator.wikimedia.org/T359894
- Template:No_article_text https://test.wikipedia.org/w/index.php?title=Template%3ANo_article_text&diff=596846&oldid=494808
- Module:Message_box https://test.wikipedia.org/w/index.php?title=Module%3AMessage_box&diff=596845&oldid=579405
- Licensing templates:
- Template:PD-self https://test.wikipedia.org/wiki/Template:PD-self
Messages
Please review the following messages on your wiki: