Add dark mode

Author: hugovk

index.html

@@ -14,6 +14,39 @@
         a.btn:last-child{border-bottom-width: 1px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
         pre {text-align: left;}
         footer{text-align: center;}
+        @media (prefers-color-scheme: dark) {
+          body {
+            color: #ccc;
+            background: black;
+          }
+          code, pre {
+            color: #ccc;
+            background: #222;
+          }
+          a {
+            color: #5bf;
+          }
+          a:hover,
+          a:hover div {
+            color: black;
+            background-color: #5bf;
+            outline: 0.05em solid #5bf;
+          }
+          .btn-default {
+            color: #ccc;
+            background: black;
+            border-color: #222;
+          }
+          .btn-default:hover,
+          .btn-default:focus,
+          .btn-default:active,
+          .btn-default.active,
+          .open.dropdown-toggle.btn-default {
+            color: #ccc;
+            background: #222;
+            border-color: #333;
+          }
+        }
     </style>
     <title>Python Wheels</title>
 </head>

svg_wheel.py

@@ -3,15 +3,11 @@
 import xml.etree.ElementTree as et
 
 HEADERS = b"""<?xml version=\"1.0\" standalone=\"no\"?>
+<?xml-stylesheet href="wheel.css" type="text/css"?>
 <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"
 \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
 """
 
-STYLES = """
-.success { stroke: #4CAE4C; stroke-width: 1; fill: #5CB85C; }
-.default { stroke: #cccccc; stroke-width: 1; fill: #ffffff; }
-"""
-
 PATH_TEMPLATE = """
 M {start_outer_x},{start_outer_y}
 A{outer_radius},{outer_radius} 0 0 1 {end_outer_x},{end_outer_y}
@@ -78,11 +74,11 @@ def angles(index, total):
 
 def add_fraction(wheel, packages, total):
     text_attributes = {
+        "class": "wheel-text",
         "text-anchor": "middle",
         "dominant-baseline": "central",
         "font-size": str(2 * OFFSET),
         "font-family": '"Helvetica Neue",Helvetica,Arial,sans-serif',
-        "fill": "#333333",
     }
 
     # Packages with some sort of wheel
@@ -109,7 +105,7 @@ def add_fraction(wheel, packages, total):
         y1=str(CENTER),
         x2=str(CENTER + FRACTION_LINE // 2),
         y2=str(CENTER),
-        attrib={"stroke": "#333333", "stroke-width": "2"},
+        attrib={"class": "wheel-line", "stroke-width": "2"},
     )
 
     # Total packages
@@ -133,9 +129,6 @@ def generate_svg_wheel(packages, total):
         version="1.1",
         xmlns="http://www.w3.org/2000/svg",
     )
-    style = et.SubElement(wheel, "style", attrib={"type": "text/css"})
-    style.text = STYLES
-
     add_annular_sectors(wheel, packages, total)
 
     add_fraction(wheel, packages, total)

wheel.css

@@ -0,0 +1,34 @@
+.success {
+  stroke: #4CAE4C;
+  stroke-width: 1;
+  fill: #5CB85C;
+}
+
+.default {
+  stroke: #cccccc;
+  stroke-width: 1;
+  fill: #ffffff;
+}
+
+line.wheel-line {
+  stroke: #333;
+}
+
+text.wheel-text {
+  fill: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  .default {
+    stroke: #222;
+    stroke-width: 1;
+    fill: black;
+  }
+  line.wheel-line {
+    stroke: #ccc;
+  }
+  text.wheel-text {
+    fill: #ccc;
+  }
+
+}