Implement backend JS theme switch feature

solidusio · Apr 3, 2023 · ea70e83 · ea70e83
1 parent 764b7b4
commit ea70e83
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/backend/app/assets/javascripts/spree/backend/components/admin_nav.js b/backend/app/assets/javascripts/spree/backend/components/admin_nav.js
@@ -21,4 +21,32 @@ Spree.ready(function() {
  if (document.body.classList.contains('admin-nav-hidden')) {
  $(adminNavToggle).removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right');
  }
+
+ var themeToggle = document.querySelector("#theme-toggle");
+
+ if (themeToggle) {
+ themeToggle.addEventListener("click", function(e) {
+ e.preventDefault();
+
+ // Check the current theme based on cookies or OS's default
+ var currentTheme;
+ if(document.querySelector('html').classList.contains("light-theme")) {
+ currentTheme = 'light';
+ } else if(document.querySelector('html').classList.contains("dark-theme")) {
+ currentTheme = 'dark';
+ } else {
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ currentTheme = 'dark';
+ } else {
+ currentTheme = 'light';
+ }
+ }
+
+ var newTheme = currentTheme == 'light' ? 'dark' : 'light';
+
+ document.querySelector('html').classList.remove("light-theme", "dark-theme");
+ document.querySelector('html').classList.add(newTheme + "-theme");
+ document.cookie = "theme=" + newTheme + "; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+ });
+ }
 });
diff --git a/backend/app/views/spree/layouts/admin.html.erb b/backend/app/views/spree/layouts/admin.html.erb
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="<%= I18n.locale %>">
+<html lang="<%= I18n.locale %>" class="<%= "#{cookies[:theme]}-theme" if cookies[:theme] %>">
  <head data-hook="admin_inside_head">
  <%= render 'spree/admin/shared/head' %>
  </head>