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 %>
         <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' %>
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 @@
+<div class="admin-theme-selection">
+  <select class="js-theme-selection custom-select fullwidth">
+    <option value="system"><%= t("spree.admin.themes.system") %></option>
+    <option value="light"><%= t("spree.admin.themes.light") %></option>
+    <option value="dark"><%= t("spree.admin.themes.dark") %></option>
+  </select>
+</div>
diff --git a/core/config/locales/en.yml b/core/config/locales/en.yml
index a9d4d95b6e6..123f6e3193a 100644
--- a/core/config/locales/en.yml
+++ b/core/config/locales/en.yml
@@ -973,6 +973,10 @@ en:
         zones: Zones
       taxons:
         display_order: Display Order
+      themes:
+        dark: Dark Theme
+        light: Light Theme
+        system: System Theme
       user:
         account: Account
         addresses: Addresses