Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как на WP сайте в темном режиме отображать картинки неизменно? (https://javascript.ru/forum/events/84916-kak-na-wp-sajjte-v-temnom-rezhime-otobrazhat-kartinki-neizmenno.html)

mik888em 04.02.2023 17:43

Как на WP сайте в темном режиме отображать картинки неизменно?
 
Вложений: 3
Использую на моем WP сайте https://transscreen.ru плагин "DarkLooks - Dark Mode Switcher For WordPress" https://ru.wordpress.org/plugins/dar...mode-switcher/ чтоб пользователи могли переключится в темный режим.

В настройках плагина выставил использование для темного режима метода инверсии цветов:
Вложение 4888

Вижу что в темном режиме картинке плагин задаёт этот CSS , где 1 - означает что плагин инвертирует картинку обратно ("реанимирует") из инвертированной картинки, но при этом очень сильно уменьшает яркость:
Вложение 4889

Фрагмент CSS:
html.darklooks-mode-changer-enabled img {
    filter: invert(1);
}



Если я вставлю в CSS такой фильтр
filter: brightness(100%);
то он запрещает фильтр инверсии который нужен для реанимации картинки из инвертированного режима:
Вложение 4890

Где находится "цифра" что отвечает за уменьшения яркости я не могу найти.

Вопрос: Как в темном режиме отображать картинки неизменно - без уменьшения яркости и без инверсии?
Или где хотяб найти цифру где он уменьшает яркость картинке?

Nexus 04.02.2023 20:11

Цитата:

Сообщение от mik888em
Вопрос: Как в темном режиме отображать картинки неизменно - без уменьшения яркости и без инверсии?

html.darklooks-mode-changer-enabled body img {
    filter: none;
}

mik888em 04.02.2023 20:51

Вложений: 1
Цитата:

Сообщение от Nexus (Сообщение 550462)
html.darklooks-mode-changer-enabled body img {
    filter: none;
}

вот попробовал в style.css ваш код и как я и говорил что если фильтр убрать то будет полная инверсия (см скрин)Вложение 4891

voraa 04.02.2023 21:25

Ну надо в средствах разработчика смотреть, почему это правило не применяется. может его какое более сильное перебивает.
Тогда попробовать
html.darklooks-mode-changer-enabled body img {
    filter: none !important;
}

Nexus 05.02.2023 00:33

mik888em, у вас html с классом «darklooks-mode-changer-enabled» имеет следующие свойства:
html.darklooks-mode-changer-enabled {
    filter: invert(1) grayscale(.8);
}
отсюда и полная инверсия.
А фильтр invert на всех img, по задумке автора, видимо, должен был исправить "глобальную" инверсию цветов. Вот только свойства фильтра grayscale повторное применение функции invert не отменяет, отсюда и потеря яркости.

mik888em 05.02.2023 13:12

Цитата:

Сообщение от Nexus (Сообщение 550468)
mik888em, у вас html с классом «darklooks-mode-changer-enabled» имеет следующие свойства:
html.darklooks-mode-changer-enabled {
    filter: invert(1) grayscale(.8);
}
отсюда и полная инверсия.
А фильтр invert на всех img, по задумке автора, видимо, должен был исправить "глобальную" инверсию цветов. Вот только свойства фильтра grayscale повторное применение функции invert не отменяет, отсюда и потеря яркости.

Да, вижу
grayscale(.8)
манипуляции с 8 ничего не дали. даже grayscale(.0) ставил в конкретную картинку но это не помогло


Часовой пояс GMT +3, время: 00:44.