index.html.in: simplify day/night toggle

Whatever problem was preventing us from swapping day/night colors via
CSS classes is gone. Or at least hiding in a browser that I don't have
in front of me.

diff --git a/index.html.in b/index.html.in
index 2c301cdeda5e79d45f69de3263c75daf6610271c..482fa1480cf51c6c646e1563996d1ac3b01b7b1d 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -57,6 +57,11 @@
         display: none;
       }
 
+      /* Night-time color for the sky (day is default). */
+      #sky.night {
+        fill: #143b66;
+      }
+
       /* The blinking fade in/out animation for the ticket date and time */
       @keyframes blink {
         25% { opacity: 0.5; }
@@ -711,27 +716,16 @@
 
 
       /**
-       * Swap the day/night sky colors.
-       *
-       * We use CSS classes to keep track of the current state because
-       * it's a tiny bit cleaner than a global variable, but for some
-       * reason we can't use those same classes to actually change the
-       * color. (The classes, change, but the color doesn't.) Rather
-       * than waste time trying to explain this, we just set the "fill"
-       * attribute ourselves whenever we swap classes.
+       * Swap day/night colors by adding/removing the "night" class
+       * to/from the sky element.
        */
       function swap_day_night() {
         const sky = document.getElementById("sky");
 
-        if (sky.getAttribute("class") === "night") {
-          sky.setAttribute("fill", "#efb02f");
-          sky.setAttribute("class", "day");
+        if (sky.getAttribute("class") == "night") {
+          sky.setAttribute("class", "");
         }
         else {
-          /* Put this case second so that the first time the
-           * screen is tapped (when there are no classes on
-           * the sky element) the color still changes. */
-          sky.setAttribute("fill", "#143b66");
           sky.setAttribute("class", "night");
         }
       }