Hallo, so, ich habe jetzt eine HTML-Seite und ein SVG-Bild erstellt, worin sich das Farbschema auswählen lässt. Im SVG habe ich dafür per foreignObject ein HTML-Fragment mit Fieldset und Radiobuttons drin. Dumm nur, dass das den Wiki-Upload verhindert - Mediawiki ist hier absolut paranoid und meint, der IE könnte das als HTML erkennen und das wäre gefährlich und deshalb ist das FERR-PO-TEN! Das betrifft aber nur das Labor-SVG, für unsere Wiki-SVGs ist das nicht von Belang. Glaub ich. Also steht das SVG jetzt unter <https://wiki.selfhtml.org/local/color-scheme-selectable.svg>. Das foreignObject darin ist ein fieldset, dessen Hintergrundfarbe per light-dark() das per color-scheme selektierte Farbschema zeigt. Die Radiobuttons darin werden vom SVG-Stylesheet abgefragt, um das color-scheme des SVG zu ändern. Hinzu kommt ein <text>-Element, in dem <tspan>-Elemente je nach @media (prefers-color-scheme)-Wert sichtbar werden. Das HTML-Dokument steht im Beispielspace als Beispiel:Color-Scheme-Selectable.html. [[Ansehen]](https://wiki.selfhtml.org/wiki/Beispiel:Color-Scheme-Selectable.html) - [[Ausprobieren]](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Color-Scheme-Selectable.html) Das HTML-Dokument verwendet ähnliches CSS zur Auswahl des color-scheme. Wenn das color-scheme von HTML- und SVG-Dokument nicht übereinstimmen, erzeugt der Browser für das SVG einen weißen oder schwarzen Hintergrund, je nach color-scheme des SVG. Ist im HTML **kein** color-scheme gesetzt, führt ein Default-Darkmode aus dem Betriebssystem nicht zur Auswahl der dunklen Seite der light-dark()-Macht, deshalb hat das SVG dann ebenfalls den dunklen Hintergrund. Setzt man HTML und SVG beide auf light oder dark, wird der Hintergrund des SVG transparent. Setzt man das SVG auf `color-scheme: light dark`, folgt es dem color-scheme des HTML Dokuments. Das ist aber laut caniuse kein spezifiziertes Verhalten! Allerdings ist das nicht ganz perfekt. Ich habe das Beispiel so konstruiert, dass das HTML zunächst KEIN color-scheme und das SVG zunächst color-scheme:dark hat. Setzt man nun HTML auf light, dann das SVG auf light und ändert DANN das HTML auf dark, sollte man erwarten, dass das SVG einen weißen Hintergrund bekommt. Das tut es in Firefox, aber nicht in Chrome. Erst, wenn man in Chrome das SVG einmal nach dark schaltet und dann nach light zurück, bekommt es den weißen Hintergrund. Das würde ich als Chrome-Bug sehen. Oh Mann, oh Mann… Spannende Frage ist nun, wie sich Safari damit verhält. Chrome und FF kann ich ja selbst probieren. _Rolf_ -- sumpsi - posui - obstruxi

