如何让颜色选择器默认使用CSS变量--bg并实现变量修改？

首先排查导致原有代码失效的常见原因，再给出可运行的完整方案：

核心问题分析 #

1. CSS变量定义位置错误：如果--bg未在:root（即<html>元素）下定义，getComputedStyle(document.documentElement)无法读取到变量值——计算样式从当前元素向上继承，根元素本身没有该变量的话会返回空字符串。
2. 颜色格式不兼容：原生颜色选择器<input type="color">仅支持带#的十六进制颜色格式（如#ffffff），如果你的--bg使用了颜色名称（如white）、rgb()/hsl()格式，赋值给选择器会失效。
3. 无初始值容错：如果--bg未设置初始值，读取后会得到空值，颜色选择器无法显示默认状态。

完整修复方案 #

1. 正确定义CSS变量 #

确保--bg在:root下设置初始值：

:root {
  --bg: #f0f0f0; /* 必须明确初始值，不能依赖继承 */
}

body {
  background-color: var(--bg);
  /* 可选：添加过渡动画提升体验 */
  transition: background-color 0.2s ease;
}

2. 修复JavaScript代码 #

添加格式校验和容错处理，确保颜色选择器能正确读取和更新变量：

document.addEventListener('DOMContentLoaded', () => {
  const colorPicker = document.getElementById('bgcolor');
  const root = document.documentElement;
  
  // 获取并处理--bg变量值
  let bgColor = getComputedStyle(root).getPropertyValue('--bg').trim();
  
  // 校验颜色格式，不符合则设默认值并同步到变量
  const hexColorRegex = /^#([0-9A-F]{3}){1,2}$/i;
  if (!bgColor || !hexColorRegex.test(bgColor)) {
    bgColor = '#f0f0f0';
    root.style.setProperty('--bg', bgColor);
  }
  
  // 赋值给颜色选择器
  colorPicker.value = bgColor;
  
  // 监听选择器变化，更新CSS变量
  colorPicker.addEventListener('input', (e) => {
    root.style.setProperty('--bg', e.target.value);
  });
});

3. 对应的HTML结构 #

确保颜色选择器的id与JS中的bgcolor一致：

<input type="color" id="bgcolor">

额外说明 #

如果你的--bg需要支持非十六进制格式（如rgb/hsl），需要额外添加颜色格式转换函数，将读取到的颜色值转为十六进制后再赋值给颜色选择器。

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