Многие веб-ресурсы не предоставляют возможность переключения между светлой и тёмной темами. Однако существует способ самостоятельно добавить тёмную тему на любой сайт или PDF-документ с помощью простого JavaScript-кода.
Важное преимущество описанного далее метода заключается в том, что он работает не только с обычными веб-страницами, но и с PDF-документами, отображаемыми в браузере.
Для создания тёмной темы достаточно ввести следующий код в консоль браузера:
var cover = document.createElement("div");
let styleCSS = `
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: white;
mix-blend-mode: difference;
z-index: 9999;
`;
cover.setAttribute("style", styleCSS);
document.body.appendChild(cover);
Особенности работы с PDF
- Сохраняет чёткость текста
- Правильно обрабатывает изображения
- Работает с закладками и навигацией
- Поддерживает масштабирование
Как это работает
- Слой использует режим смешивания difference для инвертирования цветов
- Свойство pointer-events: none обеспечивает корректную работу кликов
- Высокий z-index гарантирует размещение слоя поверх контента
Преимущества метода
- Простая реализация без лишних элементов
- Работает с веб-страницами и PDF
- Не требует дополнительных расширений
- Мгновенное применение
Ограничения
- Некоторые интерактивные элементы могут работать некорректно
- Не все сайты корректно реагируют на инвертирование цветов
- Метод может не работать на страницах с нестандартной вёрсткой
