Update theme icon based on the selected one

daniviga · Sep 18, 2023 · 8e0a18d · 8e0a18d
1 parent 46a2aa7
commit 8e0a18d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/ram/portal/templates/base.html b/ram/portal/templates/base.html
@@ -76,11 +76,9 @@
             return
           }
 
-          // FIXME
-          //const themeSwitcherText = document.querySelector('#bd-theme-text')
-          //const activeThemeIcon = document.querySelector('.theme-icon-active use')
+          const activeThemeIcon = document.querySelector('.theme-icon-active i')
           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 => {
             element.classList.remove('active')
@@ -89,10 +87,7 @@
 
           btnToActive.classList.add('active')
           btnToActive.setAttribute('aria-pressed', 'true')
-          // FIXME
-          //activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-          //const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
-          //themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+          activeThemeIcon.setAttribute('class', biOfActiveBtn)
 
           if (focus) {
             themeSwitcher.focus()

diff --git a/ram/portal/templates/includes/login.html b/ram/portal/templates/includes/login.html
@@ -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">
           <li class="nav-item dropdown">
             {% if request.user.is_staff %}
@@ -22,18 +22,24 @@
             {% endif %}
           </li>
           <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>
             </a>
             <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme">
               <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>
-                <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>
-                <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>
             </ul>
           </li>