If browser is in dark-mode, ask for a dark background

dmullis · dmullis · commit 9f10b080b47d · 2024-07-17T14:03:34.000-07:00
As shown in Firefox by examples/*.svg.
diff --git a/examples/arrows.svg b/examples/arrows.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/big-grids.svg b/examples/big-grids.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/big-shapes.svg b/examples/big-shapes.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/circle.svg b/examples/circle.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/circuits.svg b/examples/circuits.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/complicated.svg b/examples/complicated.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/dot-grids.svg b/examples/dot-grids.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/edge-cases.svg b/examples/edge-cases.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/flow-chart.svg b/examples/flow-chart.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/graphics.svg b/examples/graphics.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/icons.svg b/examples/icons.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/large-nodes.svg b/examples/large-nodes.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/line-decorations.svg b/examples/line-decorations.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/line-ends.svg b/examples/line-ends.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/overlaps.svg b/examples/overlaps.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/regression.svg b/examples/regression.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/small-grids.svg b/examples/small-grids.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/small-nodes.svg b/examples/small-nodes.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/small-shapes.svg b/examples/small-shapes.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/tiny-grids.svg b/examples/tiny-grids.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/trees.svg b/examples/trees.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/examples/unicode.svg b/examples/unicode.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #FFFFFF;
    }
 }
diff --git a/goat.svg b/goat.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #EEF;
    }
 }
diff --git a/svg.go b/svg.go
@@ -21,6 +21,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: %s;
    }
 }
diff --git a/trees.mid-blue.svg b/trees.mid-blue.svg
@@ -5,6 +5,7 @@ svg {
 }
 @media (prefers-color-scheme: dark) {
    svg {
+      color-scheme: dark; /* ask the browser for a dark background */
       color: #2F81F7;
    }
 }
