adaptive color mode if dark mode is not enabled.

Views/Home/Index.cshtml

@@ -63,7 +63,7 @@
         <div class="d-flex lubelogger-navbar">
             <img src="@logoUrl" />
             <div class="lubelogger-navbar-button">
-                <button type="button" class="btn @(userConfig.UseDarkMode ? "btn-dark" : "btn-light")" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
+                <button type="button" class="btn btn-adaptive" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
             </div>
         </div>
     </div>

Views/Shared/_Layout.cshtml

@@ -54,7 +54,7 @@
     <script>
         function getGlobalConfig() {
             return {
-                useDarkMode : "@useDarkMode" == "True",
+                useDarkMode: "@useDarkMode" == "True" || window.matchMedia('(prefers-color-scheme: dark)').matches,
                 enableCsvImport : "@enableCsvImports" == "True",
                 useMarkDown: "@useMarkDown" == "True",
                 currencySymbol: decodeHTMLEntities("@numberFormat.CurrencySymbol"),
@@ -111,6 +111,12 @@
                     break;
             }
         }
+        function setThemeBasedOnDevice() {
+            var systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (systemPreference) {
+                $(document.documentElement).attr("data-bs-theme", "dark");
+            }
+        }
     </script>
     @await RenderSectionAsync("Scripts", required: false)
 </head>
@@ -122,3 +128,9 @@
     </div>
 </body>
 </html>
+@if (!useDarkMode)
+{
+    <script>
+        setThemeBasedOnDevice();
+    </script>
+}

Views/Vehicle/Index.cshtml

@@ -78,7 +78,7 @@
             <h1 class="text-truncate display-4">@($"{Model.Year} {Model.Make} {Model.Model}")<small class="text-body-secondary">@($"(#{Model.LicensePlate})")</small></h1>
             <button onclick="editVehicle(@Model.Id)" class="lubelogger-tab btn btn-warning btn-md mt-1 mb-1"><i class="bi bi-pencil-square"></i></button>
             <div class="lubelogger-navbar-button">
-                <button type="button" class="btn @(userConfig.UseDarkMode ? "btn-dark" : "btn-light")" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
+                <button type="button" class="btn btn-adaptive" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
             </div>
         </div>
     </div>