Dark mode

2022-04-12 21:35:11 +02:00
parent 94f9dbd84a
commit 1edc90103b
11 changed files with 630 additions and 1993 deletions
--- a/template/editDetails.html
+++ b/template/editDetails.html
@@ -64,12 +64,75 @@
        }
        </style>

-    <!-- Favicon
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-    <link rel="icon" type="image/png" href="images/favicon.png" />
-    <script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        <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>
  </head>
  <body>

@@ -98,6 +161,17 @@
            </div>
    </div>
 </div>
+
+<script>
+  DarkReader.auto()
+  $("#darkToggle").on("change", function(test){
+    if(test.currentTarget.checked){
+      DarkReader.enable()
+    } else {
+      DarkReader.disable()
+    }
+  })
+</script>
    <script>

      function on() {