Theme toggle
Botón sol/luna para alternar dark/light. CSS-only — el icono visible se decide vía [data-theme] del documento.
Copy
<button class="theme-toggle" aria-label="Toggle theme"
data-on:click="window.okTheme.set(document.documentElement.getAttribute('data-theme') === 'erplora' ? 'erplora-light' : 'erplora')">
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path></svg>
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</button>
Copy
<button class="theme-toggle" aria-label="Toggle theme"
data-on:click="window.okTheme.set(($el.closest('html') || document.documentElement).getAttribute('data-theme') === 'erplora' ? 'erplora-light' : 'erplora')">
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
</svg>
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
Copy
<button class="theme-toggle" aria-label="Toggle theme"
data-on:click="window.okTheme.set(($el.closest('html') || document.documentElement).getAttribute('data-theme') === 'erplora' ? 'erplora-light' : 'erplora')">
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
</svg>
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Copy
<button class="theme-toggle with-label"
data-on:click="window.okTheme.set(document.documentElement.getAttribute('data-theme') === 'erplora' ? 'erplora-light' : 'erplora')">
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path></svg>
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
<span>Tema</span>
</button>
Copy
<button class="theme-toggle with-label">
<svg class="icon-moon">…</svg>
<span>Dark</span>
</button>
Copy
<button class="theme-toggle with-label">
<svg class="icon-moon">…</svg>
<span>Dark</span>
</button>
Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />
Cómo funciona
El CSS decide qué icono mostrar leyendo html[data-theme]. La lógica de switching la hace el JS del consumidor (en el showcase, window.okTheme.set(...)).
Si html tiene data-theme="erplora" → dark → muestra .icon-sun (clic = ir a light)
Si no → light → muestra .icon-moon (clic = ir a dark)