Want a label for the theme switch icon as in:
To start with, this is the code for the widget:
<div class="nav-item" is="dmx-bs5-theme-switch" id="bs5themeswitch" icons="fa" manager="bs5theme"></div>
Notice the class of .nav-item? This is to ensure that the button does not appear as a button.
The text 'Toggle theme' is already present in the widget, however, this is hidden from view.
To un-hide the text, use this JavaScript:
setInterval(() => {
let elem = document.getElementById("bs5themeswitch-theme-text");
if (elem) {
elem.classList.remove("visually-hidden");
elem.style.display = "inline !important";
elem.style.visibility = "visible !important";
elem.style.opacity = "1 !important";
}
}, 500); // Runs every 500ms to ensure visibility
The script is run continuously because Bootstrap scripts are reapplying the hidden class dynamically.
This will show the text. The problem is that there is no space between the icon and the text. To fix this, use this JavaScript:
setInterval(() => {
let icon = document.querySelector("#bs5themeswitch-theme .theme-icon-active");
if (icon) {
icon.classList.add("fa-fw", "me-2"); // Ensures spacing styles persist
}
}, 500); // Runs every 500ms
And you are done.
Edit: I posted this mainly for my own purpose - so that I can remember how it's done. 
