在深色或浅色模式下更改输入文本颜色

Question

我创建了一个暗/亮主题切换器，我发现的问题是当我在输入域输入任何信息时，当网站在暗模式下时，输入域内的文本显示为黑色，我如何改变它，在亮模式下保持黑色文本颜色，在暗模式下保持白色文本颜色。

这是我的CSS为光明/黑暗模式。如何为黑暗模式添加不同的文本颜色？

:root {
    --primary-color: rgb(82, 80, 144);
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
    --color: black;
  }
  [data-theme="dark"] {
    --primary-color: rgb(107, 106, 134);
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #4d5055;
    --heading-color: #63656d;
    --color: white; 
  }
  body {
    background-color: var(--bg-color);
    color: var(--font-color);
  }
  h1 {
    color: var(--secondary-color);
  }

  a{
    color: var(--primary-color);
  }
input {
color: var(--color);
}

<div class="input-field" data-theme="dark">
<input type="text" id="searchquery" placeholder="Type here">
</div>

我试图用这段代码，但它在黑暗和光明模式下都发生了变化。

input, select, textarea{
    color: #ff0000;
}

编辑：我从下面的回答中添加内容。它现在工作只有一个问题，当我改变到光模式时，输入文本颜色仍然是白色，但假设是黑色。

Answer 1

在您的示例中，您需要在标签或任何父项中添加属性data-theme=“dark”以使其生效。希望这能帮到你。

:root {
    --primary-color: rgb(82, 80, 144);
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
    --color: black;
  }
  [data-theme="dark"] {
    --primary-color: rgb(107, 106, 134);
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #4d5055;
    --heading-color: #63656d;
    --color: red; 
  }
  body {
    background-color: var(--bg-color);
    color: var(--font-color);
  }
  h1 {
    color: var(--secondary-color);
  }

  a{
    color: var(--primary-color);
  }

input {
    color: var(--color);
  }

<h1 data-theme="dark">Input with data-theme attribute "dark"</h1>
<div class="input-field" data-theme="dark">
    <input type="text" id="searchquery" placeholder="Type here">
</div>

<h1>Input wihout data-theme attribute "dark"</h1>
<div class="input-field">
    <input type="text" id="searchquery" placeholder="Type here">
</div>