时间戳

首页 > 解决方案 > 有没有办法匹配当前主题的背景/文本颜色？

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

问题描述

当强制使用主题时，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>

有什么建议么？

标签： javascriptcss

解决方案

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

基本上，我只是将包装<div>元素替换为 a<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>

推荐阅读