Add a theme selector to the backend UI with dark and dimmed variants

- Save the user preference alongside the system preference so that
  when the system switches the UI will follow along.
- Use the session to store preferences so that we start the page
  with the correct theme(s).
- Keep the current theme in the select tag up to date at page load
  and whenever the system changes.

Add dark and dimmed theme variants

dark:
  Full black background with no alteration on images.

dimmed:
  Dark gray background with dimmed images, easier on the eyes but
  less accurate colors.

Co-Authored-By: piyushswain <[email protected]>
Co-Authored-By: Elia Schito <[email protected]>
Co-Authored-By: Massimiliano Lattanzio <[email protected]>

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 {

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/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/_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

@@ -50,6 +50,7 @@
 
           <ul>
             <%= 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

backend/lib/spree/backend_configuration.rb

@@ -11,15 +11,24 @@ class BackendConfiguration < Preferences::Configuration
     #   @return [Hash] A hash containing the themes that are available for the admin panel
     preference :themes, :hash, default: {
       classic: 'spree/backend/all',
+      classic_dark: 'spree/backend/themes/classic_dark',
+      classic_dark_dimmed: 'spree/backend/themes/classic_dimmed',
+      solidus: 'spree/backend/themes/solidus_admin',
+      solidus_dark: 'spree/backend/themes/solidus_admin_dark',
+      solidus_dimmed: 'spree/backend/themes/solidus_admin_dimmed',
       solidus_admin: 'spree/backend/themes/solidus_admin'
     }
 
     # @!attribute [rw] theme
     #   @return [String] Default admin theme name
-    versioned_preference :theme, :string, initial_value: 'classic', boundaries: { "4.2.0" => "solidus_admin" }
+    versioned_preference :theme, :string, initial_value: 'classic', boundaries: { "4.2.0" => "solidus_admin", "4.4.0" => "solidus" }
 
-    def theme_path(user_theme = nil)
-      user_theme ? themes.fetch(user_theme.to_sym) : themes.fetch(theme.to_sym)
+    # @!attribute [rw] dark_theme
+    #   @return [String] Dark admin theme name
+    versioned_preference :dark_theme, :string, initial_value: 'classic', boundaries: { "4.2.0" => "solidus_admin", "4.4.0" => 'solidus_dark' }
+
+    def theme_path(user_theme)
+      themes.fetch(user_theme&.to_sym, themes.fetch(theme.to_sym))
     end
 
     # @!attribute [rw] admin_updated_navbar

backend/spec/controllers/spree/admin/theme_controller_spec.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Spree::Admin::ThemeController, type: :controller do
+  stub_authorization!
+
+  it 'sets the theme in a different session key for each system theme' do
+    stub_spree_preferences(Spree::Backend::Config, themes: { foo: 'foo-path', bar: 'bar-path' })
+
+    get :set, params: { switch_to_theme: 'foo', system_theme: 'light', format: :json }
+
+    expect(session[:admin_light_theme]).to eq('foo')
+    expect(session[:admin_dark_theme]).to eq(nil)
+    expect(response).to have_http_status(:redirect)
+
+    get :set, params: { switch_to_theme: 'bar', system_theme: 'dark', format: :json }
+    expect(session[:admin_light_theme]).to eq('foo')
+    expect(session[:admin_dark_theme]).to eq('bar')
+    expect(response).to have_http_status(:redirect)
+  end
+
+  it 'responds with "not found" for a missing theme' do
+    stub_spree_preferences(Spree::Backend::Config, themes: { foo: 'foo-path' })
+
+    get :set, params: { switch_to_theme: 'bar', system_theme: 'dark', format: :json }
+
+    expect(session[:admin_light_theme]).to eq(nil)
+    expect(session[:admin_dark_theme]).to eq(nil)
+    expect(response).to have_http_status(:redirect)
+  end
+end

backend/spec/lib/spree/backend_configuration_spec.rb

@@ -79,25 +79,25 @@ def product_path(product)
   end
 
   describe '#theme_path' do
-    it 'returns the default theme path' do
+    it 'returns the default theme path if the user theme is not set' do
       subject.themes = { foo: 'foo-theme-path' }
       subject.theme = :foo
 
-      expect(subject.theme_path).to eq('foo-theme-path')
+      expect(subject.theme_path(nil)).to eq('foo-theme-path')
     end
 
     it 'returns the default theme path when the theme is a string' do
       subject.themes = { foo: 'foo-theme-path' }
       subject.theme = 'foo'
 
-      expect(subject.theme_path).to eq('foo-theme-path')
+      expect(subject.theme_path(nil)).to eq('foo-theme-path')
     end
 
     it 'returns the fallback theme path when the default theme is missing' do
       subject.themes = { foo: 'foo-theme-path', classic: 'classic-theme-path' }
       subject.theme = :bar
 
-      expect{ subject.theme_path }.to raise_error(KeyError)
+      expect{ subject.theme_path(:baz) }.to raise_error(KeyError)
     end
 
     it 'gives priority to the user defined theme' do
@@ -107,11 +107,11 @@ def product_path(product)
       expect(subject.theme_path(:user)).to eq('user-theme-path')
     end
 
-    it 'raises an error if the user theme is missing' do
+    it 'falls back to the configure theme if the user theme is missing' do
       subject.themes = { foo: 'foo-theme-path', classic: 'classic-theme-path' }
       subject.theme = :foo
 
-      expect{ subject.theme_path(:bar) }.to raise_error(KeyError)
+      expect(subject.theme_path(:bar)).to eq('foo-theme-path')
     end
   end
 

core/config/locales/en.yml

@@ -1141,6 +1141,7 @@ en:
     choose_a_taxon_to_sort_products_for: Choose a taxon to sort products for
     choose_currency: Choose Currency
     choose_dashboard_locale: Choose Dashboard Locale
+    choose_dashboard_theme: Choose Dashboard Theme
     choose_location: Choose Location
     choose_promotion_action: Choose Action
     choose_promotion_rule: Choose Rule
@@ -2347,6 +2348,7 @@ en:
         subject: Test Mail
     test_mode: Test Mode
     thank_you_for_your_order: Thank you for your business. Please print out a copy of this confirmation page for your records.
+    theme_changed: Theme Changed
     there_are_no_items_for_this_order: There are no items for this order. Please add an item to the order to continue.
     there_were_problems_with_the_following_fields: There were problems with the following fields
     this_order_has_already_received_a_refund: This order has already received a refund