Make favicon adaptive to light/dark color-scheme (#780)

laurens94 · web-flow · commit 8deb15856848 · 2026-02-22T12:44:54.000+01:00
diff --git a/css/default.css b/css/default.css
@@ -3,6 +3,7 @@ html {
   overflow-y: auto;
 }
 body {
+  color-scheme: light;
   background-color: white;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     />
     <meta name="viewport" content="width=device-width" />
     <title>overpass turbo</title>
-    <link rel="icon" type="image/svg+xml" href="./turbo.svg" />
+    <link rel="icon" type="image/svg+xml" href="./turbo.svg" sizes="any" />
     <!-- https://developers.facebook.com/docs/sharing/webmasters -->
     <meta property="og:title" content="overpass turbo" />
     <meta
diff --git a/turbo.svg b/turbo.svg
@@ -4,18 +4,27 @@
     <path
        d="M 15,8 A 7,7 0 1 1 1,8 7,7 0 1 1 15,8 z"
        id="circle"
-       style="fill:none;stroke:#000000;stroke-width:1.5" />
+       style="fill:none;stroke-width:1.5" />
     <path
        d="m 1,6 c 0,0 4.5,3 7,3 2.5,0 7,-3 7,-3"
        id="roundshape"
-       style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+       style="fill:none;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
     <path
        d="M 8,15 8,9"
        id="verticalbar"
-       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+       style="fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
     <path
        d="M 13,7.5 3,7.5"
        id="horizbar"
-       style="fill:none;stroke:#000000;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+       style="fill:none;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
   </g>
-</svg>
+  <style>
+    path {
+      stroke: #000000;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      path { stroke: #ffffff; }
+    }
+  </style>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ html {`
`3`	`3`	`overflow-y: auto;`
`4`	`4`	`}`
`5`	`5`	`body {`
	`6`	`+ color-scheme: light;`
`6`	`7`	`background-color: white;`
`7`	`8`	`font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;`
`8`	`9`	`}`