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>
This commit is contained in:
2026-04-01 20:27:25 +00:00
parent 76c9c2d2db
commit e8b53f0b1b
2 changed files with 45 additions and 0 deletions

View File

@@ -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 ─── // ─── Expose globally ───
window.POS_USER = { window.POS_USER = {
name: name, name: name,

View File

@@ -36,12 +36,18 @@
+ '</a>'; + '</a>';
}).join(''); }).join('');
var currentTheme = localStorage.getItem('pos_theme') || 'industrial';
var sidebarHtml = '' var sidebarHtml = ''
+ '<div class="pos-sidebar__brand">' + '<div class="pos-sidebar__brand">'
+ ' <div class="pos-sidebar__logo">N</div>' + ' <div class="pos-sidebar__logo">N</div>'
+ ' <div class="pos-sidebar__title">Nexus POS</div>' + ' <div class="pos-sidebar__title">Nexus POS</div>'
+ '</div>' + '</div>'
+ '<nav class="pos-sidebar__nav">' + linksHtml + '</nav>' + '<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__footer">'
+ ' <div class="pos-sidebar__user">' + ' <div class="pos-sidebar__user">'
+ ' <div class="pos-sidebar__avatar">' + initials + '</div>' + ' <div class="pos-sidebar__avatar">' + initials + '</div>'
@@ -129,6 +135,20 @@
+ ' color: var(--color-error, #F85149);' + ' color: var(--color-error, #F85149);'
+ ' border-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 */' + '/* Push main content right */'
+ '.pos-main-offset { margin-left: 220px; }' + '.pos-main-offset { margin-left: 220px; }'
+ '@media (max-width: 768px) {' + '@media (max-width: 768px) {'