Ich habe das Gefühl das "einfach" kein Kriterium für eine Umsetzung ist
Stimmt. Vermutlich wäre es verständlicher gewesen zu schreiben: Wenn es einfach wäre, könnte es jeder. 
Um noch mal auf meine Idee mit den CSS-Variablen einzugehen, versuche ich hier mal das etwas ausführlicher darzulegen. Es sei dazu gesagt, dass ich versuche eher auf Verständlichkeit (für alle) als auf 100% technisch korrekte Begriffe zu setzen. Und nicht alles was ich schreibe muss exakt so im WSC zu finden sein, es sind nur Beispiele zur Erläuterung.
Bisher ist es so, dass u.a. die Farben in SCSS-Variablen "gespeichert" werden, z.B. $wcfContentBackground. Das ganze wird dann auf dem Server verarbeitet und im Stylesheet z.B. als
body {
background-color: #fff;
}abgelegt.
Problem an der Sache: Auf dem Server liegt jetzt fertiger CSS-Code. Wollte man jetzt auf einen im Browser oder Betriebssystem eingestellten Dark Mode reagieren, ginge das aktuell nur in dem die relevanten Deklarationen überschreibt. Im Worst Case heißt das: 100% Doppelter Code. Beispiel:
body {
background-color: fff;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #111;
}
}Würde man jetzt statt der SCSS-Variablen alle Werte in CSS-Variablen speichern, hätte man auf dem Server ein Stylesheet mit diesem Inhalt
body {
background-color: var(--wcfContentBackground);
}Irgendwo weiter oben in der Datei wäre die Variable definiert.
Man hätte jetzt also die Farben von den Variablen getrennt und die Ersetzung erfolgt erst im Browser. So könnte man dann auf Einstellungen im Browser reagieren ohne 100% doppelten Code zu haben.
Soweit erst mal die Vorarbeit.
Meine Idee wäre jetzt im ersten Schritt zu sagen: Ok, wir setzen erst mal auf CSS-Variablen, den SCSS Parser behalten wir (noch) bei. Es gibt aber im ersten Schritt noch keine zusätzlichen Eingabefelder für Farben, sodass sich der Entwicklungsaufwand auf WoltLabs Seite erst mal in Grenzen hält.
Dann hätte man zum Beispiel im Stileditor für wcfContentBackground #fff in die Farbpalette eingetragen und würde dann im zusätzlichen CSS noch hinterlegen
@media (prefers-color-scheme: dark) {
:root {
--wcfContentBackground: #000;
}
}Was man an zusätzlichen Feldern schaffen könnte: Einmal im Stil selbst einen Toggle für die Option "experimenteller Dark Mode Support" mit der Beschreibung "erfordert zusätzliches CSS". Diese Option würde dann ein zusätzliches Feld sichtbar machen, in das man noch ein Logo für den Dark Mode laden kann.
Das Logo selbst könnte man dann im Template so einbinden
<picture>
<source srcset="logo-light.png"
media="(prefers-color-scheme: light)">
<source srcset="logo-dark.png"
media="(prefers-color-scheme: dark)">
<img src="logo.png" alt="">
</picture>Das habe ich gerade mal in Firefox, Chromium und Safari getestet, keiner hat Probleme damit. An sich ist <picture> auch lange genug unterwegs und wenn prefers-color-scheme nicht weit genug verbreitet wäre, gäbe es diese Unterhaltung nicht.
Jetzt kann natürlich sagen: Das bläht den HTML-Code auf. An der einen Stelle. Aber wenn man Dinge mit Javascript löst, für die es CSS gibt, hat man aus meiner Sicht ganz andere Probleme.
Die restlichen Grafiken sind aus meiner Sicht i.d.R. nur Hintergrundgrafiken und werden per CSS eingebunden.
Ist das jetzt die perfekte Lösung? Vermutlich nicht. Aber es wäre ein Anfang und würde ein paar mehr Möglichkeiten schaffen. Der Nachteil für den Administrator ist dann im ersten Schritt natürlich erst mal das man nur eine Farbpalette sieht und sich die zweite im Code versteckt. Aber das wäre dann bei experimentellen Funktionen eben erst mal so. Wenn man das von Seiten WoltLabs und der Designer klar kommuniziert, sollte das kein allzu großes Problem sein. (Es wird natürlich wieder die üblichen Verdächtigen mit den üblichen Kommentaren geben.)
Hinsichtlich der Kompatibilität: Die hat man ohnehin schon mit 6.0 gebrochen. Dann kann man das auch gleich richtig machen. Denn wenn man das jetzt nicht macht, kommt das niemals. Zumal aus Designsicht eh nur ein Versionsupgrade wirklich problemlos kompatibel war (ich glaub 5.2 auf 5.3).
Und noch mal: Im ersten Schritt verkauft man das erst mal als experimentelle Funktion. Dann kann Erfahrung in der echten Welt sammeln.
Das ist jetzt doch etwas länger geworden als urspünglich gedacht. Sorry. Ich hoffe es ist verständlich was ich meine.
