[css-flexbox-1] Make various examples more darkmode-aware. Fixes #6387

Author: tabatkins

css-flexbox-1/Overview.bs

@@ -64,6 +64,8 @@ spec: css-pseudo-4; type: selector;
 </pre>
 
 <style>
+img { background: transparent; }
+
 code.one-line { white-space: pre;  }
 .code-and-figure {
 	display: table;
@@ -93,6 +95,7 @@ ol.continue > li::before { content: counter(list) "."; position: absolute; left:
 	margin: 0 auto 1em;
 	border-spacing: .5em 0;
 	min-width: 672px;
+	color: black;
 }
 #overview-example > .col {
 	display: table-column;
@@ -142,15 +145,15 @@ ol.continue > li::before { content: counter(list) "."; position: absolute; left:
 #visibility-collapse-example {
 	display: table;
 	width: 100%;
-	box-shadow: 3px 3px 10px #333;
+	box-shadow: 3px 3px 10px canvas;
 }
 #visibility-collapse-example > article,
 #visibility-collapse-example > nav {
 	display: table-cell;
 }
 #visibility-collapse-example > article {
 	width: 100%;
-	background: white;
+	background: canvas;
 }
 #visibility-collapse-example ul,
 #visibility-collapse-example li {
@@ -202,9 +205,11 @@ ol.continue > li::before { content: counter(list) "."; position: absolute; left:
 	margin: 0;
 	border-radius: .3em;
 }
+@media (prefers-color-scheme: dark) {
+	#auto-bar { background: #444; }
+}
 #auto-bar > li {
 	float: left;
-	color: black;
 	margin: 0;
 }
 #auto-bar > li:first-child:after,