Hallo, so, ich habe jetzt eine HTML-Seite und ein SVG-Bild erstellt, worin sich das Farbschema auswählen lässt. Im SVG habe ich dafür per foreignObject ein HTML-Fragment mit Fieldset und Radiobuttons drin. Dumm nur, dass das den Wiki-Upload verhindert - Mediawiki ist hier absolut paranoid und meint, der IE könnte das als HTML erkennen und das wäre gefährlich und deshalb ist das FERR-PO-TEN! Das betrifft aber nur das Labor-SVG, für unsere Wiki-SVGs ist das nicht von Belang. Glaub ich. Also steht das SVG jetzt unter <https://wiki.selfhtml.org/local/color-scheme-selectable.svg>. Das foreignObject darin ist ein fieldset, dessen Hintergrundfarbe per light-dark() das per color-scheme selektierte Farbschema zeigt. Die Radiobuttons darin werden vom SVG-Stylesheet abgefragt, um das color-scheme des SVG zu ändern. Hinzu kommt ein <text>-Element, in dem <tspan>-Elemente je nach @media (prefers-color-scheme)-Wert sichtbar werden. Das HTML-Dokument steht im Beispielspace als Beispiel:Color-Scheme-Selectable.html. [[Ansehen]](https://wiki.selfhtml.org/wiki/Beispiel:Color-Scheme-Selectable.html) - [[Ausprobieren]](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Color-Scheme-Selectable.html) Das HTML-Dokument verwendet ähnliches CSS zur Auswahl des color-scheme. Wenn das color-scheme von HTML- und SVG-Dokument nicht übereinstimmen, erzeugt der Browser für das SVG einen weißen oder schwarzen Hintergrund, je nach color-scheme des SVG. Ist im HTML **kein** color-scheme gesetzt, führt ein Default-Darkmode aus dem Betriebssystem nicht zur Auswahl der dunklen Seite der light-dark()-Macht, deshalb hat das SVG dann ebenfalls den dunklen Hintergrund. Setzt man HTML und SVG beide auf light oder dark, wird der Hintergrund des SVG transparent. Setzt man das SVG auf color-scheme: light-dark, folgt es dem color-scheme des HTML Dokuments. Das ist aber laut caniuse kein spezifiziertes Verhalten! Allerdings ist das nicht ganz perfekt. Ich habe das Beispiel so konstruiert, dass das HTML zunächst KEIN color-scheme und das SVG zunächst color-scheme:dark hat. Setzt man nun HTML auf light, dann das SVG auf light und ändert DANN das HTML auf dark, sollte man erwarten, dass das SVG einen weißen Hintergrund bekommt. Das tut es in Firefox, aber nicht in Chrome. Erst, wenn man in Chrome das SVG einmal nach dark schaltet und dann nach light zurück, bekommt es den weißen Hintergrund. Das würde ich als Chrome-Bug sehen. Oh Mann, oh Mann… Spannende Frage ist nun, wie sich Safari damit verhält. Chrome und FF kann ich ja selbst probieren. _Rolf_ -- sumpsi - posui - obstruxi

Hallo, so, ich habe jetzt eine HTML-Seite und ein SVG-Bild erstellt, worin sich das Farbschema auswählen lässt. Im SVG habe ich dafür per foreignObject ein HTML-Fragment mit Fieldset und Radiobuttons drin. Dumm nur, dass das den Wiki-Upload verhindert - Mediawiki ist hier absolut paranoid und meint, der IE könnte das als HTML erkennen und das wäre gefährlich und deshalb ist das FERR-PO-TEN! Also steht das SVG jetzt unter <https://wiki.selfhtml.org/local/color-scheme-selectable.svg>. Das foreignObject darin ist ein fieldset, dessen Hintergrundfarbe per light-dark() das per color-scheme selektierte Farbschema zeigt. Die Radiobuttons darin werden vom SVG-Stylesheet abgefragt, um das color-scheme des SVG zu ändern. Hinzu kommt ein <text>-Element, in dem <tspan>-Elemente je nach @media (prefers-color-scheme)-Wert sichtbar werden. Das HTML-Dokument steht im Beispielspace als Beispiel:Color-Scheme-Selectable.html. [[Ansehen]](https://wiki.selfhtml.org/wiki/Beispiel:Color-Scheme-Selectable.html) - [[Ausprobieren]](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Color-Scheme-Selectable.html) Das HTML-Dokument verwendet ähnliches CSS zur Auswahl des color-scheme. Wenn das color-scheme von HTML- und SVG-Dokument nicht übereinstimmen, erzeugt der Browser für das SVG einen weißen oder schwarzen Hintergrund, je nach color-scheme des SVG. Ist im HTML **kein** color-scheme gesetzt, führt ein Default-Darkmode aus dem Betriebssystem nicht zur Auswahl der dunklen Seite der light-dark()-Macht, deshalb hat das SVG dann ebenfalls den dunklen Hintergrund. Setzt man HTML und SVG beide auf light oder dark, wird der Hintergrund des SVG transparent. Setzt man das SVG auf color-scheme: light-dark, folgt es dem color-scheme des HTML Dokuments. Das ist aber laut caniuse kein spezifiziertes Verhalten! Allerdings ist das nicht ganz perfekt. Ich habe das Beispiel so konstruiert, dass das HTML zunächst KEIN color-scheme und das SVG zunächst color-scheme:dark hat. Setzt man nun HTML auf light, dann das SVG auf light und ändert DANN das HTML auf dark, sollte man erwarten, dass das SVG einen weißen Hintergrund bekommt. Das tut es in Firefox, aber nicht in Chrome. Erst, wenn man in Chrome das SVG einmal nach dark schaltet und dann nach light zurück, bekommt es den weißen Hintergrund. Das würde ich als Chrome-Bug sehen. Oh Mann, oh Mann… Spannende Frage ist nun, wie sich Safari damit verhält. Chrome und FF kann ich ja selbst probieren. _Rolf_ -- sumpsi - posui - obstruxi

