Dark mode

template/add.html

@@ -24,6 +24,75 @@
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <link rel="stylesheet" href="css/normalize.css" />
     <link rel="stylesheet" href="css/skeleton.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
+  <script src="/darkreader/darkreader.js">    </script>
+  <style>
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 34px;
+    }
+    
+    .switch input { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+    
+    input:checked + .slider {
+      background-color: #2196F3;
+    }
+    
+    input:focus + .slider {
+      box-shadow: 0 0 1px #2196F3;
+    }
+    
+    input:checked + .slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+    
+    /* Rounded sliders */
+    .slider.round {
+      border-radius: 34px;
+    }
+    
+    .slider.round:before {
+      border-radius: 50%;
+    }
+
+    iconContainer {
+      padding: 4px;
+      font-size: 1.5em;
+    }
+    </style>
     <style>
         
         /* In order to place the tracking correctly */
@@ -97,7 +166,16 @@
     </div>
 </div>
     <!-- Include the image-diff library -->
-
+    <script>
+        DarkReader.auto()
+        $("#darkToggle").on("change", function(test){
+          if(test.currentTarget.checked){
+            DarkReader.enable()
+          } else {
+            DarkReader.disable()
+          }
+        })
+      </script>
     <script>
 
         var coll = document.getElementsByClassName("collapsible");