Mudanças entre as edições de "Widget:Tema"

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '<style> .tema-btn { position: absolute; top: 16px; right: 16px; background: #f3f4f6; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; paddin...')
 
 
(Uma revisão intermediária pelo mesmo usuário não está sendo mostrada)
Linha 17: Linha 17:
}
}
.tema-btn:hover { opacity: 0.8; }
.tema-btn:hover { opacity: 0.8; }
.dark .tema-btn {
    background: #16213e;
    border-color: rgba(255,255,255,0.1);
    color: #94a3b8;
}
</style>
</style>
<script>
window.TemaInit = function(wrapSelector, darkClass) {
    darkClass = darkClass || 'dark';
    document.querySelectorAll(wrapSelector).forEach(function(wrap) {
        var btn = wrap.querySelector('.tema-btn');
        if (!btn) return;
        var saved = localStorage.getItem('wiki-tema');
        if (saved === 'dark') {
            wrap.classList.add(darkClass);
            btn.textContent = '☀ Light';
        }
        btn.addEventListener('click', function() {
            wrap.classList.toggle(darkClass);
            var isDark = wrap.classList.contains(darkClass);
            btn.textContent = isDark ? '☀ Light' : '☾ Dark';
            localStorage.setItem('wiki-tema', isDark ? 'dark' : 'light');
        });
    });
};
</script>
```
---
## Como usar em qualquer widget
**1. Chamar a widget no topo da predefinição:**
```
{{#widget:Tema}}{{#widget:MinhaWidget}}{{#invoke:MeuModulo|render|...}}

Edição atual tal como às 03h09min de 17 de março de 2026

<style> .tema-btn { 

   position: absolute;
   top: 16px;
   right: 16px;
   background: #f3f4f6;
   border: 1px solid rgba(0,0,0,0.08);
   border-radius: 8px;
   padding: 6px 12px;
   font-size: 13px;
   font-weight: 600;
   color: #6b7280;
   cursor: pointer;
   user-select: none;
   transition: all 0.2s ease;
   z-index: 10;

} .tema-btn:hover { opacity: 0.8; } </style>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Tema&oldid=45042”