Как подготовить мобильную версию сайта для ночного режима, который идет в телефонах?

Question

[Владимир Мирошник]

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

Как можно на уровне кода пофиксить эту проблему?

UPD:
телефон samsung galaxy 9
сайт https://italia-v-tarelke.ru/whatsapp
браузер стандартный

Comments

[sim3x]

Какой телефон, какой браузер, где организована инверсия?

[Владимир Мирошник]

sim3x, телефон samsung galaxy 9
сайт https://italia-v-tarelke.ru/whatsapp
браузер стандартный
скрин: https://yadi.sk/i/QXgM4JgnbGDXiQ

[sim3x]

Владимир Мирошник, скрин загрузите на забрасторадж и вставьте картинкой

Какой браузер?
Где организована инверсия?

[Модератор]

Владимир Мирошник,
3.9. Использовать для вставки изображений тег < img> (размещение ссылок на изображения без использования тега < img> запрещено).

[Сергей delphinpro]

sim3x, новая фишка в девятом андроиде. на уровне операционки.

[sim3x]

Сергей delphinpro,
Я знаю слишком много способов получения инверсии на андроиде, да еще и в браузере
И в разных сборках андроида данная фича появилась очень давно

[Сергей delphinpro]

sim3x, инверсия не совсем то. она давно уже есть.
впрочем не важно. суть в том, что это фишка операционной системы.
Если браузер добавляет какой-то маркер на страницу сайта в ночном режиме — можно это выяснить и использовать, если нет — довольствоваться тем что есть.

[Владимир Мирошник]

sim3x,
скрин:


.
инверсия происходит, я так понимаю, так: он просто ищет весь текст черного цвета и меняет на белый, и ищет все блоки с белым фоном и меняет на черный.

[Владимир Мирошник]

Сергей delphinpro, а как выяснить, добавляет ли браузер маркер на страницу?

Answer 1

[profesor08]

раз: https://drafts.csswg.org/mediaqueries-5/#prefers-c...
два:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: #000;
        color: white;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: white;
    }
}

три:

@media (prefers-dark-interface) { 
  color: white; 
  background: black;
}

четыре: https://developer.mozilla.org/en-US/docs/Web/CSS/@...

Comments

[Alex]

https://caniuse.com/#search=prefers-color-scheme

[Alex]

Заметка:
На MacOS в сафари работает в хроме — нет

[profesor08]

Александр Козак, и че? других способов детектить это нет, поэтому либо юзаешь так, для хоть какого-то эффекта, в надежде на будущее, либо не юзаешь вообще и забиваешь.

[Alex]

profesor08, Ниче. Приложил немного информации для тех, кто найдёт этот ответ.