如何创建全站开关以启用/禁用文本着色class？

需求说明 #

需要新增一个与现有主题开关样式一致的全局开关，用来启用/禁用带有color类的<span>标签的文本着色效果；关闭开关时取消文本着色，提升内容可读性。

实现步骤 #

1. 编写开关状态控制函数 #

修改开关的toggleTxtClr()函数，结合本地存储保存状态，同时触发着色效果的切换：

function toggleTxtClr() {
  const isColorEnabled = document.getElementById('slider-color').checked;
  // 用本地存储保存开关状态，刷新页面后不会重置
  localStorage.setItem('textColorEnabled', isColorEnabled);
  // 执行着色/取消着色逻辑
  toggleSpanColors(isColorEnabled);
}

2. 封装着色控制逻辑 #

把原本的文本着色逻辑封装成函数，根据开关状态决定应用或移除颜色：

function toggleSpanColors(enable) {
  $('span.color').each(function() {
    const $span = $(this);
    if (enable) {
      // 启用着色：根据文本内容设置对应颜色
      if ($span.text() === 'green' || $span.text() === 'greened') {
        $span.css('color', '#008000');
      }
      // 可在此扩展其他颜色规则，比如红色、蓝色等
    } else {
      // 禁用着色：清除行内颜色样式，恢复默认文本颜色
      $span.css('color', '');
    }
  });
}

3. 页面初始化时恢复状态 #

页面加载完成后，读取本地存储的开关状态，同步开关选中状态和文本着色效果：

$(document).ready(function() {
  // 获取本地存储的状态，默认开启着色
  const savedState = localStorage.getItem('textColorEnabled') !== 'false';
  // 设置开关的选中状态
  document.getElementById('slider-color').checked = savedState;
  // 应用对应的着色效果
  toggleSpanColors(savedState);
});

4. 保持原有HTML结构不变 #

你的现有HTML代码无需修改，开关的onchange事件已绑定toggleTxtClr()函数，直接保留即可：

<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>

内容的提问来源于stack exchange，提问作者Cynthia Johnson