classes to switch elements when switching color modes

[PTremper]

I have a case where I wanted to swap a white colored svg logo during dark mode with the same black colored svg when switching to light mode and all that with a simple approach without too much overhead. I did not find an obvious solution how to do it (I'm sorry if I missed it). To be able to use it more broadly, I ended up implementing a class based approach into the js function given in the bootstrap docs by adding the following function

    const toggleColorModeChoice = function(set_to){
      if (set_to == 'auto'){
        set_to = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' == 'dark'
      }
      const allDivs = document.querySelectorAll('.color-mode-choice')
      allDivs.forEach((div) => {
        div.classList.add('d-none')
        if (div.matches('.color-mode-' + set_to + '-visible')){
          div.classList.remove('d-none')
        }
      })
    };

which would grab all elements with classes 'color-mode-choice' and make all invisible except those which also have the class 'color-mode-THEME-visible' for the current THEME. I understand that color modes is very new, but such a feature would be nice to have out of the box in a future version.

[patkon]

That's a nice Solution @PaulTeco