Makeover: Vorlagen im Dark Mode

[Matthias Scharwies]

Liebe Selfer,

das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen:

• Hilfe:MediaWiki/Vorlagen - alle Boxen mal auf einer Seite im Test-Wiki

Ich habe das HTML-Markup geändert:^[1]

<div role="note">
    <p role="heading">Hinweis</p>
    <div>...</div>
</div>

Dark Mode

Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten.

Hier ein erstes Zwischenergebnis: bplaced.net/makeover

Man kann mit den Entwicklertools (oder im OS) zwischen hellem oder dunklen Modus hin- und her schalten. Der helle Modus sieht eigentlich aus wie immer, die geänderten Vorlagen fallen imho nicht weiter auf.

Aber im Dunklen Modus:

1. Als Hintergrundfarbe wollen wir kein schwarz, #003war noch zu grell @Rolf B fand den Kompromiss #112. Wie findet ihr's?
2. Das S-Logo ist im hellen Modus transparent und für mich ein weißes "S". Deshalb stört mich das dunkle "S" im Dunklen Modus ein wenig - andere im Online-Stammtisch aber nicht.
3. Größtes Problem ist die Farbe der role="navigation"-Blöcke wie sidebar, TOC und Text-Info. Da müssen wir noch mal ran und besonders an Text- und Linkfarben, um ausreichende Kontraste zu erzielen.
4. die Hinweise und Warn-Boxen wie Empfehlung, Beachten, Hinweis, etc haben nur einen farbigen Randstreifen links.
   • Die roten Hinweisboxen gibt es nur für sicherheitskritische Hinweise; die grünen Hinweis-Boxen sind jetzt neutraler, einige wurden entweder zu {{Achtung| oder zu {{Info| (role="complementary")
   • ToDo-Boxen sind nicht mehr blau (Linkfarbe), sondern rot.
5. Bei den Verlinkungen und Navigationen haben die Begriffsklärungen ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden.
6. die Beispiele haben ja CodeSnippets mit Syntax-Highlighting. Entweder färben wir die Boxen im Dunklen Modus gelb ein, was evtl. noch zu grell wirkt - oder wir entwickeln ein eigenes CSS für die einzelnen Klassen.
7. Ganz unten gibt es die cat-links. Für die und das Breadcrumb-Menü oben habe ich noch keine Idee.
8. Oben rechts seht ihr zwei neue Buttons. Hier sollen die Navigationen dynamisch versteckt und nur auf button-Click geöffnet werden. Die sind zur Zeit noch ohne Funktion!

Ich habe die SELF/Farben mal in unterschiedlichen Helligkeitsstufen ausprobiert. Evtl. finden wir hier passende Farbtöne

Weitere Vorgehensweise:

1. Farbvorschläge + Verbesserungen einarbeiten. (Die Farbpalette kann als custom properties definiert und im Dunklen Modus dann bequem aufgerufen werden. Das können mittlerweile alle Browser!)
2. neues Skin erstellen, wobei wohl alles in JS im MediaWiki.Common.js möglich ist.
3. mehrere Wochen im Test-Wiki testen

Herzliche Grüße

Matthias Scharwies

---

1. Das role="note" habe ich aus dieser Seite der CSSWG übernommen. (Schaut euch die Seite im Seiteninspektor mal in hell und dunkel an!) Es wäre kürzer, müsste aber durch eine Klasse aside, attention, info etc ergänzt werden. ↩︎