Finally finished theme switching!!!!

src/templates/header.html

@@ -3,11 +3,10 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<title>{{ title }} | WGDashboard</title>
     <link rel="manifest" href="{{ url_for('static',filename='json/manifest.json') }}">
-
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="application-name" content="e">
-    <meta name="apple-mobile-web-app-title" content="e">
+    <meta name="application-name" content="WGDashboard">
+    <meta name="apple-mobile-web-app-title" content="WGDashboard">
     <meta name="msapplication-starturl" content="/">
     <link rel="apple-touch-icon" sizes="192x192" href="{{ url_for('static',filename='img/192x192ios.png') }}">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -15,7 +14,9 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
 	<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
     <!-- THEME APPLY HERE -->
-    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/theme/dark.min.css') }}">
+    {% if session["theme"] == "dark" %} 
+        <link rel= "stylesheet" type= "text/css" href="{{ url_for('static',filename='css/theme/dark.min.css') }}" id="darkThemeCSS">
+    {% endif %}
     <!-- THEME APPLY HERE -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

src/templates/navbar.html

@@ -4,6 +4,7 @@
 		data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
 		<span class="navbar-toggler-icon"></span>
 	</button> -->
+	
 </nav>
 <div class="progress" style="height: 3px; position: fixed; width: 100%; z-index: 10000; background-color: transparent">
 	<div class="progress-bar" role="progressbar" style="z-index: 10000; width: 0%"></div>

src/templates/settings.html

@@ -16,6 +16,26 @@
             {% endif %}
             <h1 class="">Settings</h1>
             <hr>
+            <div class="card mb-3">
+                <h6 class="card-header">Dashboard Theme</h6>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-6">
+                            <button class='btn btn-outline-primary theme-switch-btn {% if session["theme"] == "light" %} {{ "active" }} {% endif %}' data-theme="light">
+                                <i class="bi bi-sun-fill"></i>
+                                Light
+                            </button>
+                        </div>
+                        <div class="col-6">
+                            <button class='btn btn-outline-primary theme-switch-btn {% if session["theme"] == "dark" %} {{ "active" }} {% endif %}' data-theme="dark">
+                                <i class="bi bi-moon-fill"></i>
+                                Dark
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <hr>
             {% if required_auth == "true" %}
                 <div class="card mb-3">
                     <h6 class="card-header">Peer Default Settings</h6>
@@ -201,5 +221,29 @@
 
     $(".bottomNavSettings").addClass("active");
 
+
+    $(".theme-switch-btn").on("click", function(){
+        if (!$(this).hasClass("active")){
+            let theme = $(this).data("theme");
+            $(".theme-switch-btn").removeClass("active");
+            $(this).addClass("active");
+            $.ajax({
+                method: "POST",
+                url: "/api/settings/setTheme",
+                headers: {"Content-Type": "application/json"},
+                data: JSON.stringify({"theme": theme})
+            }).done(function(res){
+                if (res.status == true){
+                    if (theme == "light"){
+                        $("#darkThemeCSS").remove();
+                    }else{
+                        $("head").append('<link rel="stylesheet" type="text/css" href="/static/css/theme/dark.min.css" id="darkThemeCSS">');
+                    }
+                }
+            });
+        }
+    });
+
+
 </script>
 </html>

src/templates/sidebar.html

@@ -1,11 +1,9 @@
 <div class="bottomNavWrapper"></div>
 <div class="bottom">
     <nav class="navbar navbar-dark fixed-bottom bg-light flex-md-nowrap p-0 bottomNav">
-    
         <div class="bottomNavContainer" style="z-index: 1000;">
             <div class="bottomNavButton bottomNavHome">
-                <i class="bi bi-house"></i>
-                Home
+                <i class="bi bi-house"></i>Home
             </div>
             <div class="bottomNavButton bottomNavConfigs">
                 <i class="bi bi-files"></i>
@@ -27,8 +25,7 @@
                 Settings
             </div>
             <div class="bottomNavButton bottomNavMore">
-                <i class="bi bi-justify"></i>
-                More
+                <i class="bi bi-justify"></i>More
                 <div class="subNav bg-light animate__animated">
                     <ul class="nav flex-column">
                         {% if session['update'] == "true" %}
@@ -68,8 +65,6 @@
     </nav>
 </div>
 
-
-
 <div class="row">
     <div class="row">
         <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">