暗黑模式下如何让<div>模拟<textarea>的背景色？

问题出在动态创建的textarea未挂载到DOM树时，Chrome不会完整计算其原生暗黑模式样式。浏览器对原生控件的样式渲染依赖元素处于文档流中，仅在内存中创建的元素无法触发完整的user-agent样式计算，导致返回的是通用深色背景而非textarea专属的暗黑模式背景。

解决思路是临时将textarea挂载到DOM中（隐藏状态不影响页面），待样式计算完成后再移除，具体代码如下：

function getDarkTextareaBackgroundColor() {
  // 创建临时textarea元素
  const tempTextarea = document.createElement('textarea');
  
  // 配置暗黑模式并隐藏元素
  tempTextarea.style.colorScheme = 'dark';
  tempTextarea.style.position = 'fixed';
  tempTextarea.style.top = '-9999px';
  tempTextarea.style.left = '-9999px';
  tempTextarea.style.opacity = '0';
  
  // 挂载到DOM触发样式计算
  document.body.appendChild(tempTextarea);
  
  // 获取计算后的背景色
  const computedStyle = window.getComputedStyle(tempTextarea);
  const bgColor = computedStyle.backgroundColor;
  
  // 清理临时元素
  document.body.removeChild(tempTextarea);
  
  return bgColor;
}

// 应用到目标div
const targetDiv = document.querySelector('#simulated-textarea');
targetDiv.style.backgroundColor = getDarkTextareaBackgroundColor();

补充说明 #

• 必须将元素挂载到DOM：Chrome的原生控件样式逻辑仅对文档内的元素生效，内存元素无法触发完整的样式计算。
• 隐藏方式选择：用fixed定位加负坐标比opacity:0更彻底，避免元素占用布局空间。
• 兼容性：该方法在Chrome、Edge等基于Chromium的浏览器中均可生效，若需适配其他浏览器，可额外添加tempTextarea.setAttribute('color-scheme', 'dark')增强兼容性。

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