Как инвертировать цветовую схему веб-страниц в Firefox?


10

Я пользуюсь для просмотра веб-страниц в темной комнате и предпочитаю, чтобы фон был темным, а текст - светлым, а не наоборот, что встречается гораздо чаще. Я полагаю, что это может быть достигнуто с помощью некоторого пользовательского кода CSS или JS, но я не являюсь веб-кодером и не уверен в том, как это сделать (особенно если это применимо ко всем веб-сайтам). Еще более круто было бы, если бы существовало расширение для установки и получения только необходимого эффекта.

Какие-либо предложения?


Возможно, вы захотите взглянуть на красное смещение .
Кристиан Чиупиту

Ответы:


16

В браузерах на основе WebKit вы можете добавить следующий стиль для достижения инверсии цвета:

html { -webkit-filter: invert(); }

введите описание изображения здесь

К сожалению, в настоящее время мы ожидаем внедрения в Firefox: https://developer.mozilla.org/en-US/docs/CSS/filter#Browser_compatibility

Эквивалент в Firefox будет выглядеть так:

html {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert");
}

Результаты не так хороши, хотя:

введите описание изображения здесь

бонус

Вот букмарклет для WebKit (требуется загрузка jQuery):

javascript:$("html").css("-webkit-filter","invert()")

В моем случае границы сайта не перевернуты. Link . Я думаю, мне нужно инвертировать другой тег, а не только html. Что я должен сделать, чтобы инвертировать границы?
Утку

2

Попробуйте это .. Инструменты> Параметры> Нажмите вкладку Содержание, затем нажмите кнопку Цвета. Теперь снимите флажок «Разрешить страницы, бла-бла ....». Теперь выберите белый цвет для текста и черный цвет для фона. Надеюсь, поможет. Я сделал это на ver24.0.


1

(Редактировать: только что понял, что букмарклет не работает в Firefox, потому что Mozilla решила не поддерживать Invert. Но на странице есть ссылка jQuery, которая будет делать то же самое.) Вы можете использовать букмарклет на этой странице: http: / /lea.verou.me/2011/04/invert-a-whole-webpage-with-css-only/

Операционная система? У меня есть приложение на моем Mac, ноктюрн, оно инвертирует цвета по всем направлениям. Аналогично простому нажатию ctrl-option-cmd-F8. Я не знаю, как это сделать в Windows. Ноктюрн немного приятнее, так как он настраивает цвета, а не просто инвертирует их, чтобы сделать просмотр немного приятнее ночью или при слабом освещении. Преимущество здесь в том, что переключается все, а не только страницы Firefox, и вам не нужно постоянно применять его каждый раз при загрузке новой страницы.



0

Создайте букмарклет со следующим URL:

javascript:void(document.getElementsByTagName('html')[0].style.webkitFilter='invert()');
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.