Recomendaciones para la compatibilidad del modo oscuro en las wikis de Wikimedia

This page is a translated version of the page Recommendations for night mode compatibility on Wikimedia wikis and the translation is 99% complete.

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 .

En todos los wikis de Wikimedia, se están realizando esfuerzos para introducir el modo nocturno en las preferencias del usuario en los sitios de escritorio y móviles. 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

@media screen {
	html.skin-theme-clientpref-night .element {
		background-color: #666666;
		color: #ace;
	}
}

Buen ejemplo

@media screen {
	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 */
/* Note: If using a CSS variable, there is no need to make use of `@media screen` */
@media screen {
	html.skin-theme-clientpref-night .pane {
		background-color: black;
		color: white;
	}
}

@media screen and (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

@media screen {
	html.skin-theme-clientpref-night .pane { background-color: black; color: white; }
}
@media screen and (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

Seguido en Phabricator
Task T360562
Resuelto

Seguido en Phabricator
Task T361934
Resuelto

Seguido en Phabricator
Task T368637
Abierto

Recommendation is currently restricted to use inside TemplateStyles (phab:T360562, phab:T361934).

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]]
[[File:Gas flare fr.svg|thumb|left|É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]]
[[File:Gas flare fr.svg|thumb|left|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.]]

For templates with no option to specify the class, you can use a <div> tag to wrap around the template and apply the class there. For example:

<div class="skin-invert-image">
    {{multiple image|align=center|total_width=540
        |image1=...
    }}
</div>

To invert all images in a gallery , you can add either the skin-invert or skin-invert-image class to the ‎<gallery> tag, depending on the context. (If your gallery uses captions, you should use skin-invert-image to avoid inverting the caption text.)

Gallery example

<gallery class="skin-invert-image">
Tupac Shakur's signature.svg
Gas flare fr.svg|É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.
</gallery>

When `skin-invert` does not work

Certain images will not be easily invertible in night mode without losing important information (for instance, images with a dark base accompanied by bright colors). In these cases, the best option to preserve the image's original colors is probably to provide a light-colored background rather than invert the image, so that it can be seen in both day and night modes.

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

@media screen {
	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;
	}
}

Why are links black in colored tables

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 with an underline so they are accessible
T357575	File pages are not compatible with night mode

Instead of blue links inside these tables, such links will appear as black. If this behaviour is not wanted, please revise your tables to not use inline styles.

More information in phab:T371411.

Note this behaviour only applies to article namespace. If you are using a table with different colored rows in another namespace, you should consider creating a template that provides support for making links pass WCAG AA color contrast standards. You can use Extension:TemplateStyles to style links appropriately.

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.

La página se ve bien para mí, a pesar de no seguir estas reglas, ¿por qué?

Para reducir la cantidad de trabajo inicial que se requiere para que las wikis adopten el modo nocturno, es posible que se hayan aplicado varias soluciones generalizadas por el momento a las páginas para ayudarlas a cumplir con el modo nocturno. Estos estilos se eliminarán con el tiempo, cuando los wikis se hayan adaptado al nuevo tema.

Se encuentran listados aquí:

WikimediaMessages SiteAdminHelper - the site admin helper ships various styles that improve night mode support - this includes disabling/updating backgrounds and borders in elements with the class .navbox, .infobox, .quotebox, .side-box, .metadata, .navigation-box, and all elements on the main page. It also enforces black text color on any element which defines an inline style with a background rule. Note, while this fixes the large majority of issues, this also causes breakage to some elements, in particular any style attribute that sets background: inherit and background: transparent.
MediaWiki:Vector-2022.css / MediaWiki:Minerva.css rules - some wikis may have adopted generalized rules that change links to black underlined text to any table element that have inline styles that apply backgrounds. For example English Wikipedia.
A local solution may have already been applied to the template you are looking at. Be sure to inspect the element and look at any associated styles provided by template styles that may be applying specific rules when the night theme classes are detected on the HTML element.

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
Transparent SVGs in infoboxes Example fix

Portales

Portal:Current events T357717

Plantillas / módulos

Plantilla:Color T360683
Módulo:Track listing T357730
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
Template:Key press

Messages

Please review the following messages on your wiki:

¿Cómo puedo utilizar diferentes temas en MediaWiki?

Recomendaciones

Utiliza el marcado HTML recomendado para describir tus plantillas ==

Utilizar colores accesibles que superen las comprobaciones WCAG AA

Modo nocturno usando media query estándar y clases HTML

Evitar valores estáticos para los colores de fondo y texto en línea

Definir siempre el color al definir el fondo

Utiliza variables CSS o tokens de diseño CSS con fallback para el fondo y el texto siempre que sea posible

Anular estilos de modo oscuro / desactivar el tema de modo oscuro

Aplicar filtros a imágenes oscuras con fondo transparente

When skin-invert does not work

Evitar el uso de background: none o background: transparent

Consejos para editores/as que crean temas alternativos

¿Invertir o no invertir?

Considere patrones en lugar de colores de fondo

Why are links black in colored tables

No es necesario que el texto para discapacitados cumpla las directrices de contraste de color

La página se ve bien para mí, a pesar de no seguir estas reglas, ¿por qué?

Ejemplos

Cuestiones generales

Portales

Plantillas / módulos

Messages

When `skin-invert` does not work

Evitar el uso de `background: none` o `background: transparent`