如何获取color-scheme对应的CSS颜色变量并复用按钮背景色？

你的需求完全可行，以下是两种具体实现方式：

一、CSS层面直接复用（依赖浏览器私有变量） #

启用color-scheme: light dark;后，主流浏览器会为原生按钮提供基于系统配色的默认样式，部分浏览器暴露了对应的私有CSS变量，可直接引用：

:root {
  color-scheme: light dark;
}

/* 复用按钮背景色到其他元素 */
.target-element {
  /* WebKit/Blink内核（Chrome/Edge/Safari） */
  background-color: var(-webkit-button-background-color);
  /* Firefox 内核 */
  background-color: var(-moz-default-background-color);
  /* 降级方案：若私有变量不支持，使用系统画布背景色兜底 */
  background-color: Canvas;
}

注意：私有变量可能随浏览器版本变化，若需要更稳定的方案，建议结合JS方式。

二、JS动态获取（精确可靠） #

通过创建临时按钮元素，获取其计算后的背景色，可全局复用：

// 创建隐藏的原生按钮
const tempButton = document.createElement('button');
tempButton.style.display = 'none';
document.body.appendChild(tempButton);

// 获取当前配色下按钮的真实背景色
const buttonBg = getComputedStyle(tempButton).backgroundColor;

// 方式1：直接赋值给目标元素
document.querySelector('.target-element').style.backgroundColor = buttonBg;

// 方式2：设置为全局CSS变量，方便多处复用
document.documentElement.style.setProperty('--system-button-bg', buttonBg);

// 清理临时元素
tempButton.remove();

之后在CSS中即可通过var(--system-button-bg)复用该颜色：

.target-element {
  background-color: var(--system-button-bg);
}

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