Empfehlungen für Dunkelmodus-Kompatibilität auf Wikimedia-Wikis
 | Diese Empfehlungen wurden vom Web-Team erstellt und werden von diesem gepflegt. Sie basieren auf Daten, technischen Trends und unseren Möglichkeiten. Entsprechend werden sie weiterentwickelt und können sich ändern. |
Die Möglichkeit zwischen einem Standard-Modus und einem dunklen Modus zu wechseln ist ein Feature, das von vielen Websites und Geräten angeboten wird. Damit hat der Nutzer mehr Kontrolle darüber, die Ansicht lesefreundlich zu gestalten. Als Teil des Lesen/Web/Barrierefreies Lesen-Projekts wurde ein Dunkelmodus in unsere Software integriert.
Es gibt Bestrebungen einen dunklen Modus über alle Wikimedia-Wikis hinweg in die Nutzer-Einstellungen einzuführen, wowohl für Desktop als auch für die Mobil-Ansicht. Die Wikipedia-Apps für iOS und Android haben eine solche Option bereits seit einiger Zeit.
Ein bedeutendes Hindernis bei der Umsetzungen des dunklen Modus ist die Art und Weise wie Vorlagen aufgebaut und gestaltet sind. Eine weitere Herausforderung sind explizite Farbangaben durch CSS-Stile innerhalb der Artikel.
Wir können diese Probleme beheben, indem wir die Aufmerksamkeit für den dunklen Modus unter den Autoren erhöhen, insbesondere denjenigen die Vorlagen erstellen und bearbeiten. Denn Vorlagen sind häufig in vielen Artikeln eingebunden und haben dadurch einen besonders großen Einfluss auf die Kompatibilität.
Das folgende sind generelle Empfehlungen und Richtlinien die bei der Erstellung und Bearbeitung von Artikeln und Vorlagen beachtet werden sollten.
Wie nutze ich verschiedene Themes auf MediaWiki?
For now, you can append ?minervanightmode=1 to the end of any URL to see how the content currently behaves in the night theme.
You can also use https://test.m.wikipedia.org/wiki/Special:MobileOptions to enable night mode on our test wiki.
We will update this instruction as the feature develops.
Empfehlungen
Benutze empfohlene HTML-Markups zur Beschreibung von Vorlagen
Der Dunkelmodus wird mit Stilen ausgeliefert, die einige gut vestandene Probleme mit Vorlagen automatisch beheben.
Dies ist wichtig für Projekte mit wenigen technischen Bearbeitern.
Es ist möglich diese automatischen Anpassungen durch Hinzufügen der Klasse notheme zu einzelnen Elementen (oder auch global) zu verhindern (phab:T358071).
Projekte, die diese Möglichkeit nicht nutzen, bekommen den dunklen Modus möglicherweise erst später als andere.
Mehr Informationen: Projektübergreifende Benutzung standardisierter Klassen im HTML-Markup von Vorlagen-Komponenten
Benutze gut erkennbare Farben, die den WCAG AA Test bestehen
Historisch wurden viele Farben eingesetzt, die nicht für alle Menschen gut erkennbar sind. Bei der Auswahl von Farben für den dunklen Modus, sollten auch die existierenden Farben mit dem WebAIM Kontrast-Prüfer überprüft werden. Ziehe in Betracht die Helligkeit anzupassen, um den Test zu bestehen. Eine Browser-Extension, wie "WCAG Color Contrast"(Chrome, oder Firefox) hilft ein stärkeres Bewusstsein für problematische Farb-Kontraste auf dem Wiki zu bekommen.
Schlechtes Beispiel
@media screen {
html.skin-theme-clientpref-night .element {
background-color: #666666;
color: #ace;
}
}
Gutes Beispiel
@media screen {
html.skin-theme-clientpref-night .element {
background-color: #383838;
color: #ace;
}
}
Berücksichtige den Dunkelmodus mit Standard-Media-Query und HTML-Klassen
Wenn der Dunkelmodus über die Nutzereinstellung aktiviert wurde, wird die Klasse skin-theme-clientpref-night zum HTML-Element hinzugefügt. Stile mit Dunkelmodus sollten aber auch prefers-color-scheme beachten, um den Dunkelmodus Nutzern anzubieten, die Themes aktiviert haben und den Dunkelmodus in ihren Betriebssystem-Einstellungen aktiviert haben.
Damit werden auch diese Nutzer erreicht.
Schlechtes Beispiel
Template:Example/styles.css
html.skin-theme-clientpref-night .pane {
background-color: white;
color: black;
}
Gutes Beispiel
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;
}
}
Vermeide statische Werte für Text- und Hintergrundfarben
In einer großen Zahl von Vorlagen und Artikeln werden explizite Farbangaben genutzt, obwohl sie dort nicht notwendig sind. Erwäge bei der Erstellung und Überprüfung von Vorlagen solche expliziten Farbangaben zu entfernen. Das ermöglicht dem aktuellen Skin seine Stile auf alle Elemente anzuwenden.
Wenn Du den dunklen Modus nutzt und ein Element unangenehm heraussticht (z.B. ein hell-weißer Tabellen-Hintergrund), ist das sehr wahrscheinlich wegen solcher expliziter Farbangaben. Erwäge solche Artikel und Vorlagen zu überprüfen und die Farbangaben zu entfernen.
If you believe that a certain element should have a specific color, consider looking for an appropriate CSS class (provided by the skin) that can be applied to the element, which would give it a more distinguishing color. If such a CSS class is not available, consider contacting the skin developers with a request to create a new CSS class.
Es wird empfohlen Stylesheets (siehe auch Hilfe:TemplateStyles) und CSS-Variablen zu nutzen.
Schlechtes Beispiel
Template:Example
<div class="pane" style="background-color: white; color: black;">Text</div>
Gutes Beispiel
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; }
}
Definiere Hintergrundfarben immer zusammen mit einer Textfarbe
Bei der Festlegung einer Hintergrundfarbe ist es verlockend auf die Festlegung der Textfarbe zu verzichten, wenn die Standardfarbe verwendet werden soll. Bei der Verwendung verschiedener Ansichten, wie beispielsweise einem Dunkelmodus, kann sich die Standard-Textfarbe unerwartet ändern. Daher wird empfohlen Hintergrund- und Textfarbe immer zusammen festzulegen. Über eine Lint-Regel können Artikel und Vorlagen mit diesem Problem identifiziert werden.
Auch bei der Nutzung von CSS-Variablen, sollten Text und Hintergrund immer zusammen festgelegt werden. Ansonsten könnte es zu unerwarteten Auswirkungen kommen, wenn z.B. eine Vorlage innerhalb einer anderen Vorlage oder einer Tabelle mit anderen Farbangaben verwendet wird.
Schlechtes Beispiel
Template:Example
<div style="background-color: yellow; padding: 16px;">Text</div>
Gutes Beispiel
Template:Example
<div style="background-color: yellow; color: #333; padding: 16px;">Text</div>
Nutze CSS-Variablen oder CSS-Design-Token mit Fallback für Hintergrundfarben
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.Bei der Verwendung von Inline-Stilen für Text- und Hintergrundfarben nutze die CSS-Design-Token, die von den Skins unterstützt werden. Eine Liste der Design-Token findest Du in der Codex-Dokumentation. Nutze Fallbacks für Skins die CSS-Variablen nicht unterstützen.
Innerhalb eines Gadgets kannst DU auch eigene CSS-Variablen definieren (z.B. das night mode gadget on English Wikivoyage).
Schlechtes Beispiel
<span style="font-size:0.95em; font-size:95%; color: #54595d;">A subscription is required to read this URL.</div>
Gutes Beispiel
In diesem Beispiel wird das Design-Token color-subtle genutzt, mit #54595d als Fallback-Farbe für den Fall, dass ein Skin die CSS-Variablen nicht unterstützt.
Das gibt Skins mit Dunkelmodus die nötigen Informationen um passende Farben anzubieten.
<!-- 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>
Überschreiben der Dunkelmodus-Stile / Deaktivieren der Dunkelmodus-Anpassungen
In der aktuellen Implementation des Page Content Service (genutzt in der Mobilansicht zur Anzeige der Artikel), funktioniert der Dunkelmodus indem die Farbe der meisten Elemente mithilfe des CSS-Attributs !important überschrieben werden.
Dies passiert wegen der großen Zahl an Vorlagen und Elemente mit expliziten Inline-Stilen.
In der Webversion passiert dies in geringerem Umfang, hauptsächlich innerhalb von , und ähnlichen häufig verwendeten Vorlagen.
In manchen Fällen kann dieses Überschreiben der Farbangaben ungerechtfertigt sein oder Autoren damit nicht einverstanden sein.
In solche Fällen kann durch Einfügen der Klasse notheme das Überschreiben verhindert werden.
Dadurch wird ein Element unabhängig vom verwendeten Theme (z.B. dunkel/hell/sepia) immer exakt gleich dargestellt.
Schlechtes Beispiel
In diesem Beispiel wird ein Theme die Farben überschreiben (also im Dunkelmodus invertieren):
<div class="pane">Text</div>
Gutes Beispiel
In diesem Beispiel wird explizit aufgefordert die Farben nicht zu überschreiben.
<div class="pane notheme mw-no-invert">Text</div>
Filter für dunkle Bilder mit transparentem Hintergrund
Manche Bilder (z.B. Signaturen in Infoboxen) haben schwarzen Inhalt mit transparentem Hintergund.
Im Dunkelmodus werden diese unlesbar weil der schwarze Inhalt auf schwarzem Hintergrund dargestellt wird.
Um dies zu beheben kannst Du mit der Klasse skin-invert bzw. skin-invert-image einen CSS-Invert-Filter hinzufügen.
Wenn ein Bild mit einer Beschriftung versehen ist, muss die Klasse skin-invert-image verwendet werden, um zu verhindern, dass die Beschriftung mit invertiert wird.
Schlechtes Beispiel
In diesem Beispiel wird die schwarze Signatur im Dunkelmodus auf schwarzem Hintergrund dargestellt.
[[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.]]
Gutes Beispiel
In diesem Beispiel werden die Farben invertiert, sodass die Signatur weiß dargestellt wird.
[[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.
Vermeide background: none und background: transparent
Diese sind in der Regel unnötig und stören die automatischen Anpassungen für den Dunkelmodus. Sie sollten entfernt oder wo notwendig in TemplateStyles ausgelagert werden.
Schlechtes Beispiel
<div style="background: transparent;">Text with transparent background</div>
Gutes Beispiel
Die Hintergrundangabe ist unnötig.
<div>Text with transparent background</div>
Akzeptables Beispiel
Wenn der Hintergrund nötig ist definiere auch color: inherit.
<div style="background: transparent; color: inherit;">Text with transparent background</div>
Advice for editors building alternative themes
More generally, we want to encourage editors to think of templates and articles as being agnostic with respect to theming and styles. In addition to night mode, there can be any number of potential color themes, and indeed the Wikipedia mobile apps (via the Page Content Service) already offer a "sepia" theme, as well as a "black" theme intended for power-saving OLED screens.
To invert or not to invert?
An invert using CSS filters provides a quick way to convert content designed in a light theme into a darker theme.
While we cannot recommend this approach for all content, it is still a useful tool that can often be utilized safely and cheaply.
The Wikipedia night mode gadget uses the invert CSS filter property to style content.
You can prevent an element from having colors inverted by adding the mw-no-invert class.
You can also use the skin-invert class to request that the content is inverted by the software when available.
Consider patterns rather than background colors
Colorblind readers can have difficulties telling apart and recognizing small colored items. In articles, consider using patterns rather than, or in addition to, color where appropriate. Ideally, where the pattern is separate from the text. Consider using monochrome CSS Background Patterns and reading about how Trello introduced a colorblind friendly mode.
Bad example
Template:Example/styles.css
html.skin-theme-clientpref-night .ib-youtube-above {
background-color: #B60000;
color: white;
}
Good example
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.
Disabled text does not necessarily need to meet color contrast guidelines
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.
The page looks fine to me, despite not following these rules, why?
To reduce the amount of initial work that is required for wikis to adopt night mode, various generalized solutions may have been applied for the time being to pages to help them comply with night mode. These styles will eventually be removed, when wikis have adapted to the new theme.
These are listed here:
- 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.
Examples
The following tickets explain fixes for various namespaces/templates and types of pages that were applied to a single project. They may be useful to other projects with similar templates or outdated copies of those templates.
Please be sure to read the associated discussion – and ask questions if you have any so other projects can benefit from sharing expertise.
General issues
- Links inside table rows with background colors: phab:T360844
- Tables with alternating row colors T358003
- Transparent SVGs in infoboxes Example fix
Portals
- Portal:Current events
Templates / modules
- 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
- Template:Key press
Messages
Please review the following messages on your wiki: