有没有办法匹配当前主题的背景/文本颜色？

Question

当使用color-scheme 强制主题时，有没有办法匹配实际的文本/背景颜色？ 背景颜色 Canvas 和文本颜色 CanvasText 与实际主题颜色不匹配（在 Edge/Chrome 深色主题中，它显示为黑色，而实际颜色较浅），当通过 javascript 切换主题时，这些颜色不反映更改（单击复选框后请参阅“我的 Groupbox”标签）：

Math.floor(Math.random()*2)&&document.querySelector("input").click();

:root
{
  color-scheme: light;
}

.groupbox
{
  border: 1px solid rgba(127, 127, 127, 0.5);
  display: grid;
  padding: 1em 0.5em 0.5em 0.5em;
  position: relative;
  margin-top: 1em;
}

.groupbox > label
{
  position: absolute;
  top: -0.5em;
  left: 0.5em;
  font-size: 0.9em;
  padding: 0 0.4em;

  color: CanvasText;
  background-color: Canvas;
}

<label><input type="checkbox" oninput="documentElement.style.colorScheme=this.checked&&'dark'"> Dark theme</label>
<div class="groupbox">
  <label>My Groupbox</label>
  <h1>My Header</h1>
  <span>My Text</span>
</div>

有什么建议吗？

Answer 1

我能找到的最佳解决方案是更改 html 元素以更好地协同工作，而不是使用 Canvas 和 CanvasText css 属性。看起来 Canvas 和 CavasText 不会随方案而改变并坚持它们的默认颜色。

基本上，我只是用<fieldset> 替换了包装<div> 元素，并用<legend> 替换了<label>，得到了完全相同的结果，但现在您不必担心背景或文本颜色。它还允许我删除一些不再需要的 css。

<fieldset> & <legend> 可以很好地协同工作，您不必像使用 <div> & <label> 元素那样担心边界线穿过您的文本。

Math.floor(Math.random() * 2) && document.querySelector("input").click();

:root {
  color-scheme: light;
}

.groupbox {
  border: 1px solid rgba(127, 127, 127, 0.5);
  padding: 0.5em 0.5em 0.5em 0.5em;
  position: relative;
  margin-top: 1em;
}

<label><input type="checkbox" oninput="documentElement.style.colorScheme=this.checked&&'dark'"> Dark theme</label>
<fieldset class="groupbox">
  <legend>My GroupBox</legend>
  <h1>My Header</h1>
  <span>My Text</span>
</fieldset>