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

Question

当使用color-scheme强制主题时，有没有一种方法可以匹配实际的文本/背景颜色？背景颜色Canvas和文本颜色CanvasText与实际主题颜色不匹配(在边缘/铬深色主题中，它显示为黑色，而实际颜色更亮)，当通过javascript切换主题时，这些颜色不会反映更改(请参阅单击复选框后的“我的组框”标签)：

​

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不会随着方案的变化而改变，而是坚持默认的颜色。

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

​