<div class="pp-theme-picker" data-pp-theme-picker>
    <button type="button"
            class="pp-theme-toggle"
            data-pp-theme-toggle
            aria-label="Choose application theme"
            aria-haspopup="menu"
            aria-expanded="false"
            aria-pressed="false"
            title="Choose application theme">
        <span class="pp-theme-toggle-icon" aria-hidden="true"><i class="bi bi-display"></i></span>
        <span class="pp-theme-toggle-label d-none d-xl-inline">System</span>
        <i class="bi bi-chevron-down pp-theme-toggle-chevron" aria-hidden="true"></i>
    </button>
    <div class="pp-theme-menu" data-pp-theme-menu role="menu" aria-label="Application theme" hidden>
        <button type="button" class="pp-theme-option" data-pp-theme-option="system" role="menuitemradio" aria-checked="true">
            <span class="pp-theme-swatch pp-theme-swatch-system"><i class="bi bi-display"></i></span>
            <span><strong>System</strong><small>Follow your device</small></span>
            <i class="bi bi-check-lg pp-theme-option-check" aria-hidden="true"></i>
        </button>
        <button type="button" class="pp-theme-option" data-pp-theme-option="light" role="menuitemradio" aria-checked="false">
            <span class="pp-theme-swatch pp-theme-swatch-light"><i class="bi bi-sun-fill"></i></span>
            <span><strong>Light</strong><small>Bright and crisp</small></span>
            <i class="bi bi-check-lg pp-theme-option-check" aria-hidden="true"></i>
        </button>
        <button type="button" class="pp-theme-option" data-pp-theme-option="midnight" role="menuitemradio" aria-checked="false">
            <span class="pp-theme-swatch pp-theme-swatch-midnight"><i class="bi bi-moon-stars-fill"></i></span>
            <span><strong>Midnight</strong><small>Deep navy</small></span>
            <i class="bi bi-check-lg pp-theme-option-check" aria-hidden="true"></i>
        </button>
        <button type="button" class="pp-theme-option" data-pp-theme-option="dracula" role="menuitemradio" aria-checked="false">
            <span class="pp-theme-swatch pp-theme-swatch-dracula"><i class="bi bi-magic"></i></span>
            <span><strong>Dracula</strong><small>Plum, purple &amp; cyan</small></span>
            <i class="bi bi-check-lg pp-theme-option-check" aria-hidden="true"></i>
        </button>
        <button type="button" class="pp-theme-option" data-pp-theme-option="gruvbox" role="menuitemradio" aria-checked="false">
            <span class="pp-theme-swatch pp-theme-swatch-gruvbox"><i class="bi bi-fire"></i></span>
            <span><strong>Gruvbox</strong><small>Warm earth &amp; orange</small></span>
            <i class="bi bi-check-lg pp-theme-option-check" aria-hidden="true"></i>
        </button>
        <button type="button" class="pp-theme-option" data-pp-theme-option="rosepine" role="menuitemradio" aria-checked="false">
            <span class="pp-theme-swatch pp-theme-swatch-rosepine"><i class="bi bi-flower1"></i></span>
            <span><strong>Rosé Pine</strong><small>Muted rose &amp; iris</small></span>
            <i class="bi bi-check-lg pp-theme-option-check" aria-hidden="true"></i>
        </button>
    </div>
</div>
