Implement backend JS theme switch feature

solidusio · Mar 29, 2023 · 54504ef · 54504ef
1 parent a3f1b02
commit 54504ef
Show file tree

Hide file tree

Showing 2 changed files with 17 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,20 @@ Spree.ready(function() {
  if (document.body.classList.contains('admin-nav-hidden')) {
  $(adminNavToggle).removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right');
  }
+
+ var darkModeToggle = document.querySelector("#dark-mode-toggle");
+
+ if (darkModeToggle) {
+ darkModeToggle.addEventListener("click", function(e) {
+ e.preventDefault();
+ document.querySelector('html').classList.toggle("dark-mode");
+ darkModeToggle.classList.toggle("fa-sun-o");
+ darkModeToggle.classList.toggle("fa-moon-o");
+ document.cookie = "dark_mode=" + document.querySelector('html').classList.contains("dark-mode") + "; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+ });
+ }
+
+ if (document.querySelector('html').classList.contains('dark-mode')) {
+ $(darkModeToggle).removeClass('fa-sun-o').addClass('fa-moon-o');
+ }
 });
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="<%= "dark-mode" if cookies[:dark_mode] == "true" %>">
  <head data-hook="admin_inside_head">
  <%= render 'spree/admin/shared/head' %>
  </head>