Hallo, so, ich habe jetzt eine HTML-Seite und ein SVG-Bild erstellt, worin sich das Farbschema auswählen lässt. Im SVG habe ich dafür per foreignObject ein HTML-Fragment mit Fieldset und Radiobuttons drin, das den Wiki-Upload verhindert - Mediawiki ist hier absolut paranoid und meint, der IE könnte das als HTML erkennen und das wäre gefährlich und deshalb ist das FERR-PO-TEN! Also steht das SVG jetzt unter <https://wiki.selfhtml.org/local/color-scheme-selectable.svg>. Das foreignObject darin ist ein fieldset, dessen Hintergrundfarbe per light-dark() das per color-scheme selektierte Farbschema zeigt. Die Radiobuttons darin werden vom SVG-Stylesheet abgefragt, um das color-scheme des SVG zu ändern. Hinzu kommt ein <text>-Element, in dem <tspan>-Elemente je nach @media (prefers-color-scheme)-Wert sichtbar werden. Das HTML-Dokument steht im Beispielspace als Beispiel:Color-Scheme-Selectable.html. [[Ansehen]](https://wiki.selfhtml.org/wiki/Beispiel:Color-Scheme-Selectable.html) - [[Ausprobieren]](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Color-Scheme-Selectable.html) Das HTML-Dokument verwendet ähnliches CSS zur Auswahl des color-scheme. Wenn das color-scheme von HTML- und SVG-Dokument nicht übereinstimmen, erzeugt der Browser für das SVG einen weißen oder schwarzen Hintergrund, je nach color-scheme des SVG. Ist im HTML **kein** color-scheme gesetzt, führt ein Default-Darkmode aus dem Betriebssystem nicht zur Auswahl der dunklen Seite der light-dark()-Macht, deshalb hat das SVG dann ebenfalls den dunklen Hintergrund. Setzt man HTML und SVG beide auf light oder dark, wird der Hintergrund des SVG transparent. Setzt man das SVG auf color-scheme: light-dark, folgt es dem color-scheme des HTML Dokuments. Das ist aber laut caniuse kein spezifiziertes Verhalten! Allerdings ist das nicht ganz perfekt. Ich habe das Beispiel so konstruiert, dass das HTML zunächst KEIN color-scheme und das SVG zunächst color-scheme:dark hat. Setzt man nun HTML auf light, dann das SVG auf light und ändert DANN das HTML auf dark, sollte man erwarten, dass das SVG einen weißen Hintergrund bekommt. Das tut es in Firefox, aber nicht in Chrome. Erst, wenn man in Chrome das SVG einmal nach dark schaltet und dann nach light zurück, bekommt es den weißen Hintergrund. Das würde ich als Chrome-Bug sehen. Oh Mann, oh Mann… Spannende Frage ist nun, wie sich Safari damit verhält. Chrome und FF kann ich ja selbst probieren. _Rolf_ -- sumpsi - posui - obstruxi

