Полноэкранный инвертированный фильтр яркости для просмотра темных тем, сохраняя оттенки в CSS
Мне нужна помощь, чтобы найти обходной путь для моего быстрого и грязного темного фильтра CSS, который раньше работал хорошо, но больше не работает на большинстве страниц Google, фактически на любых страницах с div-ами (я использую его как стиль пользователя). Я ни в коем случае не программист, просто пользователь, который страдает от сильной мигрени, вызванной светом, и абсолютно нуждается в темных веб-страницах, чтобы спасти мои глаза, поэтому мое знание CSS понятно ограничено, извините:/ Это то, что раньше работало:
html {filter: invert(100%) hue-rotate(180deg);}
img {filter: invert(100%) hue-rotate(180deg) !important;}
video {filter: invert(100%) hue-rotate(180deg) !important;}
Раньше он инвертировал все цвета на странице, а затем поворачивал оттенки на 180 градусов, чтобы сохранить их одинаковыми, в результате получилась веб-страница с инвертированной яркостью (синий, синий, оранжевый, оранжевый и т. Д., Более яркий текст). и акценты на более темном фоне). Затем я изменил эффект на изображения и видео, чтобы исключить их из фильтра в конечном результате. Результат выглядел достаточно элегантным для меня, и лучше, чем результат большинства темных расширений Chrome. Раньше он работал безупречно, но в последнее время что-то изменилось, и на любой странице с элементами div, включая большинство страниц Google, большие разделы на белом фоне переплетаются с темными разделами, к которым фильтр все еще применяется. Я подозреваю, что фильтр применяется к таким секциям дважды, поэтому он снова становится белым.
Большое спасибо за любую помощь. Я совершенно уверен, что использование html-селектора для применения его на всей странице уже не способ сделать это, но я не знаю, как заставить его работать, простите за мое невежество и заранее благодарю.
1 ответ
У меня неплохие результаты при добавлении черного фона к html элемент:
html {filter: invert(100%) hue-rotate(180deg);background:black}
img {filter: invert(100%) hue-rotate(180deg) !important;}
video {filter: invert(100%) hue-rotate(180deg) !important;}