Изменение цвета входного текста в темном или светлом режиме ⇐ CSS

[Anonymous]

Я создаю переключатель темной/светлой темы, и я обнаруживаю проблему: когда я ввожу какую-либо информацию в поле ввода, когда веб-сайт находится в темном режиме, текст внутри поля ввода отображается черным. Как я могу изменить его, чтобы сохранить черный цвет текста в светлом режиме и белый цвет текста в темном режиме.

Вот мой 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-часть

Код: Выделить всё

Я пытался сделать это с помощью этого кода, но он меняется как для темного, так и для светлого режима.

Код: Выделить всё

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

ОТРЕДАКТИРОВАНО: я добавляю содержимое из ответа ниже. Теперь он работает только с одной проблемой: когда я перехожу в светлый режим, цвет входного текста остается белым, но предполагается, что это черный цвет.

Подробнее здесь: https://stackoverflow.com/questions/617 ... light-mode