Widget:Tema

<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; } .dark .tema-btn {

   background: #16213e;
   border-color: rgba(255,255,255,0.1);
   color: #94a3b8;

} </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> ```

---

1. 1. Como usar em qualquer widget

• • 1. Chamar a widget no topo da predefinição:**

```