Color mode preference stored in db

app/assets/stylesheets/parameters.scss

@@ -20,4 +20,3 @@ $table-border-factor: .1;
 $list-group-hover-bg: rgba(var(--bs-emphasis-color-rgb), .075);
 
 $enable-negative-margins: true;
-$color-mode-type: media-query;

app/assets/stylesheets/screen-auto-ltr.scss

@@ -0,0 +1,3 @@
+@use "common" with (
+  $color-mode-type: media-query
+);

app/assets/stylesheets/screen-auto-rtl.rtlcss.scss

@@ -0,0 +1,3 @@
+@use "common" with (
+  $color-mode-type: media-query
+);

app/assets/stylesheets/screen-light-ltr.scss

@@ -0,0 +1,3 @@
+@use "common" with (
+  $color-mode-type: data
+);

app/assets/stylesheets/screen-light-rtl.rtlcss.scss

@@ -0,0 +1,3 @@
+@use "common" with (
+  $color-mode-type: data
+);

app/controllers/preferences_controller.rb

@@ -21,7 +21,11 @@ def update
                                     else
                                       params[:user][:preferred_editor]
                                     end
-    if current_user.save
+
+    pref = current_user.preferences.find_or_create_by(:k => "site.color_scheme")
+    pref.v = params[:color_scheme] if params[:color_scheme]
+
+    if current_user.save && pref.save
       # Use a partial so that it is rendered during the next page load in the correct language.
       flash[:notice] = { :partial => "preferences/update_success_flash" }
       redirect_to preferences_path

app/views/layouts/_head.html.erb

@@ -5,7 +5,11 @@
   <%= javascript_include_tag "turbo", :type => "module" %>
   <%= javascript_include_tag "application" %>
   <%= javascript_include_tag "i18n/#{I18n.locale}" %>
-  <%= stylesheet_link_tag "screen-#{dir}", :media => "screen" %>
+  <% if current_user&.preferences&.find_by(:k => "site.color_scheme")&.v == "light" %>
+    <%= stylesheet_link_tag "screen-light-#{dir}", :media => "screen" %>
+  <% else %>
+    <%= stylesheet_link_tag "screen-auto-#{dir}", :media => "screen" %>
+  <% end %>
   <%= stylesheet_link_tag "print-#{dir}", :media => "print" %>
   <%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %>
   <%= render :partial => "layouts/meta" %>

app/views/preferences/edit.html.erb

@@ -7,6 +7,14 @@
 
   <%= f.text_field :languages %>
 
+  <div class="mb-3">
+    <%= label_tag "color_scheme", t("preferences.show.preferred_color_scheme"), :class => "form-label" %>
+    <%= select_tag "color_scheme",
+                   options_for_select([[t("preferences.show.color_schemes.auto"), "auto"],
+                                       [t("preferences.show.color_schemes.light"), "light"]], current_user.preferences.find_by(:k => "site.color_scheme")&.v),
+                   :class => "form-select" %>
+  </div>
+
   <%= f.primary t(".save") %>
   <%= link_to t(".cancel"), preferences_path, :class => "btn btn-link" %>
 <% end %>

app/views/preferences/show.html.erb

@@ -19,7 +19,15 @@
         <li><%= locale %></li>
       <% end %>
     </ul>
+  </dd>
 
+  <dt class="col-sm-4"><%= t ".preferred_color_scheme" %></dt>
+  <dd class="col-sm-8">
+    <% if current_user.preferences.find_by(:k => "site.color_scheme")&.v == "light" %>
+      <%= t ".color_schemes.light" %>
+    <% else %>
+      <%= t ".color_schemes.auto" %>
+    <% end %>
   </dd>
 </dl>
 

config/locales/en.yml

@@ -1807,6 +1807,10 @@ en:
       title: My Preferences
       preferred_editor: Preferred Editor
       preferred_languages: Preferred Languages
+      preferred_color_scheme: Preferred Color Scheme
+      color_schemes:
+        auto: Auto
+        light: Light
       edit_preferences: Edit Preferences
     edit:
       title: Edit Preferences

test/controllers/preferences_controller_test.rb

@@ -22,6 +22,7 @@ def test_routes
 
   def test_update_preferred_editor
     user = create(:user, :languages => [])
+    user.preferences.create(:k => "site.color_scheme", :v => "light")
     session_for(user)
 
     # Changing to a invalid editor should fail
@@ -32,6 +33,7 @@ def test_update_preferred_editor
     assert_select ".alert-success", false
     assert_select ".alert-danger", true
     assert_select "form > div > select#user_preferred_editor > option[selected]", false
+    assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v
 
     # Changing to a valid editor should work
     user.preferred_editor = "id"
@@ -41,6 +43,7 @@ def test_update_preferred_editor
     assert_template :show
     assert_select ".alert-success", /^Preferences updated/
     assert_select "dd", "iD (in-browser editor)"
+    assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v
 
     # Changing to the default editor should work
     user.preferred_editor = "default"
@@ -50,5 +53,28 @@ def test_update_preferred_editor
     assert_template :show
     assert_select ".alert-success", /^Preferences updated/
     assert_select "dd", "Default (currently iD)"
+    assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v
+  end
+
+  def test_update_preferred_color_scheme
+    user = create(:user, :languages => [])
+    session_for(user)
+    assert_nil user.preferences.find_by(:k => "site.color_scheme")
+
+    # Changing when previously not defined
+    put preferences_path, :params => { :user => user.attributes, :color_scheme => "light" }
+    assert_redirected_to preferences_path
+    follow_redirect!
+    assert_template :show
+    assert_select ".alert-success", /^Preferences updated/
+    assert_equal "light", user.preferences.find_by(:k => "site.color_scheme")&.v
+
+    # Changing when previously defined
+    put preferences_path, :params => { :user => user.attributes, :color_scheme => "auto" }
+    assert_redirected_to preferences_path
+    follow_redirect!
+    assert_template :show
+    assert_select ".alert-success", /^Preferences updated/
+    assert_equal "auto", user.preferences.find_by(:k => "site.color_scheme")&.v
   end
 end