Update theme icon based on the selected one

This commit is contained in:
2023-09-18 21:39:15 +02:00
parent 46a2aa7011
commit 8e0a18d707
2 changed files with 14 additions and 13 deletions

View File

@@ -76,11 +76,9 @@
return return
} }
// FIXME const activeThemeIcon = document.querySelector('.theme-icon-active i')
//const themeSwitcherText = document.querySelector('#bd-theme-text')
//const activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
//const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') const biOfActiveBtn = btnToActive.querySelector('.theme-icon i').getAttribute('class')
document.querySelectorAll('[data-bs-theme-value]').forEach(element => { document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active') element.classList.remove('active')
@@ -89,10 +87,7 @@
btnToActive.classList.add('active') btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true') btnToActive.setAttribute('aria-pressed', 'true')
// FIXME activeThemeIcon.setAttribute('class', biOfActiveBtn)
//activeThemeIcon.setAttribute('href', svgOfActiveBtn)
//const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
//themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
if (focus) { if (focus) {
themeSwitcher.focus() themeSwitcher.focus()

View File

@@ -1,4 +1,4 @@
<div class="navbar-collapse justify-content-end" id="navbarSupportedContent"> <div class="navbar-collapse justify-content-end" id="loginNavbar">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
{% if request.user.is_staff %} {% if request.user.is_staff %}
@@ -22,18 +22,24 @@
{% endif %} {% endif %}
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" type="button" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false"> <a class="theme-icon-active nav-link dropdown-toggle" href="#" type="button" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-circle-half"></i> <i class="bi bi-circle-half"></i>
</a> </a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme"> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme">
<li> <li>
<button class="dropdown-item" data-bs-theme-value="light" aria-pressed="false"><i class="bi bi-sun-fill"></i> Light</button> <button class="theme-icon dropdown-item" data-bs-theme-value="light" aria-pressed="false">
<span class="me-2"><i class="bi bi-sun-fill"></i></span> Light
</button>
</li> </li>
<li> <li>
<button class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false"><i class="bi bi-moon-stars-fill"></i> Dark</button> <button class="theme-icon dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
<span class="me-2"><i class="bi bi-moon-stars-fill"></i></span> Dark
</button>
</li> </li>
<li> <li>
<button class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false"><i class="bi bi-circle-half"></i> Auto</button> <button class="theme-icon dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
<span class="me-2"><i class="bi bi-circle-half"></i></span> Auto
</button>
</li> </li>
</ul> </ul>
</li> </li>