New feature: Dark mode

static/css/darkmode.scss

@@ -0,0 +1,71 @@
+// declare variable
+html {
+    --bg-color: #ffffff;
+    --color: #0d0d0d;
+    &.dark-mode {
+      --bg-color: #0d0d0d;
+      --color: #ffffff;
+    }
+  }
+  // use variable
+  body {
+    transition: background 250ms ease;
+    background-color: var(--bg-color);
+    color: var(--color);
+  }
+  // the toggle switch
+  .toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    max-width: 140px;
+    span {
+      margin: 0 0.5rem;
+    }
+    input[type="checkbox"] {
+      height: 0;
+      width: 0;
+      visibility: hidden;
+      &:checked + label {
+        background: darkblue;
+      }
+      &:checked + label:after {
+        left: calc(100% - 2px);
+        transform: translateX(-100%);
+      }
+    }
+    label {
+      cursor: pointer;
+      width: 50px;
+      height: 24px;
+      background: rgba(0, 0, 0, 0.27);
+      display: block;
+      border-radius: 20px;
+      position: relative;
+      &:after {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 20px;
+        height: 20px;
+        background: #fff;
+        border-radius: 20px;
+        transition: 0.3s;
+      }
+    }
+  }
+
+  // make the toggle switch a bit more accessible
+  .screen-reader-text {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute !important;
+    width: 1px;
+    word-wrap: normal !important;
+  }

templates/includes/navbar.html

@@ -25,6 +25,15 @@
                 </li>
             </ul>
             <ul class="navbar-nav">
+                <li class="nav-item me-3 mt-2">
+                  <div class="toggle">
+                    <span>🌙</span>
+                    <input type="checkbox" id="toggle-switch" />
+                    <label for="toggle-switch"><span class="screen-reader-text">Toggle Color Scheme</span></label>
+                    <span>☀️</span>
+                  </div>
+                </li>
+
                 <li class="nav-item me-3 mt-2">
                     <a class="github-button" href="https://github.com/qainsights/perfGPT" data-size="large" data-show-count="true">Star</a>
                 </li>
@@ -39,4 +48,5 @@
             </ul>
         </div>
     </div>
-</nav>
+</nav>
+

templates/layout.html

@@ -6,10 +6,12 @@
     <title>PerfGPT - Analyze your performance test results using OpenAI</title>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🤖</text></svg>">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/darkmode.css') }}">
+
      <script type="text/javascript">
         function loading(){
             document.getElementById("loading").style.display = "block";
@@ -29,4 +31,16 @@
     {% include 'includes/footer.html' %}
 
 </body>
+<script type="text/javascript">
+    var html = document.querySelector("html");
+    var toggleSwitch = document.querySelector("#toggle-switch");
+
+    toggleSwitch.addEventListener("change", function() {
+        if (this.checked) {
+            html.classList.add("dark-mode");
+        } else {
+            html.classList.remove("dark-mode");
+        }
+        });
+</script>
 </html>