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:
@@ -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,
|
||||||
|
|||||||
@@ -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) {'
|
||||||
|
|||||||
Reference in New Issue
Block a user