From e8b53f0b1b46bcb84500cf81782b5ccc379e43fe Mon Sep 17 00:00:00 2001
From: consultoria-as <ialcarazsalazar@consultoria-as.com>
Date: Wed, 1 Apr 2026 20:27:25 +0000
Subject: [PATCH] fix(pos): tema consistente en todas las paginas + theme bar
 ocultada

- app-init.js: aplica tema guardado en localStorage, oculta theme-bars
  que tapaban contenido (position:fixed), sobrescribe setTheme() de
  cada pagina para usar version persistente
- sidebar.js: toggle de tema (sol/luna) integrado en el sidebar
- Tema se mantiene al navegar entre paginas

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 pos/static/js/app-init.js | 25 +++++++++++++++++++++++++
 pos/static/js/sidebar.js  | 20 ++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/pos/static/js/app-init.js b/pos/static/js/app-init.js
index 39a7f70..abad2f6 100644
--- a/pos/static/js/app-init.js
+++ b/pos/static/js/app-init.js
@@ -127,6 +127,31 @@
         });
     });
 
+    // ─── Theme management ───
+    // Persist theme in localStorage, apply on load
+    var savedTheme = localStorage.getItem('pos_theme') || 'industrial';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+
+    // Hide all theme bars (they overlap content with position:fixed)
+    document.querySelectorAll('.theme-bar').forEach(function(bar) {
+        bar.style.display = 'none';
+    });
+
+    // Expose theme toggle function (global)
+    window.posSetTheme = function(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('pos_theme', theme);
+    };
+
+    // Override any page-level setTheme functions so they use our persistent version
+    window.setTheme = window.posSetTheme;
+
+    // Also prevent any DOMContentLoaded theme switchers from overriding
+    // by re-applying our saved theme after a tick
+    setTimeout(function() {
+        document.documentElement.setAttribute('data-theme', savedTheme);
+    }, 100);
+
     // ─── Expose globally ───
     window.POS_USER = {
         name: name,
diff --git a/pos/static/js/sidebar.js b/pos/static/js/sidebar.js
index bb29643..6f8df08 100644
--- a/pos/static/js/sidebar.js
+++ b/pos/static/js/sidebar.js
@@ -36,12 +36,18 @@
             + '</a>';
     }).join('');
 
+    var currentTheme = localStorage.getItem('pos_theme') || 'industrial';
+
     var sidebarHtml = ''
         + '<div class="pos-sidebar__brand">'
         + '  <div class="pos-sidebar__logo">N</div>'
         + '  <div class="pos-sidebar__title">Nexus POS</div>'
         + '</div>'
         + '<nav class="pos-sidebar__nav">' + linksHtml + '</nav>'
+        + '<div class="pos-sidebar__theme">'
+        + '  <button class="pos-theme-btn' + (currentTheme === 'industrial' ? ' is-active' : '') + '" onclick="posSetTheme(\'industrial\'); document.querySelectorAll(\'.pos-theme-btn\').forEach(function(b){b.classList.remove(\'is-active\')}); this.classList.add(\'is-active\');" title="Tema oscuro">🌙</button>'
+        + '  <button class="pos-theme-btn' + (currentTheme === 'modern' ? ' is-active' : '') + '" onclick="posSetTheme(\'modern\'); document.querySelectorAll(\'.pos-theme-btn\').forEach(function(b){b.classList.remove(\'is-active\')}); this.classList.add(\'is-active\');" title="Tema claro">☀️</button>'
+        + '</div>'
         + '<div class="pos-sidebar__footer">'
         + '  <div class="pos-sidebar__user">'
         + '    <div class="pos-sidebar__avatar">' + initials + '</div>'
@@ -129,6 +135,20 @@
         + '  color: var(--color-error, #F85149);'
         + '  border-color: var(--color-error, #F85149);'
         + '}'
+        + '.pos-sidebar__theme {'
+        + '  display: flex; gap: 4px; padding: 8px 12px;'
+        + '  border-top: 1px solid var(--color-border, #30363D);'
+        + '}'
+        + '.pos-theme-btn {'
+        + '  flex: 1; padding: 6px; border: 1px solid var(--color-border, #30363D);'
+        + '  border-radius: 6px; background: none; cursor: pointer;'
+        + '  font-size: 1rem; text-align: center; transition: all 0.15s;'
+        + '}'
+        + '.pos-theme-btn:hover { background: var(--color-bg-base, rgba(255,255,255,0.05)); }'
+        + '.pos-theme-btn.is-active {'
+        + '  background: var(--color-primary, #F5A623);'
+        + '  border-color: var(--color-primary, #F5A623);'
+        + '}'
         + '/* Push main content right */'
         + '.pos-main-offset { margin-left: 220px; }'
         + '@media (max-width: 768px) {'