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