{% load static i18n %}
<div class="nav-item" data-color-scheme-url="{% url 'conjunto:color-scheme' %}">
    <a href="#" class="nav-link px-0 hide-theme-dark"
       data-bs-toggle="tooltip" data-bs-placement="bottom"
       title="{% translate 'Enable dark mode' %}"
       aria-label="{% translate 'Enable dark mode' %}"
       onclick="window.toggleTheme(); return false;">
        <i class="ti ti-moon fs-2"></i>
    </a>
    <a href="#" class="nav-link px-0 hide-theme-light"
       data-bs-toggle="tooltip" data-bs-placement="bottom"
       title="{% translate 'Enable light mode' %}"
       aria-label="{% translate 'Enable light mode' %}"
       onclick="window.toggleTheme(); return false;">
        <i class="ti ti-sun fs-2"></i>
    </a>
</div>
{% comment %}
  Couple the JS to the UI: when the template above is rendered (and thus the
  CONJUNTO_THEME_SWITCHER gate has already been passed), emit the toggle
  script too. This avoids "window.toggleTheme is not a function" when a
  downstream template overrides the ``app_scripts`` block without calling
  ``{{ block.super }}``.
{% endcomment %}
<script type="application/javascript" src="{% static 'conjunto/js/theme_toggle.js' %}" defer></script>