nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-03-25 09:21:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: Use inline SVG icons for theme switcher menu

Browse Source 
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>
This commit is contained in:
Sunil Mohan Adapa 2026-03-12 23:25:15 -07:00 committed by James Valleroy
parent bfa5f4b622
commit f768195a13
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
3 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
plinth/templates/theme-menu.html
View File

@ -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>

9
static/themes/default/css/main.css
View File

@ -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 */

12
static/themes/default/js/color-modes.js
View File

@ -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) {