From 1acb80536b94635937d28f2368b83452af3a1e38 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sat, 8 Mar 2025 15:34:29 +0200
Subject: [PATCH] Refactor assets loading

* move fonts first
* move CSS and JS along with the rest
* move default auto theme media checks to the HEAD instead of imports

Also, use `script defer`. This makes the JS files non-blocking.

Signed-off-by: XhmikosR <xhmikosr@gmail.com>
---
 gravity.lp                          |  2 +-
 groups-clients.lp                   | 10 +++----
 groups-domains.lp                   |  8 ++---
 groups-lists.lp                     |  8 ++---
 groups.lp                           |  8 ++---
 index.lp                            |  4 +--
 interfaces.lp                       |  2 +-
 login.lp                            |  4 +--
 messages.lp                         |  2 +-
 network.lp                          |  4 +--
 queries.lp                          |  8 ++---
 scripts/lua/footer.lp               |  2 +-
 scripts/lua/header.lp               | 45 +++++++++++++++--------------
 scripts/lua/header_authenticated.lp | 24 +++++++--------
 search.lp                           |  2 +-
 settings-all.lp                     |  6 ++--
 settings-api.lp                     | 10 +++----
 settings-dhcp.lp                    |  8 ++---
 settings-dns.lp                     |  6 ++--
 settings-dnsrecords.lp              | 10 +++----
 settings-privacy.lp                 |  6 ++--
 settings-system.lp                  | 10 +++----
 settings-teleporter.lp              |  6 ++--
 style/themes/default-auto.css       |  6 ----
 taillog.lp                          |  2 +-
 25 files changed, 100 insertions(+), 103 deletions(-)
 delete mode 100644 style/themes/default-auto.css

diff --git a/gravity.lp b/gravity.lp
index c2312acd..aaef944a 100644
--- a/gravity.lp
+++ b/gravity.lp
@@ -27,5 +27,5 @@ mg.include('scripts/lua/header_authenticated.lp','r')
 <button type="button" id="gravityBtn" class="btn btn-lg btn-primary btn-block">Update</button>
 <pre id="output" style="width: 100%; height: 100%;" hidden></pre>
 
-<script src="<?=pihole.fileversion('scripts/js/gravity.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/gravity.js')?>"></script>
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/groups-clients.lp b/groups-clients.lp
index 061bd0a4..5fd1e043 100644
--- a/groups-clients.lp
+++ b/groups-clients.lp
@@ -95,10 +95,10 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/groups-clients.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/groups-clients.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/groups-domains.lp b/groups-domains.lp
index c1aa01fa..58b64c08 100644
--- a/groups-domains.lp
+++ b/groups-domains.lp
@@ -156,9 +156,9 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/groups-domains.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/groups-domains.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/groups-lists.lp b/groups-lists.lp
index b82204ea..3e94e83b 100644
--- a/groups-lists.lp
+++ b/groups-lists.lp
@@ -94,9 +94,9 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/groups-lists.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/groups-lists.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/groups.lp b/groups.lp
index 06db01da..dcf4691d 100644
--- a/groups.lp
+++ b/groups.lp
@@ -79,9 +79,9 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/groups.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/groups.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/index.lp b/index.lp
index 36998d83..f5b3513e 100644
--- a/index.lp
+++ b/index.lp
@@ -279,7 +279,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
 </div>
 <!-- /.row -->
 
-<script src="<?=pihole.fileversion('scripts/js/charts.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/index.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/charts.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/index.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/interfaces.lp b/interfaces.lp
index d3f1a915..2d5f02ec 100644
--- a/interfaces.lp
+++ b/interfaces.lp
@@ -32,5 +32,5 @@ mg.include('scripts/lua/header_authenticated.lp','r')
 
 <pre id="output" style="width: 100%; height: 100%;" hidden></pre>
 
