如何获取浏览器默认accent-color的实际RGB/HEX值而非auto？

原代码返回auto是因为accent-color的默认值为auto——这是一个CSS关键字，代表浏览器会根据系统主题或上下文自动适配颜色，但CSSOM的getComputedStyle不会直接返回实际渲染的色值，必须通过像素采样的方式获取真实颜色。

可行实现方法（原生JS） #

通过创建临时checkbox元素，将其渲染到页面后，用Canvas绘制该元素并提取像素颜色：

async function getBrowserAccentColor() {
  // 创建临时checkbox（勾选状态下颜色会应用accent-color）
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.checked = true;
  // 添加到DOM触发浏览器渲染
  document.body.appendChild(checkbox);
  
  // 等待渲染完成
  await new Promise(resolve => requestAnimationFrame(resolve));
  
  // 获取元素的位置和尺寸
  const rect = checkbox.getBoundingClientRect();
  
  // 创建Canvas并匹配元素尺寸
  const canvas = document.createElement('canvas');
  canvas.width = rect.width;
  canvas.height = rect.height;
  const ctx = canvas.getContext('2d');
  
  // Firefox原生支持drawWindow直接绘制HTML元素
  if (ctx.drawWindow) {
    ctx.drawWindow(window, rect.left, rect.top, rect.width, rect.height, '#fff');
  } else {
    // Chrome/Edge等浏览器需借助html2canvas库实现元素截图（需先引入库）
    // const canvas = await html2canvas(checkbox);
    // const ctx = canvas.getContext('2d');
  }
  
  // 提取勾选框中心位置的像素数据（该颜色即为accent-color）
  const pixelData = ctx.getImageData(rect.width / 2, rect.height / 2, 1, 1).data;
  const [r, g, b] = pixelData;
  
  // 清理临时元素
  checkbox.remove();
  
  // 转换为RGB和HEX格式返回
  return {
    rgb: `rgb(${r}, ${g}, ${b})`,
    hex: `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
  };
}

// 使用示例
getBrowserAccentColor().then(color => {
  console.log('实际RGB值:', color.rgb);
  console.log('实际HEX值:', color.hex);
});

注意事项 #

• 临时元素必须添加到DOM并等待渲染完成，否则无法获取真实的渲染颜色。
• Chrome、Edge等非Firefox浏览器不支持原生Canvas绘制HTML元素，需要引入html2canvas这类轻量库实现元素截图后再提取像素。

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