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()
+  })
+})