Add a theme selector to the backend UI

- 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.

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

backend/app/assets/javascripts/spree/backend.js

@@ -41,6 +41,7 @@
 //= require spree/backend/images/index
 //= require spree/backend/images/upload
 //= require spree/backend/locale_selection
+//= require spree/backend/theme_selection
 //= require spree/backend/navigation
 //= require spree/backend/option_type_autocomplete
 //= require spree/backend/option_value_picker

backend/app/assets/javascripts/spree/backend/theme_selection.js

@@ -0,0 +1,36 @@
+Spree.ready(() => {
+ const themeSelect = document.querySelector(".js-theme-selection")
+ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)")
+ const lightTheme = themeSelect.dataset.selectedLightTheme
+ const darkTheme = themeSelect.dataset.selectedDarkTheme
+ const defaultTheme = themeSelect.dataset.defaultTheme
+
+ const updateSelection = () => {
+ console.log({
+ themeSelect,
+ prefersDark,
+ lightTheme,
+ darkTheme,
+ defaultTheme,
+ })
+ themeSelect.value = (prefersDark.matches ? darkTheme : lightTheme) || defaultTheme
+ }
+
+ const setTheme = () => {
+ Spree.ajax({
+ type: "PUT",
+ dataType: "json",
+ url: Spree.pathFor("admin/theme/set"),
+ data: {
+ switch_to_theme: themeSelect.value,
+ system_theme: prefersDark.matches ? "dark" : "light",
+ },
+ success: (data) => document.location.reload(),
+ })
+ }
+
+ updateSelection()
+
+ prefersDark.addEventListener("change", updateSelection)
+ themeSelect.addEventListener("change", setTheme)
+})

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
+ head :ok
+ else
+ head :not_found
+ 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

@@ -6,6 +6,7 @@
  <%= button_tag class: 'btn fa fa-chevron-circle-left', id: 'admin-nav-toggle', type: :button do %>
  <span class="text"><%= t('spree.minimize_menu') %></span>
  <% end %>
+ <%= render partial: 'spree/admin/shared/theme_selection' %>
  <%= render partial: 'spree/admin/shared/locale_selection' %>
  <% if lookup_context.exists?('spree/admin/shared/_navigation_footer') %>
  <%= render partial: 'spree/admin/shared/navigation_footer' %>

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

@@ -0,0 +1,13 @@
+<label class="admin-navbar-selection">
+ <i class="fa fa-paint-brush fa-fw" title="<%= I18n.t('spree.choose_dashboard_theme') %>"></i>
+ <select
+ class="js-theme-selection custom-select fullwidth"
+ data-selected-light-theme="<%= session[:admin_light_theme] %>"
+ data-selected-dark-theme="<%= session[:admin_dark_theme] %>"
+ data-default-theme="<%= Spree::Backend::Config.theme %>"
+ >
+ <%= options_for_select(
+ Spree::Backend::Config.themes.keys.map { |theme| [theme.to_s.humanize, theme] }.sort,
+ ) %>
+ </select>
+</label>

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/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(:ok)
+
+ 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(:ok)
+ 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(:not_found)
+ end
+end

core/config/locales/en.yml

@@ -1135,6 +1135,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