diff --git a/backend/app/assets/javascripts/spree/backend.js b/backend/app/assets/javascripts/spree/backend.js index fdb073e0b95..50d821076b5 100644 --- a/backend/app/assets/javascripts/spree/backend.js +++ b/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 diff --git a/backend/app/assets/javascripts/spree/backend/theme_selection.js b/backend/app/assets/javascripts/spree/backend/theme_selection.js new file mode 100644 index 00000000000..ac33a096d4e --- /dev/null +++ b/backend/app/assets/javascripts/spree/backend/theme_selection.js @@ -0,0 +1,21 @@ +Spree.ready(function () { + const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)") + const themeSelect = document.querySelector(".js-theme-selection") + + const updateTheme = () => { + const theme = window.localStorage.getItem("theme") || "system" + const systemTheme = darkModePreference.matches ? "dark" : "light" + document.querySelector("html").dataset.theme = theme === "system" ? systemTheme : theme + return theme + } + + themeSelect.value = updateTheme() + themeSelect.addEventListener("change", () => { + window.localStorage.setItem("theme", themeSelect.value) + updateTheme() + }) + + darkModePreference.addEventListener("change", () => { + updateTheme() + }) +}) diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss index f8d210051d9..cab380025a8 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss @@ -288,7 +288,7 @@ nav.menu { } } -.admin-locale-selection { +.admin-locale-selection, .admin-theme-selection { margin: 1em; position: relative; diff --git a/backend/app/views/spree/admin/shared/_navigation.html.erb b/backend/app/views/spree/admin/shared/_navigation.html.erb index 9f15ae2861c..17aaada1497 100644 --- a/backend/app/views/spree/admin/shared/_navigation.html.erb +++ b/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 %> <%= t('spree.minimize_menu') %> <% 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' %> diff --git a/backend/app/views/spree/admin/shared/_theme_selection.html.erb b/backend/app/views/spree/admin/shared/_theme_selection.html.erb new file mode 100644 index 00000000000..54e9178c889 --- /dev/null +++ b/backend/app/views/spree/admin/shared/_theme_selection.html.erb @@ -0,0 +1,7 @@ +