Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark themes to the backend and a theme switching support #4999

Merged
merged 3 commits into from
Nov 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions backend/app/assets/config/solidus_backend_manifest.js
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -323,7 +340,7 @@ nav.menu {
padding: .5rem 0 .5rem .25rem;
}

.admin-nav-hidden & {
.admin-nav-hidden & {
position: relative;

select {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import "spree/backend/globals";

@import "./solidus_admin/variables";
@import "./solidus_admin/colors";

@import "spree/backend/vendor";
@import "spree/backend/shared";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "./colors";

table.index {
// Borders
border-collapse: separate;
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
}
}
Original file line number Diff line number Diff line change
@@ -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);
}
}
10 changes: 8 additions & 2 deletions backend/app/controllers/spree/admin/locale_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
30 changes: 30 additions & 0 deletions backend/app/controllers/spree/admin/theme_controller.rb
Original file line number Diff line number Diff line change
@@ -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
3 changes: 2 additions & 1 deletion backend/app/views/spree/admin/shared/_head.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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? %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
28 changes: 13 additions & 15 deletions backend/app/views/spree/admin/shared/_locale_selection.html.erb
Original file line number Diff line number Diff line change
@@ -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 %>
Original file line number Diff line number Diff line change
@@ -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 %>
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
21 changes: 21 additions & 0 deletions backend/app/views/spree/admin/shared/_theme_selection.html.erb
Original file line number Diff line number Diff line change
@@ -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 %>
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions backend/config/routes.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading
Loading