mjboy
October 31, 2023, 9:01pm
1
Hi, i’m pretty new to all this so please bear with me!
I am creating a page that uses the theme switcher component, and I am wondering if it is possible to dynamically change the icon shown to reflect the selected theme?
I know a bit of basic javascript and could do this if i was building outside of bootstrap studio, but I was wondering if there is a way to do it within bootstrap studio?
Thanks
I do it like this
In the setting dialog choose ‘light’ or ‘dark’ and in the script
set the this.defaultTheme = 'light' or 'dark'
the same as you have chosen in the settings dialog
I’m using this javascript
class ThemeChecker {
constructor() {
this.defaultTheme = 'dark';
this.init();
}
toggleIcon(themeIcon) {
if (themeIcon) {
document.querySelectorAll('.theme-switcher').forEach((switcher) => {
const _themeIcon = switcher.querySelector('svg');
_themeIcon.innerHTML = '';
_themeIcon.appendChild(themeIcon.cloneNode(true));
});
}
}
updateTableClasses() {
document.querySelectorAll('.table').forEach((table) => {
document.documentElement.dataset.bsTheme === 'dark' ? table.classList.add('table-dark') : table.classList.remove('table-dark');
});
}
iconChecker() {
const theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : this.defaultTheme;
const icon = document.querySelector(`[data-bs-theme-value=${theme}] svg`);
this.toggleIcon(icon);
this.updateTableClasses();
}
init() {
const themeObserver = new MutationObserver(() => this.iconChecker());
themeObserver.observe(document.documentElement, { attributeFilter: ['data-bs-theme'] });
this.iconChecker();
}
}
document.addEventListener('DOMContentLoaded', () => {
new ThemeChecker();
});
and I use this CSS, but you don’t need the css for change the icon, it’s as how I prefer the look and behavior of the Theme-switcher
.theme-switcher .dropdown-item.active {
color: var(--bs-dropdown-link-color);
background: var(--bs-tertiary-bg);
}
.theme-switcher .dropdown-item:active {
--bs-dropdown-link-active-bg: var(--bs-success-bg-subtle);
color: var(--bs-dropdown-link-color);
}
@media (min-width: 768px) {
.dropdown:hover > .dropdown-menu {
display: block;
}
}
@media (min-width: 768px) {
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
}
.theme-switcher .dropdown-menu svg {
pointer-events: none;
}
@media (min-width: 768px) {
.theme-switcher .dropdown-menu {
margin-left: -100px;
}
}
3 Likes
mjboy
November 1, 2023, 5:13pm
3
That worked perfectly, thank you so much!
1 Like
gilmar
November 6, 2023, 12:49am
5
I’ll test it, if it works I’ll copy it, lol.
Thanks, @kuligaposten
gilmar
November 12, 2023, 5:13pm
6
After wasting hours I managed to change the color of some icons by changing the theme.
https://apresentacao.bss.design/
In my case, the icon is from Bootstrap Icons, in svg.
The CSS to make the change.
[data-bs-theme=dark] svg {
color: var(--bs-dark);
}
1 Like
gilmar
November 12, 2023, 7:16pm
8
Don’t delete the site, I’ll copy the CSS and JS, lol.
gilmar
November 13, 2023, 7:09pm
9
I made some modifications to the model I’m testing, and then it’s going to be a lot of work to convert everything to native Bootstrap components.
Presentation
1 Like