Merge pull request #627 from hargata/Hargata/adaptive.color.mode

Added switch for adaptive color mode.
hargata · Sep 23, 2024 · dfa56c2 · dfa56c2
2 parents 6916161 + 104d4ba
commit dfa56c2
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 4 deletions.
diff --git a/Helper/ConfigHelper.cs b/Helper/ConfigHelper.cs
@@ -179,6 +179,7 @@ public UserConfig GetUserConfig(ClaimsPrincipal user)
             {
                 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)]),

diff --git a/Models/UserConfig.cs b/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; }

diff --git a/Views/Home/_Settings.cshtml b/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>

diff --git a/Views/Shared/_Layout.cshtml b/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();

diff --git a/appsettings.json b/appsettings.json
@@ -7,6 +7,7 @@
   },
   "AllowedHosts": "*",
   "UseDarkMode": false,
+  "UseSystemColorMode": false,
   "EnableCsvImports": true,
   "UseMPG": true,
   "UseDescending": false,

diff --git a/wwwroot/defaults/en_US.json b/wwwroot/defaults/en_US.json
diff --git a/wwwroot/js/settings.js b/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'),