Added Day/Night selector

TheWicklowWolf · Oct 27, 2023 · 79a0950 · 79a0950
1 parent 756be5a
commit 79a0950
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/static/script.js b/src/static/script.js
@@ -148,3 +148,25 @@ save_channel_list.addEventListener("click", () => {
         save_message.style.display = "none";
     }, 3000);
 });
+
+const themeSwitch = document.getElementById('themeSwitch');
+const savedTheme = localStorage.getItem('theme');
+const savedSwitchPosition = localStorage.getItem('switchPosition');
+
+if (savedSwitchPosition) {
+    themeSwitch.checked = savedSwitchPosition === 'true';
+}
+
+if (savedTheme) {
+    document.documentElement.setAttribute('data-bs-theme', savedTheme);
+}
+
+themeSwitch.addEventListener('click', () => {
+    if (document.documentElement.getAttribute('data-bs-theme') === 'dark') {
+        document.documentElement.setAttribute('data-bs-theme', 'light');
+    } else {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+    }
+    localStorage.setItem('theme', document.documentElement.getAttribute('data-bs-theme'));
+    localStorage.setItem('switchPosition', themeSwitch.checked);
+});
diff --git a/src/templates/base.html b/src/templates/base.html
@@ -12,7 +12,9 @@
   <!-- Bootstrap JS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js"></script>
   <!-- Font Awesome -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
   <!-- Socket IO -->
   <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
   <title>ChannelTube</title>
@@ -63,6 +65,11 @@ <h5 class="modal-title" id="modal-label">Configuration</h5>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
           <button type="button" id="save-changes-button" class="btn btn-primary">Save changes</button>
+          <i class="fa fa-sun"></i>
+          <div class="form-check form-switch">
+            <input class="form-check-input rounded" type="checkbox" id="themeSwitch">
+          </div>
+          <i class="fa fa-moon"></i>
         </div>
       </div>
     </div>