Add auto/manual color scheme stylesheets depending on user preferences

diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 28bf569016a607d81b4aa01b994226ca8366845e..07549d69bb33e939238f98e6ef6d1e44eea4a816 100644 (file)
--- a/app/assets/stylesheets/parameters.scss
+++ b/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;

diff --git a/app/assets/stylesheets/screen-auto-ltr.scss b/app/assets/stylesheets/screen-auto-ltr.scss
new file mode 100644 (file)
index 0000000..89e3159
--- /dev/null
+++ b/app/assets/stylesheets/screen-auto-ltr.scss
@@ -0,0 +1,3 @@
+@use "common" with (
+  $color-mode-type: media-query
+);

diff --git a/app/assets/stylesheets/screen-auto-rtl.rtlcss.scss b/app/assets/stylesheets/screen-auto-rtl.rtlcss.scss
new file mode 100644 (file)
index 0000000..89e3159
--- /dev/null
+++ b/app/assets/stylesheets/screen-auto-rtl.rtlcss.scss
@@ -0,0 +1,3 @@
+@use "common" with (
+  $color-mode-type: media-query
+);

diff --git a/app/assets/stylesheets/screen-ltr.scss b/app/assets/stylesheets/screen-ltr.scss
deleted file mode 100644 (file)
index c525060..0000000
--- a/app/assets/stylesheets/screen-ltr.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "common";

diff --git a/app/assets/stylesheets/screen-manual-ltr.scss b/app/assets/stylesheets/screen-manual-ltr.scss
new file mode 100644 (file)
index 0000000..00f65f7
--- /dev/null
+++ b/app/assets/stylesheets/screen-manual-ltr.scss
@@ -0,0 +1,3 @@
+@use "common" with (
+  $color-mode-type: data
+);

diff --git a/app/assets/stylesheets/screen-manual-rtl.rtlcss.scss b/app/assets/stylesheets/screen-manual-rtl.rtlcss.scss
new file mode 100644 (file)
index 0000000..00f65f7
--- /dev/null
+++ b/app/assets/stylesheets/screen-manual-rtl.rtlcss.scss
@@ -0,0 +1,3 @@
+@use "common" with (
+  $color-mode-type: data
+);

diff --git a/app/assets/stylesheets/screen-rtl.rtlcss.scss b/app/assets/stylesheets/screen-rtl.rtlcss.scss
deleted file mode 100644 (file)
index c525060..0000000
--- a/app/assets/stylesheets/screen-rtl.rtlcss.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "common";

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 7ce804ced01af000ada0560ee4f27f99046618ac..56d9a6763e0a4c3d3b59378bdcddd40d46f4dac0 100644 (file)
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -281,7 +281,15 @@ class ApplicationController < ActionController::Base
     end
   end
 
-  helper_method :preferred_editor
+  def preferred_site_color_scheme
+    if current_user
+      current_user.preferences.find_by(:k => "site.color_scheme")&.v || "auto"
+    else
+      "auto"
+    end
+  end
+
+  helper_method :preferred_editor, :preferred_site_color_scheme
 
   def update_totp
     if Settings.key?(:totp_key)

diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 3c691612ab1d4c37ec1ad7a0f8c001b334e50272..8cab522236d4b20cc921f796cb40aff33a92847b 100644 (file)
--- a/app/views/layouts/_head.html.erb
+++ b/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 preferred_site_color_scheme == "auto" %>
+    <%= stylesheet_link_tag "screen-auto-#{dir}", :media => "screen" %>
+  <% else %>
+    <%= stylesheet_link_tag "screen-manual-#{dir}", :media => "screen" %>
+  <% end %>
   <%= stylesheet_link_tag "print-#{dir}", :media => "print" %>
   <%= stylesheet_link_tag "leaflet-all", :media => "screen, print" %>
   <%= render :partial => "layouts/meta" %>

diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index 7c921658d46102d54b720eb5deb57a7107f07d9b..dd573d476bcd11b53882bc2f20066693fb7cbc26 100644 (file)
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="<%= I18n.locale %>" dir="<%= dir %>">
+<%= tag.html :lang => I18n.locale, :dir => dir, :data => { :bs_theme => (preferred_site_color_scheme if preferred_site_color_scheme != "auto") } do %>
   <%= render :partial => "layouts/head" %>
   <body class="<%= body_class %>">
     <%= render :partial => "layouts/header" %>
@@ -8,4 +8,4 @@
     <noscript><p><img src="<%= request.protocol %><%= Settings.matomo["location"] %>/matomo.php?idsite=<%= Settings.matomo["site"] %>" class="matomo" alt="" /></p></noscript>
     <% end -%>
   </body>
-</html>
+<% end %>