Implement backend JS theme switch feature

Co-Authored-By: Elia Schito <[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,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()
+ })
+})