如何根据背景亮度动态切换Squarespace导航链接文字颜色？

核心思路 #

用JavaScript实时检测每个导航链接对应位置的背景像素亮度，以中性灰（亮度值127）为分界：背景偏亮就用黑字，背景偏暗就用白字。同时监听页面滚动和轮播切换事件，随时更新文字颜色。

具体步骤 #

1. 先加基础CSS（避免切换闪烁） #

给导航链接加个平滑过渡效果，同时定义好黑白文字的样式类：

.header-nav-item a {
  transition: color 0.2s ease; /* 颜色切换更丝滑 */
}
.header-nav-item a.text-white {
  color: #fff;
}
.header-nav-item a.text-black {
  color: #000;
}

2. 写核心JavaScript代码 #

这段代码只会修改导航文字颜色，不会触碰页面背景，解决你之前遇到的背景随机变化问题：

document.addEventListener('DOMContentLoaded', function() {
  // 抓取导航项列表，没有的话直接退出
  const navItems = document.querySelectorAll('.header-nav-item');
  if (!navItems.length) return;

  // 创建隐藏的canvas，用来分析背景像素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.style.display = 'none';
  document.body.appendChild(canvas);

  // 计算指定区域的平均亮度
  function getAverageBrightness(element) {
    const rect = element.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;

    // 把导航项下方的页面内容画到canvas上
    ctx.drawWindow(window, rect.left, rect.top, rect.width, rect.height, '#fff');
    
    // 获取像素数据，用行业通用公式计算平均亮度
    const imageData = ctx.getImageData(0, 0, rect.width, rect.height);
    const data = imageData.data;
    let totalBrightness = 0;

    for (let i = 0; i < data.length; i += 4) {
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      // ITU-R BT.709标准亮度公式，比单纯取RGB平均值更准确
      const brightness = (0.2126 * r) + (0.7152 * g) + (0.0722 * b);
      totalBrightness += brightness;
    }

    return totalBrightness / (rect.width * rect.height);
  }

  // 更新所有导航文字颜色
  function updateNavTextColors() {
    navItems.forEach(item => {
      const link = item.querySelector('a');
      if (!link) return;

      const avgBrightness = getAverageBrightness(item);
      // 亮度大于127（中性灰）用黑字，否则用白字
      if (avgBrightness > 127) {
        link.classList.remove('text-white');
        link.classList.add('text-black');
      } else {
        link.classList.remove('text-black');
        link.classList.add('text-white');
      }
    });
  }

  // 监听滚动事件，滚动时更新颜色
  window.addEventListener('scroll', updateNavTextColors);

  // 监听轮播切换（适配Squarespace的Hero Carousel）
  const carousel = document.querySelector('.sqs-block-hero-carousel');
  if (carousel) {
    // 用MutationObserver监听轮播内容变化，触发颜色更新
    const observer = new MutationObserver(updateNavTextColors);
    observer.observe(carousel, { childList: true, subtree: true });
  }

  // 页面加载完成后先执行一次，初始化颜色
  updateNavTextColors();
});

3. 部署到Squarespace #

• 进入后台，点击设置 > 高级 > 代码注入
• 把CSS代码粘贴到页眉区域，JavaScript代码粘贴到页脚区域
• 保存后刷新页面即可测试效果

注意点 #

• 不同Squarespace模板的导航类名可能不同，比如.header-nav-item如果不生效，用浏览器开发者工具（F12）抓取实际导航项的类名替换即可
• 轮播容器类.sqs-block-hero-carousel同理，若不生效，替换为模板对应的轮播容器类
• 该方案仅修改导航文字颜色，不会对页面背景产生任何改动

内容的提问来源于stack exchange，提问作者Dan Casey