Finally finished theme switching!!!!

src/api.py

@@ -182,3 +182,13 @@ class manageConfiguration:
                 return ret(data=dict(conf['Interface']))
         except FileNotFoundError as err:
             return ret(status=False, reason=str(err))
+
+
+class settings:
+    def setTheme(self, theme, config, setConfig):
+        themes = ['light', 'dark']
+        if theme not in themes: 
+            return ret(status=False, reason="Theme does not exist")
+        config['Server']['dashboard_theme'] = theme
+        setConfig(config)
+        return ret()

src/dashboard.py

@@ -694,6 +694,7 @@ def auth_req():
         g.cur = g.db.cursor()
     conf = get_dashboard_conf()
     req = conf.get("Server", "auth_req")
+    session['theme'] = conf.get("Server", "dashboard_theme")
     session['update'] = UPDATE
     session['updateInfo'] = updateInfo
     session['dashboard_version'] = DASHBOARD_VERSION
@@ -1571,6 +1572,7 @@ def switch_display_mode(mode):
 
 # APIs
 import api
+# TODO: Add configuration prefix to all configuration API
 
 @app.route('/api/getPeerDataUsage', methods=['POST'])
 def getPeerDataUsage():
@@ -1675,6 +1677,17 @@ def getConfigurationInfo():
     else:
         return api.manageConfiguration.getConfigurationInfo(api.manageConfiguration, data['configName'], WG_CONF_PATH)
 
