Liebe Selfer, > > das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen: > > * [Hilfe:MediaWiki/Vorlagen](https://wiki-test.selfhtml.org/wiki/Hilfe:MediaWiki/Vorlagen) - alle Boxen mal auf einer Seite im **Test-Wiki** Ich habe das HTML-Markup geändert:[^1] > ~~~ HTML <div role="note"> <p role="heading">Hinweis</p> <div>...</div> </div> ~~~ > [^1]: Das `role="note"` habe ich aus [dieser Seite](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) 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. > # Dark Mode > Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten. Hier ein erstes Zwischenergebnis: [**bplaced.net/makeover**](http://svg.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, `#003`war 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](http://svg.bplaced.net/makeover/#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](http://svg.bplaced.net/makeover/#Verlinkungen_und_Navigationen) haben die Begriffsklärungen ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden. 6. die [Beispiele](http://svg.bplaced.net/makeover/#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 [](/images/f870594c-6eb7-11ec-8f6d-b42e9947ef30.png) 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Liebe Selfer, > > das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen: > > * [Hilfe:MediaWiki/Vorlagen](https://wiki-test.selfhtml.org/wiki/Hilfe:MediaWiki/Vorlagen) - alle Boxen mal auf einer Seite im **Test-Wiki** Ich habe das HTML-Markup geändert:[^1] > ~~~ HTML <div role="note"> <p role="heading">Hinweis</p> <div>...</div> </div> ~~~ > [^1]: Das `role="note"` habe ich aus [dieser Seite](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) 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. > # Dark Mode > Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten. Hier ein erstes Zwischenergebnis: [**bplaced.net/makeover**](http://svg.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, `#003`war 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](http://svg.bplaced.net/makeover/#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. die [Verlinkungen und Navigationen](http://svg.bplaced.net/makeover/#Verlinkungen_und_Navigationen) ebenfalls. Die Begriffsklärungen haben ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden. 6. die [Beispiele](http://svg.bplaced.net/makeover/#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 [](/images/f870594c-6eb7-11ec-8f6d-b42e9947ef30.png) 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Liebe Selfer, > > das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen: > > * [Hilfe:MediaWiki/Vorlagen](https://wiki-test.selfhtml.org/wiki/Hilfe:MediaWiki/Vorlagen) - alle Boxen mal auf einer Seite im **Test-Wiki** Ich habe das HTML-Markup geändert:[^1] > ~~~ HTML <div role="note"> <p role="heading">Hinweis</p> <div>...</div> </div> ~~~ > [^1]: Das `role="note"` habe ich aus [dieser Seite](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) 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. > # CSS > > Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten. Dazu müssten wir uns überlegen, ob wir die bisherigen Vorlagen so lassen wollen: > > * Hinweis, Achtung und Info haben einen massiven Titelbalken und ein pastellfarbenes Textfeld. Die meisten Boxen wie Empfehlung, Beachten, Hauptartikel, Begriffsklärung 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"`) Auch die Begriffsklärungen haben ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden. ToDo-Boxen sind nicht mehr blau (Linkfarbe), sondern rot. # Dark Mode Hier ein erstes Zwischenergebnis: [**bplaced.net/makeover**](http://svg.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, `#003`war 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](http://svg.bplaced.net/makeover/#Hinweise_und_Warn-Boxen) sind imho ok. 5. die [Verlinkungen und Navigationen](http://svg.bplaced.net/makeover/#Verlinkungen_und_Navigationen) ebenfalls. 6. die [Beispiele](http://svg.bplaced.net/makeover/#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 [](/images/f870594c-6eb7-11ec-8f6d-b42e9947ef30.png) 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Liebe Selfer, > > das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen: > > * [Hilfe:MediaWiki/Vorlagen](https://wiki-test.selfhtml.org/wiki/Hilfe:MediaWiki/Vorlagen) - alle Boxen mal auf einer Seite im **Test-Wiki** Ich habe das HTML-Markup geändert:[^1] > ~~~ HTML <div role="note"> <p role="heading">Hinweis</p> <div>...</div> </div> ~~~ > [^1]: Das `role="note"` habe ich aus [dieser Seite](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) 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. > # CSS > > Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten. Dazu müssten wir uns überlegen, ob wir die bisherigen Vorlagen so lassen wollen: > > * Hinweis, Achtung und Info haben einen massiven Titelbalken und ein pastellfarbenes Textfeld. Die meisten Boxen wie Empfehlung, Beachten, Hauptartikel, Begriffsklärung 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"`) Auch die Begriffsklärungen haben ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden. ToDo-Boxen sind nicht mehr blau (Linkfarbe), sondern rot. # Dark Mode Hier ein erstes Zwischenergebnis: [**bplaced.net/makeover**](http://svg.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, `#003`war 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](http://svg.bplaced.net/makeover/#Hinweise_und_Warn-Boxen) sind imho ok. 5. die [Verlinkungen und Navigationen](http://svg.bplaced.net/makeover/#Verlinkungen_und_Navigationen) ebenfalls. 6. die [Beispiele](http://svg.bplaced.net/makeover/#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 [](/images/f870594c-6eb7-11ec-8f6d-b42e9947ef30.png) 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Liebe Selfer, > > das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen: > > * [Hilfe:MediaWiki/Vorlagen](https://wiki-test.selfhtml.org/wiki/Hilfe:MediaWiki/Vorlagen) - alle Boxen mal auf einer Seite im **Test-Wiki** Ich habe das HTML-Markup geändert:[^1] > ~~~ HTML <div role="note"> <p role="heading">Hinweis</p> <div>...</div> </div> ~~~ > [^1]: Das `role="note"` habe ich aus [dieser Seite](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) 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. > # CSS > > Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten. Dazu müssten wir uns überlegen, ob wir die bisherigen Vorlagen so lassen wollen: > > * Hinweis, Achtung und Info haben einen massiven Titelbalken und ein pastellfarbenes Textfeld. Die meisten Boxen wie Empfehlung, Beachten, Hauptartikel, Begriffsklärung 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"`) Auch die Begriffsklärungen haben ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden. ToDo-Boxen sind nicht mehr blau (Linkfarbe), sondern rot. # Dark Mode Hier ein erstes Zwischenergebnis: [**bplaced.net/makeover**](http://svg.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, `#003`war 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](http://svg.bplaced.net/makeover/#Hinweise_und_Warn-Boxen) sind imho ok. 5. die [Verlinkungen und Navigationen](http://svg.bplaced.net/makeover/#Verlinkungen_und_Navigationen) ebenfalls. 6. die [Beispiele](http://svg.bplaced.net/makeover/#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 [](/images/f870594c-6eb7-11ec-8f6d-b42e9947ef30.png) Weitere Vorgehensweise: 1. Farbvorschläge + Verbesserungen einarbeiten. (Die Farbpalette kann als custom properties definiert und im Dunklen Modus dann bequem aufgerufen werrden. 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Liebe Selfer, > > das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen: > > * [Hilfe:MediaWiki/Vorlagen](https://wiki-test.selfhtml.org/wiki/Hilfe:MediaWiki/Vorlagen) - alle Boxen mal auf einer Seite im **Test-Wiki** Ich habe das HTML-Markup geändert:[^1] > ~~~ HTML <div role="note"> <p role="heading">Hinweis</p> <div>...</div> </div> ~~~ > [^1]: Das `role="note"` habe ich aus [dieser Seite](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) 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. > # CSS > > Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten. Dazu müssten wir uns überlegen, ob wir die bisherigen Vorlagen so lassen wollen: > > * Hinweis, Achtung und Info haben einen massiven Titelbalken und ein pastellfarbenes Textfeld. Die meisten Boxen wie Empfehlung, Beachten, Hauptartikel, Begriffsklärung 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"`) Auch die Begriffsklärungen haben ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden. ToDo-Boxen sind nicht mehr blau (Linkfarbe), sondern rot. # Dark Mode Hier ein erstes Zwischenergebnis: [**bplaced.net/makeover**](http://svg.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, `#003`war 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 "S2 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](http://svg.bplaced.net/makeover/#Hinweise_und_Warn-Boxen) sind imho ok. 5. die [Verlinkungen und Navigationen](http://svg.bplaced.net/makeover/#Verlinkungen_und_Navigationen) ebenfalls. 6. die [Beispiele](http://svg.bplaced.net/makeover/#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 [](/images/f870594c-6eb7-11ec-8f6d-b42e9947ef30.png) Weitere Vorgehensweise: 1. Farbvorschläge + Verbesserungen einarbeiten. (Die Farbpalette kann als custom properties definiert und im Dunklen Modus dann bequem aufgerufen werrden. 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Liebe Selfer, > > das angedachte Makeover besteht ja aus vielen Komponenten. Eine davon sind die im SELF-Wiki verwendeten Vorlagen: > > * [Hilfe:MediaWiki/Vorlagen](https://wiki-test.selfhtml.org/wiki/Hilfe:MediaWiki/Vorlagen) - alle Boxen mal auf einer Seite im **Test-Wiki** Ich habe das HTML-Markup geändert:[^1] > ~~~ HTML <div role="note"> <p role="heading">Hinweis</p> <div>...</div> </div> ~~~ > [^1]: Das `role="note"` habe ich aus [dieser Seite](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-scheme) 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. > # CSS > > Mittelfristig wollen wir ja neben dem „klassischen“ weißen Hintergrund auch einen Dark Mode anbieten. Dazu müssten wir uns überlegen, ob wir die bisherigen Vorlagen so lassen wollen: > > * Hinweis, Achtung und Info haben einen massiven Titelbalken und ein pastellfarbenes Textfeld. Die meisten Boxen wie Empfehlung, Beachten, Hauptartikel, Begriffsklärung 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"`) Auch die Begriffsklärungen haben ihren Hintergrund verloren. Dafür habe ich in der Wikipedia ein passendes Icon gefunden. ToDo-Boxen sind nicht mehr blau (Linkfarbe), sondern rot. # Dark Mode Hier ein erstes Zwischenergebnis: [**bplaced.net/makeover**](http://svg.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, `#003`war 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 "S2 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](http://svg.bplaced.net/makeover/#Hinweise_und_Warn-Boxen) sind imho ok. 5. die [Verlinkungen und Navigationen](http://svg.bplaced.net/makeover/#Verlinkungen_und_Navigationen) ebenfalls. 6. die [Beispiele](http://svg.bplaced.net/makeover/#Beispiele) haben ja CodeSnippets mit Szntax/Highlighting. Entweder frben wir die Boxen im Dunklen modus gelb ein, was evtl. noch yu grell wirkt / oder wir entwickeln ein eigenes CSS f[r die einylenen 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 [](/images/f870594c-6eb7-11ec-8f6d-b42e9947ef30.png) Weitere Vorgehensweise: 1. Farbvorschläge + Verbesserungen einarbeiten 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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“