neiam /bismuth

<div class="dropdown dropdown-end">
    <div tabindex="0" role="button" class="btn btn-ghost btn-sm gap-2" aria-label="Choose theme">
        <i class="fas fa-palette fa-fw"></i>
        <span class="hidden sm:inline">Theme</span>
    </div>
    <ul tabindex="0" class="dropdown-content menu bg-base-200 border border-base-300 rounded-box z-10 mt-1 w-44 p-1 shadow-lg">
        <li><button type="button" onclick="window.appSetTheme('system')"><i class="fas fa-display fa-fw"></i> System</button></li>
        {% for theme in ["light", "dark", "her", "afterdark", "forest", "sky", "clays", "stones", "lofi", "black"] %}
        <li>
            <button type="button" onclick="window.appSetTheme('{{ theme }}')" class="flex items-center justify-between">
                <span class="capitalize">{{ theme }}</span>
                <span class="size-3 rounded-full border border-base-content/20" data-theme="{{ theme }}" style="background: oklch(var(--p))"></span>
            </button>
        </li>
        {% endfor %}
    </ul>
</div>