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);
}

HTML部分

<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>

在黑暗或明亮模式下更改输入文本的颜色

1 个答案: