Beispiel:Color-Scheme-Selectable-Dark.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wählbares Farbschema</title>
<style>
:root:has([name=scheme][value=light]:checked) {
color-scheme: light;
}
:root:has([name=scheme][value=dark]:checked) {
color-scheme: dark;
}
:root:has([name=scheme][value=both]:checked) {
color-scheme: light dark;
}
body {
max-width: 50em;
margin: auto;
color: light-dark(black, white);
background-color: light-dark(hsl(44 75% 80%), hsl(201 50% 15%));
}
h1 {
color: light-dark(saddlebrown, gold);
}
label {
display: block;
font-family: monospace;
user-select: none;
}
</style>
</head>
<body>
<h1>Color-Scheme in Haupt- und Kinddokument</h1>
<p>Diese Seite bindet eine SVG-Grafik als <code>object</code>-Element ein. Wenn das <code>color-scheme</code> von
HTML-Seite und SVG-Grafik nicht übereinstimmt, erzeugt der Browser einen schwarzen oder weiߥn Hintergrund,
je nach <code>color-scheme</code> des SVG.<p>
<p>Um diesen Effekt für Ihren Browser auszuprobieren, bieten diese Seite und das eingebundene SVG eine Checkbox
an, die per CSS das verwendete <code>color-scheme</code> anpasst.</p>
<fieldset>
<legend>Farbschema im HTML</legend>
<label><input name="scheme" value="none" type="radio"> <s>color-scheme</s></label>
<label><input name="scheme" value="light" type="radio"> :root { color-scheme: light; }</label>
<label><input name="scheme" value="dark" type="radio" checked> :root { color-scheme: dark; }</label>
<label><input name="scheme" value="both" type="radio"> :root { color-scheme: light dark; }</label>
</fieldset>
<fieldset>
<legend>Eingebettetes SVG</legend>
<!-- muss über /local oder src.selfhtml.org laufen, Wiki lässt Upload von SVG/HTML-Mix nicht zu -->
<object type="image/svg+xml" data="/local/color-scheme-selectable.svg" width="400">SVG fehlt!</object>
</fieldset>
<fieldset>
<legend>SVG als img Element</legend>
<!-- muss über /local oder src.selfhtml.org laufen, Wiki lässt Upload von SVG/HTML-Mix nicht zu -->
<img src="/local/color-scheme-selectable.svg" width="400" alt="Test-SVG" />
</fieldset>
</body>
</html>
