Added switch for adaptive color mode.

Helper/ConfigHelper.cs

@@ -179,6 +179,7 @@ namespace CarCareTracker.Helper
             {
                 EnableCsvImports = bool.Parse(_config[nameof(UserConfig.EnableCsvImports)]),
                 UseDarkMode = bool.Parse(_config[nameof(UserConfig.UseDarkMode)]),
+                UseSystemColorMode = bool.Parse(_config[nameof(UserConfig.UseSystemColorMode)]),
                 UseMPG = bool.Parse(_config[nameof(UserConfig.UseMPG)]),
                 UseDescending = bool.Parse(_config[nameof(UserConfig.UseDescending)]),
                 EnableAuth = bool.Parse(_config[nameof(UserConfig.EnableAuth)]),

Models/UserConfig.cs

@@ -3,6 +3,7 @@
     public class UserConfig
     {
         public bool UseDarkMode { get; set; }
+        public bool UseSystemColorMode { get; set; }
         public bool EnableCsvImports { get; set; }
         public bool UseMPG { get; set; }
         public bool UseDescending { get; set; }

Views/Home/_Settings.cshtml

@@ -13,10 +13,14 @@
     <div class="col-12 col-md-6">
         <input id="preferredGasUnit" style="display:none;" value="@Model.UserConfig.PreferredGasUnit" />
         <input id="preferredFuelMileageUnit" style="display:none;" value="@Model.UserConfig.PreferredGasMileageUnit" />
-        <div class="form-check form-switch">
-            <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="enableDarkMode" checked="@Model.UserConfig.UseDarkMode">
+        <div class="form-check form-switch form-check-inline">
+            <input class="form-check-input" onChange="updateColorModeSettings(this)" type="checkbox" role="switch" id="enableDarkMode" checked="@Model.UserConfig.UseDarkMode">
             <label class="form-check-label" for="enableDarkMode">@translator.Translate(userLanguage, "Dark Mode")</label>
         </div>
+        <div class="form-check form-switch form-check-inline">
+            <input class="form-check-input" onChange="updateColorModeSettings(this)" type="checkbox" role="switch" id="useSystemColorMode" checked="@Model.UserConfig.UseSystemColorMode">
+            <label class="form-check-label" for="useSystemColorMode">@translator.Translate(userLanguage, "Adaptive Color Mode")</label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input" onChange="updateSettings()" type="checkbox" role="switch" id="enableCsvImports" checked="@Model.UserConfig.EnableCsvImports">
             <label class="form-check-label" for="enableCsvImports">@translator.Translate(userLanguage, "Enable CSV Imports")</label>

Views/Shared/_Layout.cshtml

@@ -5,6 +5,7 @@
 @{
     var userConfig = config.GetUserConfig(User);
     var useDarkMode = userConfig.UseDarkMode;
+    var useSystemColorMode = userConfig.UseSystemColorMode;
     var enableCsvImports = userConfig.EnableCsvImports;
     var useMPG = userConfig.UseMPG;
     var useMarkDown = userConfig.UseMarkDownOnSavedNotes;
@@ -128,7 +129,7 @@
     </div>
 </body>
 </html>
-@if (!useDarkMode)
+@if (useSystemColorMode)
 {
     <script>
         setThemeBasedOnDevice();

appsettings.json

@@ -7,6 +7,7 @@
   },
   "AllowedHosts": "*",
   "UseDarkMode": false,
+  "UseSystemColorMode": false,
   "EnableCsvImports": true,
   "UseMPG": true,
   "UseDescending": false,

wwwroot/js/settings.js

@@ -21,6 +21,20 @@ function deleteLanguage() {
         updateSettings();
     });
 }
+function updateColorModeSettings(e) {
+    var colorMode = $(e).prop("id");
+    switch (colorMode) {
+        case "enableDarkMode":
+            //uncheck system prefernce
+            $("#useSystemColorMode").prop('checked', false);
+            updateSettings();
+            break;
+        case "useSystemColorMode":
+            $("#enableDarkMode").prop('checked', false);
+            updateSettings();
+            break;
+    }
+}
 function updateSettings() {
     var visibleTabs = getCheckedTabs();
     var defaultTab = $("#defaultTab").val();
@@ -34,6 +48,7 @@ function updateSettings() {
 
     var userConfigObject = {
         useDarkMode: $("#enableDarkMode").is(':checked'),
+        useSystemColorMode: $("#useSystemColorMode").is(':checked'),
         enableCsvImports: $("#enableCsvImports").is(':checked'),
         useMPG: $("#useMPG").is(':checked'),
         useDescending: $("#useDescending").is(':checked'),