mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 21:28:18 +00:00
64 lines
1.9 KiB
Plaintext
64 lines
1.9 KiB
Plaintext
<div class="flex h-14 w-full items-center gap-2 px-4">
|
|
<button
|
|
type="button"
|
|
onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"
|
|
aria-label="Toggle sidebar"
|
|
data-tooltip="Toggle sidebar"
|
|
data-side="bottom"
|
|
data-align="start"
|
|
class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5"
|
|
>
|
|
{% lucide "panel-left" %}
|
|
</button>
|
|
<select
|
|
class="select h-8 leading-none"
|
|
id="theme-select"
|
|
>
|
|
<option value="">Default</option>
|
|
<option value="claude">Claude</option>
|
|
<option value="doom-64">Doom 64</option>
|
|
<option value="supabase">Supabase</option>
|
|
</select>
|
|
<script>
|
|
(() => {
|
|
const themeSelect = document.getElementById('theme-select');
|
|
const storedTheme = localStorage.getItem('themeVariant');
|
|
if (themeSelect && storedTheme) themeSelect.value = storedTheme;
|
|
themeSelect.addEventListener('change', () => {
|
|
const newTheme = themeSelect.value;
|
|
document.documentElement.classList.forEach(c => {
|
|
if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
|
|
});
|
|
if (newTheme) {
|
|
document.documentElement.classList.add(`theme-${newTheme}`);
|
|
localStorage.setItem('themeVariant', newTheme);
|
|
} else {
|
|
localStorage.removeItem('themeVariant');
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
aria-label="Toggle dark mode"
|
|
data-tooltip="Toggle dark mode"
|
|
data-side="bottom"
|
|
onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
|
|
class="btn-icon-outline size-8"
|
|
>
|
|
<span class="hidden dark:block">{% lucide "sun" %}</span>
|
|
<span class="block dark:hidden">{% lucide "moon" %}</span>
|
|
</button>
|
|
<a
|
|
href="https://github.com/hunvreus/basecoat"
|
|
class="btn-icon size-8"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-tooltip="GitHub repository"
|
|
data-side="bottom"
|
|
data-align="end"
|
|
>
|
|
{% lucide "github" %}
|
|
</a>
|
|
</div> |