Create Toggle to disable/enable class site wide?

I am trying to create a toggle that disables one class connected to a tag similar to the theme toggle I already have. Turning it off would disable the colored text for easier reading (I like it, others might not). How would I go about doing this?

HTML CODE:

  <nav id="theme-options">
    <div>
      <ul>
        <li class="dropdown"><a href="galaxy.html">Theme Options</a>
          <div class="dropmenu_5col dropdown-fix1">
            <ul>
              <li>
                  <label id="switch" class="switch">
                    <input type="checkbox" onchange="toggleTheme()" id="slider">
                    <span class="slider round"></span>
                </label>
              </li>
              <li>
                  <label id="switch-color" class="switch-color">
                    <input type="checkbox" onchange="toggleTxtClr()" id="slider-color">
                    <span class="slider-color round"></span>
                </label>
              </li>      
            </ul>
          </div>
        </li>    
      </ul>
    </div>
  </nav>

SPAN EXAMPLE

<span class="color">green</span>

COLOR CHANGING SCRIPT This will change the color depeneding on what is in the span tag only if the span tag has 'class="color"'. So I would need to remove or disable this with the toggle.

$('span.color').each(function() {
if( $(this).text() === 'green' || $(this).text() === 'greened' ){
$(this).css('color', '#008000')
}
})

Any help is appreciated. Thank you!

I have tried searching for scripts to do this (or something simular) and tried to get them to work with my limited JavaScript knowledge.

Solution

The easiest way would be to put a "tag" class on every element that you wanted to be able to change the color on and then use that to toggle the color class. Something like this (the tag class is "foo"):

document.addEventListener('DOMContentLoaded', function() {
  [...document.querySelectorAll('.foo')].forEach( x => x.classList.add("green"));
  document.querySelector('#button').addEventListener('click', 
    (target) => [...document.querySelectorAll('.foo')].forEach( x => x.classList.toggle("green")))
})

.green {
  color: green;
}

<span class="foo">foo</span>
<span class="bar">bar</span>
<span class="foo">foo</span>
<br />
<button id='button'>&nbsp;</button>