+@app.route('/api/settings/setTheme', methods=['POST'])
+def setTheme():
+    data = request.get_json()
+    required = ['theme']
+    if not checkJSONAllParameter(required, data):
+        return jsonify(api.notEnoughParameter)
+    else:
+        return api.settings.setTheme(api.settings, data['theme'], get_dashboard_conf(), set_dashboard_conf)
+
+
+        
 
 """
 Dashboard Tools Related
@@ -1913,6 +1926,8 @@ def init_dashboard():
         config['Server']['dashboard_refresh_interval'] = '60000'
     if 'dashboard_sort' not in config['Server']:
         config['Server']['dashboard_sort'] = 'status'
+    if 'dashboard_theme' not in config['Server']:
+        config['Server']['dashboard_theme'] = 'light'
     # Default dashboard peers setting
     if "Peers" not in config:
         config['Peers'] = {}

src/static/css/dashboard.css

@@ -923,3 +923,7 @@ pre.index-alert {
 .list-group-item{
     transition: all 0.1s ease-in;
 }
+
+.theme-switch-btn{
+    width: 100%;
+}

src/static/css/theme/dark.css

@@ -47,6 +47,49 @@ body {
   border-color: hsl(120deg, 30%, 40%) !important;
 }
 
+.list-group-item {
+  background-color: #272727;
+  border-color: #272727;
+  color: white;
+}
+.list-group-item:hover {
+  background-color: #333333;
+  border-color: #333333;
+  color: white;
+}
+
+.delete-peer-bulk-badge.badge-danger {
+  background-color: hsl(0deg, 60%, 60%);
+}
+.delete-peer-bulk-badge.badge-danger:hover {
+  background-color: hsl(0deg, 60%, 50%);
+}
+
+#delete_bulk_modal .list-group a.active {
+  background-color: hsl(0deg, 60%, 60%);
+  border: hsl(0deg, 60%, 60%);
+}
+#delete_bulk_modal .list-group a.active:hover {
+  background-color: hsl(0deg, 60%, 50%);
+  border: hsl(0deg, 60%, 50%);
+}
+
+#available_ip_modal .list-group a.active {
+  background-color: hsl(235deg, 60%, 60%);
+  border: hsl(235deg, 60%, 60%);
+}
+#available_ip_modal .list-group a.active:hover {
+  background-color: hsl(235deg, 60%, 50%);
+  border: hsl(235deg, 60%, 50%);
+}
+
+.available-ip-badge.badge-primary {
+  background-color: hsl(235deg, 60%, 60%);
+}
+.available-ip-badge.badge-primary:hover {
+  background-color: hsl(235deg, 60%, 50%);
+}
+
 .btn-outline-success {
   color: hsl(120deg, 30%, 50%) !important;
   border-color: hsl(120deg, 30%, 50%) !important;
@@ -327,9 +370,12 @@ div.toast div.toast-progressbar {
 .bottomNav .bottomNavButton.active {
   color: hsl(235deg, 60%, 60%) !important;
 }
-
+.bottomNav .subNav {
-.subNav {
   background-color: #272727 !important;
 }
 
+.key:hover {
+  color: hsl(235deg, 60%, 60%);
+}
+
 /*# sourceMappingURL=dark.css.map */

src/static/css/theme/dark.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAvCS;EAwCT,OAdS;;;AAkBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE,OAxMO;;AA0MT;EACE,cA3MO;;;AA+MX;AAAA;EAEE,OAxMS;;AA0MT;AAAA;EACE,YArOO;;;AAyOX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YA/OS;;;AAkPX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAjRU;;;AAoRZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cAzSS;;;AA4SX;EACE,kBAjTS;;;AAoTX;AAAA;EAEE,kBAvTS;EAwTT,cAnTS;;;AAsTX;EACE,OApSY;;;AAuSd;EACE,OArSS;EAsST;;AAEA;EACE,OAxSO;;;AA4SX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAKJ;EACE;;;AAIA;EACE;;AAIA;EACE,OA7WK;;AAgXT;EACE;;;AAIJ;EACE","file":"dark.css"}
+{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAvCS;EAwCT,OAdS;;;AAkBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE,kBAtFS;EAuFT,cAvFS;EAwFT;;AAEA;EACE,kBAxFO;EAyFP,cAzFO;EA0FP;;;AAMJ;EACE,kBAxFQ;;AAyFR;EACE,kBA3FM;;;AAiGN;EACE,kBAjGI;EAkGJ,QAlGI;;AAoGJ;EACE,kBAtGE;EAuGF,QAvGE;;;AA+GN;EACE,kBA5GK;EA6GL,QA7GK;;AA+GL;EACE,kBAjHG;EAkHH,QAlHG;;;AAwHX;EACE,kBAxHS;;AAyHT;EACE,kBA3HO;;;AA+HX;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE,OAhQO;;AAkQT;EACE,cAnQO;;;AAuQX;AAAA;EAEE,OAhQS;;AAkQT;AAAA;EACE,YA7RO;;;AAiSX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YAvSS;;;AA0SX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAzUU;;;AA4UZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cAjWS;;;AAoWX;EACE,kBAzWS;;;AA4WX;AAAA;EAEE,kBA/WS;EAgXT,cA3WS;;;AA8WX;EACE,OA5VY;;;AA+Vd;EACE,OA7VS;EA8VT;;AAEA;EACE,OAhWO;;;AAoWX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAKJ;EACE;;;AAIA;EACE;;AAIA;EACE,OAraK;;AAyaT;EACE;;AAGF;EACE;;;AAKJ;EACE,OA/bS","file":"dark.css"}

src/static/css/theme/dark.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA,MACE,0CACA,yCACA,sCACA,4CAGF,KACE,WAvCS,KAwCT,MAdS,KAkBX,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,YACE,yBACA,gCACA,8BAEA,kBACE,iCACA,6BAIJ,oBACE,yBACA,gCACA,oCAEA,qDAEE,yBAGF,2BACE,oCACA,gCAGF,0BACE,iCACA,6BAIJ,eACE,yBACA,gCACA,8BAEA,qBACE,oCACA,gCAIJ,uBACE,yBACA,gCACA,oCAEA,2DAEE,yBAGF,8BACE,oCACA,gCAGF,6BACE,oCACA,gCAKF,gCACE,yBACA,sCACE,sBAIJ,mBACE,0CAEA,uCACE,yBAGF,uCACE,yBAGF,sCACE,sBAGF,yCACE,yBAKN,cACE,oCACA,sCACA,sBAGF,uBACE,sBAGF,oBACE,8BAIA,aACE,MAxMO,QA0MT,iBACE,aA3MO,QA+MX,iDAEE,MAxMS,KA0MT,6DACE,WArOO,KAyOX,8FAGE,oCACA,8BAGF,MACE,WA/OS,QAkPX,YACE,sBAGF,aACE,yBAGF,cACE,yBAGF,cACE,yBAGF,WACE,yBAGF,0CAEE,yBAGF,wCAEE,sBAGF,oCAEE,yBAGF,aACE,oCAGF,cACE,aAjRU,QAoRZ,6CACE,oCAEF,qCACE,oCACA,gCAGF,+DAEE,yBAGF,GACE,aAzSS,QA4SX,eACE,iBAjTS,KAoTX,4BAEE,iBAvTS,QAwTT,aAnTS,QAsTX,KACE,MApSY,QAuSd,OACE,MArSS,KAsST,iBAEA,aACE,MAxSO,QA4SX,2BACE,iCAGF,SACE,iCACA,uBAGF,cACE,sBAGF,UACE,oCAEA,2BACE,iCACA,sBACA,uCAGF,yBACE,oCACA,sBAGF,gCACE,oCAIJ,mFAEE,mCAGF,oCACE,oCAGF,0BACE,iCAGF,OACE,sBAEA,oBAEE,6BAKJ,4FACE,wDAIA,WACE,oCAIA,4BACE,MA7WK,KAgXT,mCACE,yBAIJ,QACE","file":"dark.min.css"}
+{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA,MACE,0CACA,yCACA,sCACA,4CAGF,KACE,WAvCS,KAwCT,MAdS,KAkBX,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,iBACE,iBAtFS,QAuFT,aAvFS,QAwFT,WAEA,uBACE,iBAxFO,KAyFP,aAzFO,KA0FP,WAMJ,qCACE,iBAxFQ,QAyFR,2CACE,iBA3FM,KAiGN,wCACE,iBAjGI,QAkGJ,OAlGI,QAoGJ,8CACE,iBAtGE,KAuGF,OAvGE,KA+GN,yCACE,iBA5GK,QA6GL,OA7GK,QA+GL,+CACE,iBAjHG,QAkHH,OAlHG,QAwHX,kCACE,iBAxHS,QAyHT,wCACE,iBA3HO,QA+HX,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,YACE,yBACA,gCACA,8BAEA,kBACE,iCACA,6BAIJ,oBACE,yBACA,gCACA,oCAEA,qDAEE,yBAGF,2BACE,oCACA,gCAGF,0BACE,iCACA,6BAIJ,eACE,yBACA,gCACA,8BAEA,qBACE,oCACA,gCAIJ,uBACE,yBACA,gCACA,oCAEA,2DAEE,yBAGF,8BACE,oCACA,gCAGF,6BACE,oCACA,gCAKF,gCACE,yBACA,sCACE,sBAIJ,mBACE,0CAEA,uCACE,yBAGF,uCACE,yBAGF,sCACE,sBAGF,yCACE,yBAKN,cACE,oCACA,sCACA,sBAGF,uBACE,sBAGF,oBACE,8BAIA,aACE,MAhQO,QAkQT,iBACE,aAnQO,QAuQX,iDAEE,MAhQS,KAkQT,6DACE,WA7RO,KAiSX,8FAGE,oCACA,8BAGF,MACE,WAvSS,QA0SX,YACE,sBAGF,aACE,yBAGF,cACE,yBAGF,cACE,yBAGF,WACE,yBAGF,0CAEE,yBAGF,wCAEE,sBAGF,oCAEE,yBAGF,aACE,oCAGF,cACE,aAzUU,QA4UZ,6CACE,oCAEF,qCACE,oCACA,gCAGF,+DAEE,yBAGF,GACE,aAjWS,QAoWX,eACE,iBAzWS,KA4WX,4BAEE,iBA/WS,QAgXT,aA3WS,QA8WX,KACE,MA5VY,QA+Vd,OACE,MA7VS,KA8VT,iBAEA,aACE,MAhWO,QAoWX,2BACE,iCAGF,SACE,iCACA,uBAGF,cACE,sBAGF,UACE,oCAEA,2BACE,iCACA,sBACA,uCAGF,yBACE,oCACA,sBAGF,gCACE,oCAIJ,mFAEE,mCAGF,oCACE,oCAGF,0BACE,iCAGF,OACE,sBAEA,oBAEE,6BAKJ,4FACE,wDAIA,WACE,oCAIA,4BACE,MAraK,KAyaT,mCACE,yBAGF,mBACE,oCAKJ,WACE,MA/bS","file":"dark.min.css"}

src/static/css/theme/dark.scss

@@ -86,6 +86,62 @@ body {
   }
 }
 
+.list-group-item{
+  background-color: $grey-400;
+  border-color: $grey-400;
+  color: white;
+
+  &:hover{
+    background-color: $grey-700;
+    border-color: $grey-700;
+    color: white;
+  }
+}
+
+
+
+.delete-peer-bulk-badge.badge-danger{
+  background-color: $red-500;
+  &:hover{
+    background-color: $red-400;
+  }
+}
+
+#delete_bulk_modal{
+  .list-group{
+    a.active{
+      background-color: $red-500;
+      border: $red-500;
+
+      &:hover{
+        background-color: $red-400;
+        border: $red-400;
+      }
+    }
+  }
+}
+
+#available_ip_modal{
+  .list-group{
+    a.active{
+      background-color: $blue-500;
+      border: $blue-500;
+      
+      &:hover{
+        background-color: $blue-400;
+        border: $blue-400;
+      }
+    }
+  }
+}
+
+.available-ip-badge.badge-primary{
+  background-color: $blue-500;
+  &:hover{
+    background-color: $blue-400;
+  }
+}
+
 .btn-outline-success {
   color: $green-500 !important;
   border-color: $green-500 !important;
@@ -395,11 +451,19 @@ div.toast {
       color: $text-400;
     }
   }
+
   .bottomNavButton.active{
     color: $blue-500 !important;
   }
+
+  .subNav{
+    background-color: $grey-400 !important;
+  }
+  
 }
 
-.subNav{
+.key:hover{
-  background-color: $grey-400 !important;
+  color: $blue-500;
 }
+
+

src/static/js/configurationTool.js

@@ -55,24 +55,26 @@ function loadPeerDataUsageChartDone(res){
         configurations.peerDataUsageChartObj().data.datasets[1].data = [];
         console.log(res);
         let data = res.data;
-        configurations.peerDataUsageChartObj().data.labels.push(data[data.length - 1].time);
+        if (data.length > 0){
-        configurations.peerDataUsageChartObj().data.datasets[0].data.push(0);
+            configurations.peerDataUsageChartObj().data.labels.push(data[data.length - 1].time);
-        configurations.peerDataUsageChartObj().data.datasets[1].data.push(0);
+            configurations.peerDataUsageChartObj().data.datasets[0].data.push(0);
+            configurations.peerDataUsageChartObj().data.datasets[1].data.push(0);
         
-        configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[data.length - 1].total_sent
+            configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[data.length - 1].total_sent
-        configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[data.length - 1].total_receive
+            configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[data.length - 1].total_receive
         
         
-        for(let i = data.length - 2; i >= 0; i--){
+            for(let i = data.length - 2; i >= 0; i--){
-            let sent = data[i].total_sent - configurations.peerDataUsageChartObj().data.datasets[0].lastData;
+                let sent = data[i].total_sent - configurations.peerDataUsageChartObj().data.datasets[0].lastData;
-            let receive = data[i].total_receive - configurations.peerDataUsageChartObj().data.datasets[1].lastData;
+                let receive = data[i].total_receive - configurations.peerDataUsageChartObj().data.datasets[1].lastData;
-            configurations.peerDataUsageChartObj().data.datasets[0].data.push(sent);
+                configurations.peerDataUsageChartObj().data.datasets[0].data.push(sent);
-            configurations.peerDataUsageChartObj().data.datasets[1].data.push(receive);
+                configurations.peerDataUsageChartObj().data.datasets[1].data.push(receive);
-            configurations.peerDataUsageChartObj().data.labels.push(data[i].time);
+                configurations.peerDataUsageChartObj().data.labels.push(data[i].time);
-            configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[i].total_sent;
+                configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[i].total_sent;
-            configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[i].total_receive;
+                configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[i].total_receive;
+            }
+            configurations.peerDataUsageChartObj().update();
         }
-        configurations.peerDataUsageChartObj().update();
     }
 }
 

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="application-name" content="WGDashboard">
-    <meta name="apple-mobile-web-app-title" content="e">
+    <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>
+                <i class="bi bi-house"></i>Home
-                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>
+                <i class="bi bi-justify"></i>More
-                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">