How to dynamically change icon in the theme switcher?

Bootstrap Studio Help
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

2

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
3

That worked perfectly, thank you so much!

1 Like
5

I’ll test it, if it works I’ll copy it, lol.

Thanks, @kuligaposten

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
8

Don’t delete the site, I’ll copy the CSS and JS, lol.

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