From f768195a13a3d824ca173fe24e3361f1d56754b4 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Thu, 12 Mar 2026 23:25:15 -0700
Subject: [PATCH] ui: Use inline SVG icons for theme switcher menu

Tests:

- All the icons appear as before in both light/dark themes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/theme-menu.html        | 26 ++++++++++++-------------
 static/themes/default/css/main.css      |  9 +++++++--
 static/themes/default/js/color-modes.js | 12 +++++-------
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/plinth/templates/theme-menu.html b/plinth/templates/theme-menu.html
index 300a89bb5..cd0d06e4b 100644
--- a/plinth/templates/theme-menu.html
+++ b/plinth/templates/theme-menu.html
@@ -3,13 +3,16 @@
 {% endcomment %}
 
 {% load i18n %}
+{% load plinth_extras %}
 
 <li id="id_theme_menu" class="dropdown nav-item">
   <a href="#" title="{% trans "Toggle theme (auto)" %}"
      class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
      role="button" aria-expanded="false" aria-haspopup="true"
      id="id_theme_menu_link">
-    <span class="fa fa-adjust nav-icon" id="id_active_theme_icon"></span>
+    <span id="id_active_theme_icon">
+      {% icon 'adjust'  %}
+    </span>
     <span class="nav-text d-md-none" id="id_toggle_theme_text">
       {% trans "Toggle theme" %}
     </span>
@@ -17,29 +20,26 @@
   <ul class="dropdown-menu" role="menu" aria-labelledby="id_theme_menu_link">
     <li>
       <button type="button" class="dropdown-item d-flex align-items-center"
-              data-bs-theme-value="light" data-bs-icon-value="fa-sun"
-              aria-pressed="false">
-        <span class="fa fa-sun nav-icon me-2"></span>
+              data-bs-theme-value="light" aria-pressed="false">
+        {% icon 'sun' %}
         {% trans "Light" %}
-        <span class="fa fa-check nav-icon ms-auto d-none"></span>
+        {% icon 'check' %}
       </button>
     </li>
     <li>
       <button type="button" class="dropdown-item d-flex align-items-center"
-              data-bs-theme-value="dark" data-bs-icon-value="fa-moon"
-              aria-pressed="false">
-        <span class="fa fa-moon nav-icon me-2"></span>
+              data-bs-theme-value="dark" aria-pressed="false">
+        {% icon 'moon' %}
         {% trans "Dark" %}
-        <span class="fa fa-check nav-icon ms-auto d-none"></span>
+        {% icon 'check' %}
       </button>
     </li>
     <li>
       <button type="button" class="dropdown-item d-flex align-items-center"
-              data-bs-theme-value="auto" data-bs-icon-value="fa-adjust"
-              aria-pressed="true">
-        <span class="fa fa-adjust nav-icon me-2"></span>
+              data-bs-theme-value="auto" aria-pressed="true">
+        {% icon 'adjust' %}
         {% trans "Auto" %}
-        <span class="fa fa-check nav-icon ms-auto d-none"></span>
+        {% icon 'check' %}
       </button>
     </li>
   </ul>
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 0a93cfce0..8c003bacb 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -542,8 +542,13 @@ footer {
     border-bottom: var(--freedombox-navbar-color) 3px solid;
 }
 
-.main-header .dropdown-menu .active .fa-check {
-    display: block !important;
+.main-header .dropdown-menu [data-icon-name="check"] {
+    display: none;
+    margin-left: auto;
+}
+
+.main-header .dropdown-menu .active [data-icon-name="check"] {
+    display: block;
 }
 
 /* Breadcrumbs */
diff --git a/static/themes/default/js/color-modes.js b/static/themes/default/js/color-modes.js
index efef6dbf3..e7bc0d16e 100644
--- a/static/themes/default/js/color-modes.js
+++ b/static/themes/default/js/color-modes.js
@@ -51,21 +51,19 @@
         const themeSwitcherText = document.querySelector('#id_toggle_theme_text');
         const activeThemeIcon = document.querySelector('#id_active_theme_icon');
         const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
-        const iconOfActiveBtn = btnToActive.dataset.bsIconValue;
 
         document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
             element.classList.remove('active');
             element.setAttribute('aria-pressed', 'false');
-            const iconOfBtn = element.dataset.bsIconValue;
-            if (activeThemeIcon.classList.contains(iconOfBtn)) {
-                activeThemeIcon.classList.remove(iconOfBtn);
-            }
         });
 
         btnToActive.classList.add('active');
         btnToActive.setAttribute('aria-pressed', 'true');
-        activeThemeIcon.classList.add(iconOfActiveBtn);
-        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+
+        const activeIcon = btnToActive.querySelector('.svg-icon:first-child');
+        activeThemeIcon.innerHTML = activeIcon.outerHTML;
+
+        const themeSwitcherLabel = `${themeSwitcherText.textContent.trim()} (${btnToActive.dataset.bsThemeValue})`;
         themeSwitcher.setAttribute('title', themeSwitcherLabel);
 
         if (focus) {