Hallo, so, ich habe jetzt eine HTML-Seite und ein SVG-Bild erstellt, worin sich das Farbschema auswählen lässt. Im SVG habe ich dafür per foreignObject ein HTML-Fragment mit Fieldset und Radiobuttons drin, das den Wiki-Upload verhindert - Mediawiki ist hier absolut paranoid und meint, der IE könnte das als HTML erkennen und das wäre gefährlich und deshalb ist das FERR-PO-TEN! Also steht das SVG jetzt unter <https://wiki.selfhtml.org/local/color-scheme-selectable.svg>. Das foreignObject darin ist ein fieldset, dessen Hintergrundfarbe per light-dark() das per color-scheme selektierte Farbschema zeigt. Die Radiobuttons darin werden vom SVG-Stylesheet abgefragt, um das color-scheme des SVG zu ändern. Hinzu kommt ein <text>-Element, in dem <tspan>-Elemente je nach @media (prefers-color-scheme)-Wert sichtbar werden. Das HTML-Dokument steht im Beispielspace als Beispiel:Color-Scheme-Selectable.html. [[Ansehen]](https://wiki.selfhtml.org/wiki/Beispiel:Color-Scheme-Selectable.html) - [[Ausprobieren]](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Color-Scheme-Selectable.html) Das HTML-Dokument verwendet ähnliches CSS zur Auswahl des color-scheme. Wenn das color-scheme von HTML- und SVG-Dokument nicht übereinstimmen, erzeugt der Browser für das SVG einen weißen oder schwarzen Hintergrund, je nach color-scheme des SVG. Ist im HTML **kein** color-scheme gesetzt, führt ein Default-Darkmode aus dem Betriebssystem nicht zur Auswahl der dunklen Seite der light-dark()-Macht, deshalb hat das SVG dann ebenfalls den dunklen Hintergrund. Setzt man HTML und SVG beide auf light oder dark, wird der Hintergrund des SVG transparent. Setzt man das SVG auf color-scheme: light-dark, folgt es dem color-scheme des HTML Dokuments. Das ist aber laut caniuse kein spezifiziertes Verhalten! Allerdings ist das nicht ganz perfekt. Ich habe das Beispiel so konstruiert, dass das HTML zunächst KEIN color-scheme und das SVG zunächst color-scheme:dark hat. Setzt man nun HTML auf light, dann das SVG auf light und ändert DANN das HTML auf dark, sollte man erwarten, dass das SVG einen weißen Hintergrund bekommt. Das tut es in Firefox, aber nicht in Chrome. Erst, wenn man in Chrome das SVG einmal nach dark schaltet und dann nach light zurück, bekommt es den weißen Hintergrund. Das würde ich als Chrome-Bug sehen. Oh Mann, oh Mann… Spannende Frage ist nun, wie sich Safari damit verhält. Chrome und FF kann ich ja selbst probieren. _Rolf_ -- sumpsi - posui - obstruxi

Hallo, so, ich habe jetzt eine HTML-Seite und ein SVG-Bild erstellt, worin sich das Farbschema auswählen lässt. Im SVG habe ich dafür per foreignObject ein HTML-Fragment mit Fieldset und Radiobuttons drin, das den Wiki-Upload verhindert - Mediawiki ist hier absolut paranoid und meint, der IE könnte das als HTML erkennen und das wäre gefährlich und deshalb ist das FERR-PO-TEN! Also steht das SVG jetzt unter <https://wiki.selfhtml.org/local/color-scheme-selectable.svg>. Das foreignObject darin ist ein fieldset, dessen Hintergrundfarbe per light-dark() das per color-scheme selektierte Farbschema zeigt. Die Radiobuttons darin werden vom SVG-Stylesheet abgefragt, um das color-scheme des SVG zu ändern. Hinzu kommt ein <text>-Element, in dem <tspan>-Elemente je nach @media (prefers-color-scheme)-Wert sichtbar werden. Das HTML-Dokument steht im Beispielspace als Beispiel:Color-Scheme-Selectable.html. [[Ansehen]](https://wiki.selfhtml.org/wiki/Beispiel:Color-Scheme-Selectable.html) - [[Ausprobieren]](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Color-Scheme-Selectable.html) Das HTML-Dokument verwendet ähnliches CSS zur Auswahl des color-scheme. Wenn das color-scheme von HTML- und SVG-Dokument nicht übereinstimmen, erzeugt der Browser für das SVG einen weißen oder schwarzen Hintergrund, je nach color-scheme des SVG. Ist im HTML **kein** color-scheme gesetzt, führt ein Default-Darkmode aus dem Betriebssystem nicht zur Auswahl der dunklen Seite der light-dark()-Macht, deshalb hat das SVG dann ebenfalls den dunklen Hintergrund. Setzt man HTML und SVG beide auf light oder dark, wird der Hintergrund des SVG transparent. Setzt man das SVG auf color-scheme: light-dark, folgt es dem color-scheme des HTML Dokuments. Das ist aber laut caniuse kein spezifiziertes Verhalten! Allerdings ist das nicht ganz perfekt. Ich habe das Beispiel so konstruiert, dass das HTML zunächst KEIN color-scheme und das SVG zunächst color-scheme:dark hat. Setzt man nun HTML auf light, dann das SVG auf light und ändert DANN das HTML auf dark, sollte man erwarten, dass das SVG einen weißen Hintergrund bekommt. Das tut es in Firefox, aber nicht in Chrome. Erst, wenn man in Chrome das SVG einmal nach dark schaltet und dann nach light zurück, bekommt es den weißen Hintergrund. Das würde ich als Chrome-Bug sehen. Oh Mann, oh Mann… _Rolf_ -- sumpsi - posui - obstruxi