Исправление проблем с видимостью и контрастностью ввода формы между светлым и темным режимами на мобильных устройствах [ ⇐ CSS

[Anonymous]

Я уже несколько часов пытаюсь исправить проблему CSS с формой.

Я хочу, чтобы форма отображалась в темном режиме на смартфонах, когда для темы сайта установлен темный режим. Пока что это работает нормально. Проблема в том, что когда тема находится в светлом режиме, на смартфонах все отображается белым.
Я пробую код ниже, но это не решает проблему. Я хочу, чтобы форма выглядела как третье изображение, когда тема находится в светлом режиме на мобильном устройстве, и как четвертое изображение в темном режиме.

В настоящее время с помощью кода, который я использую, она выглядит как первое и второе изображения.

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

@media (max-width: 768px) {
/* Light mode mobile */
.lecf-field input[type="text"],
.lecf-field input[type="email"],
.lecf-field input[type="tel"],
.lecf-field input[type="url"],
.lecf-field input[type="number"],
.lecf-field input[type="datetime-local"],
.lecf-field select,
.lecf-field textarea {
background: #f8fafc;
border: 1.5px solid #bfc9d7;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* Dark mode mobile override */
.lecf-dark .lecf-field input[type="text"],
.lecf-dark .lecf-field input[type="email"],
.lecf-dark .lecf-field input[type="tel"],
.lecf-dark .lecf-field input[type="url"],
.lecf-dark .lecf-field input[type="number"],
.lecf-dark .lecf-field input[type="datetime-local"],
.lecf-dark .lecf-field select,
.lecf-dark .lecf-field textarea {
background: rgba(255, 255, 255, 0.04);
border: 1.5px solid rgba(255, 255, 255, 0.10);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.02);
color: #fff;
}

.lecf-dark .lecf-field input::placeholder,
.lecf-dark .lecf-field textarea::placeholder {
color: rgba(255, 255, 255, 0.45);
opacity: 1;
}

.lecf-dark .lecf-field label {
color: rgba(255, 255, 255, 0.82);
}
}

Как изображение выглядит сейчас 1

Как изображение выглядит сейчас 2


Как я хочу, чтобы изображение выглядело 3


Как я хочу, чтобы изображение выглядело 4



Подробнее: https://stackoverflow.com/questions/799 ... rk-mode-on