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