Merge pull request #4999 from MassimilianoLattanzio/backend-dark-mode

[backend] Add dark mode to the backend UI

backend/app/assets/config/solidus_backend_manifest.js

@@ -1,9 +1,7 @@
 //= link_tree ../images
+//= link_tree "../stylesheets/spree/backend/themes" .css
 
 //= link spree/backend/all.js
 //= link spree/backend/all.css
 
 //= link solidus_admin/select2_locales
-
-//= link spree/backend/themes/classic.css
-//= link spree/backend/themes/solidus_admin.css

backend/app/assets/stylesheets/spree/backend/components/_navigation.scss

@@ -122,6 +122,22 @@ nav.menu {
   @media print {
     display: none
   }
+
+
+  .dark-only {
+    display: none;
+    @media (prefers-color-scheme: dark) {
+      display: block;
+    }
+  }
+
+  .light-only {
+    display: block;
+    @media (prefers-color-scheme: dark) {
+      display: none;
+    }
+  }
+
 }
 
 .admin-nav-header {
@@ -301,7 +317,8 @@ nav.menu {
 }
 
 .admin-navbar-selection {
-  margin: 0 1.5em;
+  padding: 0 1.5em;
+  width: 100%;
   position: relative;
   overflow: hidden;
   display: inline-flex;
@@ -323,7 +340,7 @@ nav.menu {
     padding: .5rem 0 .5rem .25rem;
   }
 
-   .admin-nav-hidden & {
+  .admin-nav-hidden & {
     position: relative;
 
     select {

backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss

@@ -19,6 +19,20 @@ $color-navbar-hover: $color-navbar !default;
   min-height: 100vh;
   border-right: $color-light-accent 1px solid;
 
+  .dark-only {
+    display: none;
+    @media (prefers-color-scheme: dark) {
+      display: block;
+    }
+  }
+
+  .light-only {
+    display: none;
+    @media (prefers-color-scheme: light) {
+      display: block;
+    }
+  }
+
   &--wrapper {
     position: absolute;
     top: 0;

backend/app/assets/stylesheets/spree/backend/themes/classic_dark.css.scss

@@ -0,0 +1,16 @@
+@import 'spree/backend/themes/classic';
+
+html {
+  background-color: #fff;
+  color: #fff;
+  -webkit-filter: invert(100%);
+  filter: invert(100%) hue-rotate(180deg);
+
+  img {
+    filter: invert(100%) hue-rotate(-180deg);
+  }
+
+  .brand-link img {
+    filter: invert(0%) hue-rotate(0deg);
+  }
+}

backend/app/assets/stylesheets/spree/backend/themes/classic_dimmed.css.scss

@@ -0,0 +1,16 @@
+@import 'spree/backend/themes/classic';
+
+html {
+  background-color: #fff;
+  color: #fff;
+  -webkit-filter: invert(85%);
+  filter: invert(85%) hue-rotate(180deg);
+
+  img {
+    filter: invert(100%) hue-rotate(-180deg);
+  }
+
+  .brand-link img {
+    filter: invert(0%) hue-rotate(0deg);
+  }
+}

backend/app/assets/stylesheets/spree/backend/themes/solidus_admin.css.scss

@@ -1,6 +1,7 @@
 @import "spree/backend/globals";
 
 @import "./solidus_admin/variables";
+@import "./solidus_admin/colors";
 
 @import "spree/backend/vendor";
 @import "spree/backend/shared";

backend/app/assets/stylesheets/spree/backend/themes/solidus_admin/_tables.scss

@@ -1,3 +1,5 @@
+@import "./colors";
+
 table.index {
   // Borders
   border-collapse: separate;

backend/app/assets/stylesheets/spree/backend/themes/solidus_admin_dark.css.scss

@@ -0,0 +1,16 @@
+@import "./solidus_admin";
+
+html {
+  background-color: #fff;
+  color: #fff;
+  -webkit-filter: invert(100%);
+  filter: invert(100%) hue-rotate(180deg);
+
+  img {
+    filter: invert(100%) hue-rotate(-180deg);
+  }
+
+  .brand-link img {
+    filter: invert(0%) hue-rotate(0deg);
+  }
+}

backend/app/assets/stylesheets/spree/backend/themes/solidus_admin_dimmed.css.scss

@@ -0,0 +1,16 @@
+@import "./solidus_admin";
+
+html {
+  background-color: #fff;
+  color: #fff;
+  -webkit-filter: invert(85%);
+  filter: invert(85%) hue-rotate(180deg);
+
+  img {
+    filter: invert(100%) hue-rotate(-180deg);
+  }
+
+  .brand-link img {
+    filter: invert(0%) hue-rotate(0deg);
+  }
+}

backend/app/controllers/spree/admin/locale_controller.rb

@@ -11,9 +11,15 @@ def set
         if locale_is_available?(requested_locale)
           I18n.locale = requested_locale
           session[set_user_language_locale_key] = requested_locale
-          render json: { locale: requested_locale, location: spree.admin_url }
+          respond_to do |format|
+            format.json { render json: { locale: requested_locale, location: spree.admin_url } }
+            format.html { redirect_back_or_to spree.admin_url, notice: t('spree.locale_changed') }
+          end
         else
-          render json: { locale: I18n.locale }, status: 404
+          respond_to do |format|
+            format.json { render json: { locale: I18n.locale }, status: 404 }
+            format.html { redirect_back_or_to spree.admin_url, error: t('spree.error') }
+          end
         end
       end
 

backend/app/controllers/spree/admin/theme_controller.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Spree
+  module Admin
+    class ThemeController < Spree::Admin::BaseController
+      skip_before_action :authorize_admin, only: [:set]
+
+      def set
+        requested_theme = params[:switch_to_theme].presence
+
+        # Avoid interpolating user content into the session key
+        system_theme = params[:system_theme].presence == "dark" ? "dark" : "light"
+        session_key = :"admin_#{system_theme}_theme"
+
+        if theme_is_available?(requested_theme)
+          session[session_key] = requested_theme
+          redirect_back_or_to spree.admin_url, notice: t('spree.theme_changed')
+        else
+          redirect_back_or_to spree.admin_url, error: t('spree.error')
+        end
+      end
+
+      private
+
+      def theme_is_available?(theme)
+        theme && Spree::Backend::Config.themes.key?(theme.to_sym)
+      end
+    end
+  end
+end

backend/app/views/spree/admin/shared/_head.html.erb

@@ -6,7 +6,8 @@
 <title><%= admin_page_title %></title>
 
 <%= favicon_link_tag 'favicon.ico' %>
-<%= stylesheet_link_tag Spree::Backend::Config.theme_path, media: 'all', data: {turbolinks_track: 'reload'} %>
+<%= stylesheet_link_tag Spree::Backend::Config.theme_path(session[:admin_light_theme]), media: '(prefers-color-scheme: light)', data: {turbolinks_track: 'reload'} %>
+<%= stylesheet_link_tag Spree::Backend::Config.theme_path(session[:admin_dark_theme]), media: '(prefers-color-scheme: dark)', data: {turbolinks_track: 'reload'} %>
 <%= javascript_include_tag 'spree/backend/all', data: {turbolinks_track: 'reload'} %>
 
 <%- if Rails.env.test? %>

backend/app/views/spree/admin/shared/_js_locale_data.html.erb

@@ -33,7 +33,7 @@
 <script data-hook='admin-custom-translations'>
 </script>
 
-<% if I18n.locale != :en %>
-  <%= javascript_include_tag "solidus_admin/select2_locales/select2_locale_#{I18n.locale}",
-    data: {turbolinks_track: 'reload'} %>
+<% if I18n.locale != :en && I18n.locale %>
+  <% select2_locale_path = "solidus_admin/select2_locales/select2_locale_#{I18n.locale}" %>
+  <%= javascript_include_tag select2_locale_path, data: {turbolinks_track: 'reload'} if Rails.application.assets.find_asset(select2_locale_path) %>
 <% end %>

backend/app/views/spree/admin/shared/_locale_selection.html.erb

@@ -1,16 +1,14 @@
-<% available_locales = Spree.i18n_available_locales %>
-<% if available_locales.size > 1 %>
-  <label class="admin-navbar-selection admin-locale-selection">
-    <i class="fa fa-globe fa-fw" title="<%= I18n.t('spree.choose_dashboard_locale') %>"></i>
-    <select class="js-locale-selection custom-select fullwidth">
-      <%=
-        options_for_select(
-          available_locales.map do |locale|
-            [I18n.t('spree.i18n.this_file_language', locale: locale, default: locale.to_s, fallback: false), locale]
-          end.sort,
-          selected: I18n.locale,
-        )
-      %>
-    </select>
-  </label>
+<% available_locale_options_for_select = Spree.i18n_available_locales.map {
+  [I18n.t('spree.i18n.this_file_language', locale: _1, default: _1.to_s, fallback: false), _1]
+}.sort %>
+
+<% if available_locale_options_for_select.size > 1 %>
+  <%= form_tag(admin_set_locale_path(format: :html), method: :put, style: "width: 100%;") do %>
+    <label class="admin-navbar-selection admin-locale-selection">
+      <i class="fa fa-globe fa-fw" title="<%= I18n.t('spree.choose_dashboard_locale') %>"></i>
+      <select class="custom-select fullwidth" onchange="this.form.requestSubmit()">
+        <%= options_for_select(available_locale_options_for_select, I18n.locale) %>
+      </select>
+    </label>
+  <% end %>
 <% end %>

backend/app/views/spree/admin/shared/_locale_selection_solidus_admin.html.erb

@@ -0,0 +1,17 @@
+<% available_locale_options_for_select = Spree.i18n_available_locales.map {
+  [I18n.t('spree.i18n.this_file_language', locale: _1, default: _1.to_s, fallback: false), _1]
+}.sort %>
+
+<% if available_locale_options_for_select.size > 1 %>
+  <li>
+    <%= form_tag(admin_set_locale_path(format: :html), method: :put, style: "width: 100%;") do %>
+      <label>
+        <svg aria-hidden="true"><use xlink:href="<%= image_path('spree/backend/themes/solidus_admin/remixicon.symbol.svg') %>#ri-global-line"></use></svg>
+        <select name="switch_to_locale" onchange="this.form.requestSubmit()">
+          <%= options_for_select(available_locale_options_for_select, selected: I18n.locale) %>
+        </select>
+        <svg aria-hidden="true"><use xlink:href="<%= image_path('spree/backend/themes/solidus_admin/remixicon.symbol.svg') %>#ri-expand-up-down-line"></use></svg>
+      </label>
+    <% end %>
+  </li>
+<% end %>

backend/app/views/spree/admin/shared/_navigation.html.erb

@@ -7,6 +7,7 @@
         <span class="text"><%= t('spree.minimize_menu') %></span>
       <% end %>
       <%= render partial: 'spree/admin/shared/locale_selection' %>
+      <%= render partial: 'spree/admin/shared/theme_selection' %>
       <% if lookup_context.exists?('spree/admin/shared/_navigation_footer') %>
         <%= render partial: 'spree/admin/shared/navigation_footer' %>
       <% else %>

backend/app/views/spree/admin/shared/_navigation_solidus_admin.html.erb

@@ -49,32 +49,8 @@
           </summary>
 
           <ul>
-            <% if (available_locales = Spree.i18n_available_locales).any? %>
-              <li>
-                <label>
-                  <svg aria-hidden="true"><use xlink:href="<%= image_path('spree/backend/themes/solidus_admin/remixicon.symbol.svg') %>#ri-global-line"></use></svg>
-                  <select class="js-locale-selection">
-                    <%= options_for_select(
-                      available_locales
-                        .map do |locale|
-                          [
-                            t(
-                              "spree.i18n.this_file_language",
-                              locale: locale,
-                              default: locale.to_s,
-                              fallback: false
-                            ),
-                            locale
-                          ]
-                        end
-                        .sort,
-                      selected: I18n.locale
-                    ) %>
-                  </select>
-                  <svg aria-hidden="true"><use xlink:href="<%= image_path('spree/backend/themes/solidus_admin/remixicon.symbol.svg') %>#ri-expand-up-down-line"></use></svg>
-                </label>
-              </li>
-            <% end %>
+            <%= render 'spree/admin/shared/locale_selection_solidus_admin' %>
+            <%= render 'spree/admin/shared/theme_selection_solidus_admin' %>
 
             <% if can?(:admin, spree_current_user) %>
               <li data-hook="user-account-link">

backend/app/views/spree/admin/shared/_theme_selection.html.erb

@@ -0,0 +1,21 @@
+<% theme_options_for_select = Spree::Backend::Config.themes.keys.map { |theme| [theme.to_s.humanize, theme] }.sort %>
+
+<%= form_tag(admin_set_theme_path(format: :html), method: :put, style: "width: 100%;", class: "light-only") do %>
+  <%= hidden_field_tag :system_theme, :light %>
+  <label class="admin-navbar-selection">
+    <i class="fa fa-sun-o fa-fw" title="<%= I18n.t('spree.choose_dashboard_theme') %>"></i>
+    <select name="switch_to_theme" class="custom-select fullwidth" onchange="this.form.requestSubmit()">
+      <%= options_for_select(theme_options_for_select, session[:admin_light_theme] || Spree::Backend::Config.theme) %>
+    </select>
+  </label>
+<% end %>
+
+<%= form_tag(admin_set_theme_path(format: :html), method: :put, style: "width: 100%;", class: "dark-only") do %>
+  <%= hidden_field_tag :system_theme, :dark %>
+  <label class="admin-navbar-selection">
+    <i class="fa fa-moon-o fa-fw" title="<%= I18n.t('spree.choose_dashboard_theme') %>"></i>
+    <select name="switch_to_theme" class="custom-select fullwidth" onchange="this.form.requestSubmit()">
+      <%= options_for_select(theme_options_for_select, session[:admin_dark_theme] || Spree::Backend::Config.dark_theme) %>
+    </select>
+  </label>
+<% end %>

backend/app/views/spree/admin/shared/_theme_selection_solidus_admin.html.erb

@@ -0,0 +1,25 @@
+<% theme_options_for_select = Spree::Backend::Config.themes.keys.map { |theme| [theme.to_s.humanize, theme] }.sort %>
+
+<li>
+  <%= form_tag(admin_set_theme_path(format: :html), method: :put, style: "width: 100%;", class: "light-only") do %>
+    <%= hidden_field_tag :system_theme, :light %>
+    <label>
+      <svg aria-hidden="true"><use xlink:href="<%= image_path('spree/backend/themes/solidus_admin/remixicon.symbol.svg') %>#ri-sun-line"></use></svg>
+      <select name="switch_to_theme" onchange="this.form.requestSubmit()">
+        <%= options_for_select(theme_options_for_select, session[:admin_light_theme] || Spree::Backend::Config.theme) %>
+      </select>
+      <svg aria-hidden="true"><use xlink:href="<%= image_path('spree/backend/themes/solidus_admin/remixicon.symbol.svg') %>#ri-expand-up-down-line"></use></svg>
+    </label>
+  <% end %>
+
+  <%= form_tag(admin_set_theme_path(format: :html), method: :put, style: "width: 100%;", class: "dark-only") do %>
+    <%= hidden_field_tag :system_theme, :dark %>
+    <label>
+      <svg aria-hidden="true"><use xlink:href="<%= image_path('spree/backend/themes/solidus_admin/remixicon.symbol.svg') %>#ri-moon-line"></use></svg>
+      <select name="switch_to_theme" onchange="this.form.requestSubmit()">
+        <%= options_for_select(theme_options_for_select, session[:admin_dark_theme] || Spree::Backend::Config.dark_theme) %>
+      </select>
+      <svg aria-hidden="true"><use xlink:href="<%= image_path('spree/backend/themes/solidus_admin/remixicon.symbol.svg') %>#ri-expand-up-down-line"></use></svg>
+    </label>
+  <% end %>
+</li>

backend/config/routes.rb

@@ -6,6 +6,7 @@
     get '/search/products', to: "search#products", as: :search_products
 
     put '/locale/set', to: 'locale#set', defaults: { format: :json }, as: :set_locale
+    put '/theme/set', to: 'theme#set', defaults: { format: :json }, as: :set_theme
 
     resources :dashboards, only: [] do
       collection do