darkmode

static/css/style.css

@@ -94,4 +94,71 @@ a {
           box-sizing: border-box;   
           border-radius: 12px;
           color: #839c87;
-      } 
+      } 
+
+
+
+      .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: #020202;
+      }
+      
+      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%;
+      }
+
+      .dark-mode {
+        background-image: linear-gradient(to right, rgb(5, 49, 16), rgb(63, 63, 236))
+        
+      }

templates/session.html

@@ -16,6 +16,16 @@
   <a href="http://127.0.0.1:5000/logout">
           <button class="btn btn-primary btn-lg">Logout</button>
        </a>
+       <label class="switch">
+         <input type="checkbox" onclick="myFunction()">
+         <span class="slider round"></span>
+       </label>
+       <script>
+         function myFunction() {
+            var element = document.body;
+            element.classList.toggle("dark-mode");
+         }
+         </script>
        <center>
        <a onclick= "change_Iframe('/planer')">
           <button class="btn btn-primary btn-lg">Planer</button>