-<script src="<?=pihole.fileversion('scripts/js/interfaces.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/interfaces.js')?>"></script>
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/login.lp b/login.lp
index 73641f89..9558ae41 100644
--- a/login.lp
+++ b/login.lp
@@ -117,7 +117,7 @@ mg.include('scripts/lua/header.lp','r')
         <strong><a href="https://pi-hole.net/donate/" rel="noopener" target="_blank"><i class="fa fa-heart text-red"></i> Donate</a></strong> if you found this useful.
     </div>
 </div>
-<script src="<?=pihole.fileversion('scripts/js/footer.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/login.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/footer.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/login.js')?>"></script>
 </body>
 </html>
diff --git a/messages.lp b/messages.lp
index 23968958..9bf440bf 100644
--- a/messages.lp
+++ b/messages.lp
@@ -41,6 +41,6 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('scripts/js/messages.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/messages.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/network.lp b/network.lp
index 75545221..c4566a36 100644
--- a/network.lp
+++ b/network.lp
@@ -64,7 +64,7 @@ mg.include('scripts/lua/header_authenticated.lp','r')
 </div>
 <!-- /.row -->
 
-<script src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/network.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/network.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/queries.lp b/queries.lp
index baeaa1b4..9b36ad67 100644
--- a/queries.lp
+++ b/queries.lp
@@ -194,9 +194,9 @@ mg.include('scripts/lua/header_authenticated.lp','r')
 </div>
 <!-- /.row -->
 
-<script src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/daterangepicker/daterangepicker.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/queries.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/daterangepicker/daterangepicker.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/queries.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/scripts/lua/footer.lp b/scripts/lua/footer.lp
index 34885011..eb14d072 100644
--- a/scripts/lua/footer.lp
+++ b/scripts/lua/footer.lp
@@ -66,7 +66,7 @@ end
 
 </div>
 <!-- ./wrapper -->
-<script src="<?=pihole.fileversion('scripts/js/footer.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/footer.js')?>"></script>
 
 <div id="advanced-info-data" style="display: none;" data-starttime="<?=starttime?>" data-endtime="<?=mg.time(true)?>" data-client-ip="<?=mg.request_info.remote_addr?>" data-xff="<?=x_forwarded_for?>"></div>
 </body>
diff --git a/scripts/lua/header.lp b/scripts/lua/header.lp
index 0e570bf3..a2130365 100644
--- a/scripts/lua/header.lp
+++ b/scripts/lua/header.lp
@@ -64,18 +64,8 @@ is_authenticated = mg.request_info.is_authenticated
     <link rel="shortcut icon" href="<?=webhome?>img/favicons/favicon.ico">
     <meta name="msapplication-TileColor" content="<?=theme.color?>">
     <meta name="msapplication-TileImage" content="<?=webhome?>img/favicons/mstile-150x150.png">
-
-    <!-- Theme styles -->
     <meta name="theme-color" content="<?=theme.color?>">
 
-<? if theme.dark then ?>
-    <style>
-        html { background-color: #000; }
-    </style>
-<? end ?>
-    <script src="<?=pihole.fileversion('vendor/nprogress/nprogress.min.js')?>"></script>
-    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/nprogress/nprogress.min.css')?>">
-
     <!-- Theme fonts -->
 <? if theme.name == 'lcars' then ?>
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/fonts/ubuntu-mono/ubuntu-mono.css')?>">
@@ -84,13 +74,20 @@ is_authenticated = mg.request_info.is_authenticated
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/fonts/source-sans-pro/source-sans-pro.css')?>">
 <? end ?>
 
+<? if theme.dark then ?>
+    <style>
+        html { background-color: #000; }
+    </style>
+<? end ?>
+
     <!-- Common styles -->
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap/css/bootstrap.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/animate/animate.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/bstreeview/bstreeview.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/font-awesome/css/all.min.css')?>">
-<?
-if startsWith(scriptname, 'groups') then
+    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/nprogress/nprogress.min.css')?>">
+
+<? if startsWith(scriptname, 'groups') then
     -- Group management styles
 ?>
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap-select/bootstrap-select.min.css')?>">
@@ -102,20 +99,26 @@ if startsWith(scriptname, 'groups') then
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/daterangepicker/daterangepicker.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.css')?>">
 <? end ?>
+    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe/waitMe.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/select2/select2.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/adminLTE/AdminLTE.min.css')?>">
 
-    <!-- Theme styles -->
+    <!-- Theme styles (<?= theme.name ?>) -->
     <link rel="stylesheet" href="<?=pihole.fileversion('style/pi-hole.css')?>">
-    <link rel="stylesheet" href="<?=pihole.fileversion('style/themes/'..theme.name..'.css')?>">
+<? if theme.name == "default-auto" then ?>
+    <link rel="stylesheet" href="<?=pihole.fileversion('style/themes/default-dark.css')?>" media="(prefers-color-scheme: dark)">
+    <link rel="stylesheet" href="<?=pihole.fileversion('style/themes/default-light.css')?>" media="not (prefers-color-scheme: dark)">
+<? else ?>
+    <link rel="stylesheet" href="<?=pihole.fileversion('style/themes/' ..theme.name.. '.css')?>">
+<? end ?>
 
     <noscript><link rel="stylesheet" href="<?=pihole.fileversion('vendor/js-warn/js-warn.css')?>"></noscript>
 
     <!-- scripts -->
-    <script src="<?=pihole.fileversion('vendor/jquery/jquery.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/bootstrap/js/bootstrap.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/adminLTE/adminlte.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/bootstrap-notify/bootstrap-notify.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('scripts/js/utils.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/waitMe/waitMe.min.js')?>"></script>
-    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe/waitMe.min.css')?>">
+    <script defer src="<?=pihole.fileversion('vendor/jquery/jquery.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/bootstrap/js/bootstrap.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/adminLTE/adminlte.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/bootstrap-notify/bootstrap-notify.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/waitMe/waitMe.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/nprogress/nprogress.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('scripts/js/utils.js')?>"></script>
diff --git a/scripts/lua/header_authenticated.lp b/scripts/lua/header_authenticated.lp
index ff0e9334..277dcf72 100644
--- a/scripts/lua/header_authenticated.lp
+++ b/scripts/lua/header_authenticated.lp
@@ -9,18 +9,18 @@
 ]]--
 mg.include('header.lp','r')
 ?>
-    <script src="<?=pihole.fileversion('scripts/js/logout.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/select2/select2.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/datatables/datatables.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/datatables-select/datatables.select.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/datatables-buttons/datatables.buttons.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/chartjs/chart.umd.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/chartjs-plugin-deferred/chartjs-plugin-deferred.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/moment/moment.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/chartjs-adapter-moment/chartjs-adapter-moment.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/hammer/hammer.min.js')?>"></script> <!-- Needed for chartjs-plugin-zoom -->
-    <script src="<?=pihole.fileversion('vendor/chartjs-plugin-zoom/chartjs-plugin-zoom.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/bstreeview/bstreeview.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/select2/select2.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/datatables/datatables.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/datatables-select/datatables.select.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/datatables-buttons/datatables.buttons.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/chartjs/chart.umd.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/chartjs-plugin-deferred/chartjs-plugin-deferred.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/moment/moment.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/chartjs-adapter-moment/chartjs-adapter-moment.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/hammer/hammer.min.js')?>"></script> <!-- Needed for chartjs-plugin-zoom -->
+    <script defer src="<?=pihole.fileversion('vendor/chartjs-plugin-zoom/chartjs-plugin-zoom.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/bstreeview/bstreeview.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('scripts/js/logout.js')?>"></script>
 </head>
 <body class="<?=theme.name?> hold-transition sidebar-mini <? if pihole.boxedlayout() then ?>layout-boxed<? end ?> logged-in" data-apiurl="<?=pihole.api_url()?>">
 <noscript>
diff --git a/search.lp b/search.lp
index 01b60ae6..b15a9666 100644
--- a/search.lp
+++ b/search.lp
@@ -48,5 +48,5 @@ mg.include('scripts/lua/header_authenticated.lp','r')
 
 <pre id="output" style="width: 100%; height: 100%;" hidden></pre>
 
-<script src="<?=pihole.fileversion('scripts/js/search.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/search.js')?>"></script>
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/settings-all.lp b/settings-all.lp
index f758b761..74ab85fc 100644
--- a/settings-all.lp
+++ b/settings-all.lp
@@ -32,8 +32,8 @@ mg.include('scripts/lua/settings_header.lp','r')
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings-advanced.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings-advanced.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/settings-api.lp b/settings-api.lp
index c2ab06da..65b2e260 100644
--- a/settings-api.lp
+++ b/settings-api.lp
@@ -246,10 +246,10 @@ mg.include('scripts/lua/settings_header.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/jquery-confirm/jquery.confirm.min.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/qrious/qrious.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings-api.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/jquery-confirm/jquery.confirm.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/qrious/qrious.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings-api.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/settings-dhcp.lp b/settings-dhcp.lp
index 0e918e26..e664c9db 100644
--- a/settings-dhcp.lp
+++ b/settings-dhcp.lp
@@ -225,9 +225,9 @@ mg.include('scripts/lua/settings_header.lp','r')
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings-dhcp.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings-dhcp.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/settings-dns.lp b/settings-dns.lp
index 141479f9..e36331a3 100644
--- a/settings-dns.lp
+++ b/settings-dns.lp
@@ -238,8 +238,8 @@ mg.include('scripts/lua/settings_header.lp','r')
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings-dns.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings-dns.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/settings-dnsrecords.lp b/settings-dnsrecords.lp
index 742b8eab..0ac2b620 100644
--- a/settings-dnsrecords.lp
+++ b/settings-dnsrecords.lp
@@ -107,10 +107,10 @@ mg.include('scripts/lua/settings_header.lp','r')
         </div>
     </div>
 </div>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/jquery-confirm/jquery.confirm.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings-dns-records.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/jquery-confirm/jquery.confirm.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings-dns-records.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/ip-address-sorting.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/settings-privacy.lp b/settings-privacy.lp
index 4f2827a0..45f77df0 100644
--- a/settings-privacy.lp
+++ b/settings-privacy.lp
@@ -104,8 +104,8 @@ mg.include('scripts/lua/settings_header.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings-privacy.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings-privacy.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/settings-system.lp b/settings-system.lp
index 683fb89e..fb0e0708 100644
--- a/settings-system.lp
+++ b/settings-system.lp
@@ -316,10 +316,10 @@ mg.include('scripts/lua/settings_header.lp','r')
         </div>
     </div>
 </div>
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('vendor/jquery-confirm/jquery.confirm.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/charts.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings-system.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/jquery-confirm/jquery.confirm.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/charts.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings-system.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/settings-teleporter.lp b/settings-teleporter.lp
index 1eea8036..938ed212 100644
--- a/settings-teleporter.lp
+++ b/settings-teleporter.lp
@@ -101,8 +101,8 @@ mg.include('scripts/lua/settings_header.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings-teleporter.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
+<script defer src="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings-teleporter.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/settings.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>
diff --git a/style/themes/default-auto.css b/style/themes/default-auto.css
deleted file mode 100644
index 0926ca5a..00000000
--- a/style/themes/default-auto.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* Code courtesy of https://blog.jim-nielsen.com/2019/conditional-syntax-highlighting-in-dark-mode-with-css-imports/ */
-
-/* Import light mode if color-scheme is different than dark (even not set) */
-@import "default-light.css" screen and not (prefers-color-scheme: dark);
-/* Import dark mode when applicable */
-@import "default-dark.css" screen and (prefers-color-scheme: dark);
diff --git a/taillog.lp b/taillog.lp
index 4e1c5c71..32553f6e 100644
--- a/taillog.lp
+++ b/taillog.lp
@@ -33,6 +33,6 @@ mg.include('scripts/lua/header_authenticated.lp','r')
     </div>
 </div>
 
-<script src="<?=pihole.fileversion('scripts/js/taillog.js')?>"></script>
+<script defer src="<?=pihole.fileversion('scripts/js/taillog.js')?>"></script>
 
 <? mg.include('scripts/lua/footer.lp','r')?>