Как сделать Яндекс темным на Андроид – ставим ночную тему оформления

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

1. Активация темной темы через десктоп
2. Через настройки браузера
3. Dark Mode — темный режим
4. Включение темной темы на смартфоне
5. Варианты черной темы

Активация темной темы через десктоп

Включить темную тему в Яндекс.Браузере можно на компьютере или ноутбуке любой операционной системы – Windows и Mac OS.

Через настройки браузера

Самый простой вариант сделать в Яндекс.Браузере темную тему – переключить режим оформления через настройки.

Минусом способа является то, что затемнится только интерфейс обозревателя – обрамление, всплывающие окна, вкладки. Заливка на страницах сайтов останется базовой.

Как поменять светлую цветовую схему Yandex Browser на темную:

1. Перейдите в настройки – кнопка в верхней части в виде трех параллельных черточек.
2. Откройте раздел «Интерфейс».
3. Кликните на иконку «Темная» в блоке «Цветовая схема».

Отметьте галочкой пункт «Использовать темные фоны с темной темой», чтобы на главной странице веб-обозревателя автоматически устанавливались изображения в черных тонах.

Описанный алгоритм действий активации черной темы подойдет для Яндекс.Браузера обновления 19.6 и выше . В старых версиях необходимо в параметрах интерфейса поставить галочку рядом с пунктом «Темная тема». Новые параметры автоматически применятся к облику страниц.

Dark Mode — темный режим

Темный фон на веб-страницах в Яндекс.Браузере в рамках базовых настроек невозможно. Нужно добавить дополнительные инструменты в обозревателе:

1. Перейдите в расширение Dark Mode по ссылке для Яндекс.Браузера.
2. Нажмите на кнопку «Добавить».
3. Подтвердите установку в открывшемся окне.
4. Кликните на появившийся ползунок в верхней части экрана для переключения на темную тему.

Для загрузки файла потребуется 252,5 Кб свободной памяти на диске .

Управлять расширением можно через раздел «Дополнения» в настройках браузера. Доступно изменить возможность использования в режиме «Инкогнито» и при открытии файлов разных форматов.

Через настройки дополнения можно также изменить цвета Dark Mode. В открывшейся вкладке столбцом представлены вариации оформления. Например, добавить оранжевый цвет для обрамления и кнопок в черной теме социальной сети ВКонтакте.

Проблемы с установкой расширения могут возникнуть из-за заражения ПК вирусами. Проверьте наличие вредоносных файлов с помощью антивируса или специальных утилит.

Простые способы

Прежде чем дойти до нашего волшебного «перекрашивателя», мы опробовали два простых, как пробка, варианта: навесить на элемент дополнительный тёмный стиль или CSS-фильтр. Нам они не подошли, но, возможно, для каких-то случаев будут даже лучше (потому что просто = круто).

Переопределение стилей

Самый простецкий способ, логично расширяющий тёмную тему самого приложения в CSS: повесим тёмные стили на контейнер для писем (в общем случае — для чужого контента, который нужно перекрасить):

.message—dark { background-color: black; color: white; }

Но если у элементов внутри письма есть свои стили, они переопределят наш корневой стиль. Нет, !important не поможет. Идею можно дожать, отрубив наследование:

.message—dark * { background-color: black !important; color: white !important; border-color: #333 !important; }

В данном случае без !important не обойтись, потому что сам по себе селектор не очень специфичный. Тем более это понадобится, чтобы переопределить инлайн-стили (а инлайн-стили с !important всё равно пролезут, ничего не поделать).

Наш стиль довольно топорный и красит всё одинаково, так что вылезает другая проблема: вероятно, дизайнер хотел что-то сказать расстановкой цветов (приоритеты элементов и прочие дизайнерские штуки), но мы взяли и выкинули всю эту задумку.

Если вы уважаете дизайнеров меньше, чем я, и всё же решите использовать такой метод, не забудьте допилить неочевидные мелочи:

• box-shadow — только цвет переопределить не выйдет, придётся все тени убрать или жить со светлыми.
• Цвета семантических элементов — ссылок, элементов ввода.
• Инлайн-SVG — вместо background им нужно выставлять fill, а вместо color — stroke, но это не точно, смотря какой SVG — может быть и наоборот.

Технически способ неплох: это три строчки кода (ладно, тридцать для продакшн-реди версии с корнеркейсами), совместимость со всеми браузерами мира, обработка динамических страниц из коробки и никакой привязки к способу подключения стилей в исходном документе. Особый бонус —можно легко подкрутить цвета в стиле, чтобы они подходили к основному приложению (скажем, сделать фон #bbbbb8 вместо чёрного).

Кстати, раньше мы перекрашивали письма именно так, но, если находили внутри письма любые стили, пугались и оставляли письмо светлым.

CSS-фильтр

Очень остроумный и элегантный вариант. Перекрасить страницу можно CSS-фильтром:

.message—dark { filter: invert(100) hue-rotate(180deg); /* hue-rotate возвращает тона обратно */ }

После этого фотографии станут криповыми, но это не беда — их перекрасим обратно:

.message-dark img { filter: invert(100) hue-rotate(180deg); }

Остаются проблемы с контентными картинками, привязанными через background (знаем, так удобнее подстраивать соотношение сторон, но как же семантика?). Допустим, что мы сможем найти все такие элементы, явно их пометить и перекрасить обратно.

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

1. Тёмные страницы осветляются.
2. Итоговыми цветами невозможно управлять — какой фильтр наложить, чтобы подстроить фон к вашему фирменному #bbbbb8? Загадка.
3. После двух перекрасов картинки выцветают.
4. Всё тормозит (особенно на телефонах) — логично, теперь вместо простой отрисовки браузеру нужно на каждом экране гонять обработку изображений.

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

Включение темной темы на смартфоне

Активировать темную тему на смартфоне Андроид или Айфоне в Яндекс.Браузере можно через базовые настройки:

• откройте мобильное приложение Yandex;
• нажмите на иконку в виде трех точек права от поисковой строки на главной странице;
• выберите во втором блоке вкладку «Темная тема»;
• перенесите ползунок вправо;
• перейдите в «Подобрать темный фон», чтобы установить изображение для оформления.

При желании можно добавить любую картинку из памяти мобильного устройства по ссылке «Загрузить с телефона».

Изменение темы оформления на главной странице Яндекс

Важно! По состоянию на ноябрь 2022 года выбор и отображение темы на главной странице Яндекса больше не поддерживается. Об этом сообщается на официальной странице сервиса Яндекс.Справки, доступной по указанной ниже ссылке.

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

Варианты черной темы

В последних версиях Яндекс.Браузера предусмотрена возможность через настройки черное оформление разнообразить цветными вкладками. Для этого в параметрах интерфейса выберите тему «Цветная». В открывшемся окне отобразятся доступные варианты.

Вариации темного интерфейса расположены на последней строке. Сейчас доступно выбрать семь цветов вкладок. После выбора нажмите на «Сохранить», чтобы применить понравившееся оформление.

Через «Настройки внешнего вида вкладок» дополнительно можно изменить формат вкладок. Можно выбрать округлую или квадратную форму, заменить окраску и расположение.

Какие еще бывают темы Яндекс. Поиска

Светлая и темная тема – это не единственные решения для оформления Yandex Browser. После открытия настроек и перехода в раздел «Интерфейс» пользователю необходимо среди схем оформления выбрать цветную. После этого откроется меню с огромным количеством вариантов на любой вкус.

Человек вправе выбрать любую понравившуюся и сохранить изменения. Теперь оформление будет таким, каким его задумал сам пользователь Яндекс браузера.

Установка темы в Яндекс.Браузере

Не все начинающие пользователи знают, как установить фон для Яндекс.Браузера. Между тем, это крайне легкий процесс, не требующий длительных временных затрат и выполнения сложных манипуляций. У программы есть свой каталог красивых заставок, позволяющих разнообразить вкладку «Табло» (так в Яндекс.Браузере называется новая вкладка). На свой вкус каждый пользователь может выбрать обычную картинку и анимацию.

Хотим сделать несколько уточнений касательно анимированных изображений:

• Воспроизведение анимации потребляет немного больше ресурсов компьютера или ноутбука, поэтому на старых и слабых устройствах возможны подвисания при открытии «Табло».
• После нескольких минут бездействия анимация приостанавливается браузером автоматически в целях экономии ресурсов. Это происходит, например, когда открыто «Табло» и вы ничего не делает за ПК, либо окно браузера развернуто, но неактивно, и вы пользуетесь другой программой. Повторное воспроизведение начинается при движении мышкой или переключения из другого приложения в веб-обозреватель.
• Вы можете самостоятельно управлять воспроизведением и остановкой анимации через настройки «Табло». В первую очередь это актуально для владельцев ноутбуков, периодических работающих от заряда батареи.

Способ 1: Установка готовых фонов

Долгое время Яндекс никак не обновлял собственную галерею, однако теперь веб-обозреватель почти полностью избавился от прежних картинок и обзавелся большим количеством новых. Практически каждый пользователь сможет подобрать для себя красивые обои, которые будут украшать новую вкладку. Давайте разберемся, как устанавливать классические и анимированные картинки.

Откройте новую вкладку и найдите кнопку «Галерея фонов».

Сперва отображаются новые или популярные категории, чуть ниже в виде тегов расположены категории. Во всех них находятся стандартные тематические изображения.

Для анимированных обоев есть отдельный раздел «Видео».

Перейдя в раздел с изображениями, подберите понравившееся. Если нравится все (или почти все), сразу же кликните по кнопке «Чередовать эти фоны». После этого каждый день на новой вкладке будут отображаться разные обои. Когда список закончится, начнется его повторение с первой же картинки. Картинку, которая вам не понравится, можно будет пролистнуть. Об этом мы расскажем чуть ниже.

Если вы зашли в раздел с «Видео», здесь никаких кардинально других отличий от вышенаписанного нет. Единственное — можно навести курсор мышки на плитку со стоп-кадром, чтобы быстро просмотреть полную версию анимации.

Чтобы не пропускать обновлений, последние заставки отображаются ниже, во «Все фоны». У анимированных есть значок видеокамеры, чтобы вы могли быстро отличить их.

Параметры фона

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

Откройте «Табло» и нажмите на кнопку с тремя вертикальными точками рядом с «Галерея фонов», чтобы появилось выпадающее меню с настройками.

Используйте стрелки влево и вправо, чтобы переключать на предыдущие и последующие обои соответственно. Если вы включили чередование картинок определенной тематики (допустим, «Море») изображения будут меняться последовательно этому списку. А если делали выбор из раздела «Все фоны», стрелки переключат на те картинки, что были выпущены разработчиками ранее или позднее текущего фона.

Параметр «Чередовать каждый день» говорит сам за себя. Правила изменения картинок полностью аналогичны пункту выше с ручной их сменой.

Функция «Анимация фона» появляется только при установке анимированных фонов. Вы можете выключить анимацию, например, если ресурсы компьютера нужны для других программ или чтобы анимация не разряжала ноутбук, работающий от батареи. Когда тумблер сменит цвет с желтого на черный, воспроизведение остановится. Включить его можно будет точно так же в любой момент.

Способ 2: Установка собственного изображения

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

Загрузка с компьютера

Хранящиеся файлы на жестком диске вашего ПК могут быть установлены в качестве фона браузера. Для этого картинка должна быть формата JPG либо PNG, желательно с высоким разрешением (не ниже разрешения вашего дисплея, иначе при растягивании она будет выглядеть некрасиво) и хорошим качеством.

Откройте «Табло», нажмите на троеточие рядом с «Галерея фонов»и выберите пункт «Загрузить с компьютера».

Используя проводник Windows, отыщите нужный файл и кликните по нему.

Фон в Яндекс.Браузере автоматически сменится на выбранный.

Через контекстное меню

Очень удобная функция установки фона прямо с сайта поддерживается Яндекс.Браузером. Вам даже не надо скачивать картинку на ПК, чтобы затем установить ее методом, описанным выше. Поэтому если вы нашли какое-то красивое изображение, устанавливайте его на фон за пару кликов.

В другой нашей статье мы подробно описали все рекомендации и советы касательно этого процесса. Нажмите по ссылке ниже и прочитайте информацию из «Способа 2».

Теперь вы знаете, как можно быстро и легко менять фон в Яндекс.Браузере. Напоследок заметим, что установка темы в привычном понимании этого слова невозможна — программа поддерживает лишь установку встроенных или персональных изображений.

Мы рады, что смогли помочь Вам в решении проблемы.

Добавьте сайт Lumpics.ru в закладки и мы еще пригодимся вам. Отблагодарите автора, поделитесь статьей в социальных сетях.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Как активировать тёмную тему во всех приложениях на Android 10

Тёмный режим, или как его ещё называют, тёмная тема, уже доступен на Android 10 для ряда приложений в качестве опции. К сожалению, несмотря на его популярность, далеко не каждая программа поддерживает эту возможность, что сильно расстраивает поклонников этого популярного режима. К счастью, уже сейчас есть способ привести к единому виду все приложения, сделав их одинаково тёмными. При этом совершенно не нужно поднимать Root и делать со своим смартфоном других страшных вещей. Достоверно известно, что способ гарантировано работает на Google Pixel 3 и OnePlus 7 Pro. Стоит отметить, что для активации тёмной темы во всех приложениях вам понадобится включить на телефоне режим разработчика, кроме того, опция в ряде приложений может работать неидеально.

Смартфон с Android 10 в руке

Режим разработчика точно присутствует в каждом смартфоне под управлением Android 10, но по умолчанию он обычно скрыт, хотя иногда и могут встречаться исключения.

Не проходите мимо! Наш Яндекс.Дзен — тут!

Итак, тёмный режим можно включить даже в тех приложениях, что официально его пока не поддерживают. Первое, что нужно сделать — перейти к инструментам разработчика. Для этого следует зайти в настройки, пролистать их до пункта «О телефоне», а затем найти строку «Версия сборки», «Версия MIUI» или что-то в этом духе. Далее нужно быстро нажимать на строку пальцем до тех пор, пока на дисплее не появится уведомление о том, что вы получили права разработчика.

Ещё один смартфон с тёмной темой

Прежде чем продолжить, учтите, что режим разработчика — довольно опасная в неумелых руках вещь. Если вы не уверены в чём-то, видите незнакомый пункт, которого не было в настройках ранее, лучше ничего не трогайте, оставьте его в покое. Не активируйте случайных опций, не нажимайте на подменю, названия которых вам ничего не говорят. Всё это предназначено для опытных разработчиков программного обеспечения. Наша же цель — включить модную тему для всех приложений. Если вы готовы, то можете читать дальше.

Заходим в подменю параметров разработчика, ищем стоку поиска и вводим туда фразу override force dark. Видим перед собой переключатель и активируем. Всё, теперь даже приложения, которые пока не поддерживают тёмный режим официально, должны почернеть. Если этого не произошло с какой-то программой, попробуйте подождать, пока к ней применятся новые параметры. Если не помогло — просто переустановите программу.

Имейте ввиду, что некоторые приложения могут начать «глючить» из-за непривычных настроек, так что, если что-то пойдёт не так, верните переключатель в режим ВЫКЛ, либо отключите тёмную тему в настройках работающего некорректно приложения.

А что делать тем, у кого смартфон не поддерживает установку Android 10? К счастью, частично решить проблему можно и на более старых версиях ОС.

Рассказать о том, получилось у вас или нет, можно в комментариях или нашем телеграм-чатике.

Источник

Инструкция

Начнем с того, что ночного режима как такового в PC версии Яндекс.Браузера в настоящее время нет. Присутствует только темная тема. Которая, кстати, появилась недавно. И ее можно попытаться включить. Об этом мы и поговорим.

А если вам нужно сделать все страницы в черных тонах, тогда придется использовать расширение. Только так можно решить проблему. И об этом мы тоже поговорим. В общем, попытаемся максимально качественно решить проблему.

Итак, сначала мы поговорим о включении темной темы в Яндекс.Браузере, а потом рассмотрим расширение, позволяющее сделать все страницы темными. Но сначала о самом веб-обозревателе. Начнем, пожалуй.

Включение черной темы в браузере

Как поставить темную тему в Яндекс.Браузере? Да очень просто. Для этого потребуется воспользоваться настройками веб-обозревателя. Стоит отметить, что эта опция появилась в приложении относительно недавно.

Если вы обновляли веб-обозреватель, то она у вас уже есть. А если нет, то придется сначала обновить и только потом заниматься настройкой. Вот и инструкция, которая подробно расскажет о правильном алгоритме действий.

1. Сначала запускаем веб-обозреватель при помощи соответствующего значка на рабочем столе.
2. Далее нажимаем на кнопку с тремя горизонтальными полосками, которая располагается в правом верхнем углу главного окна.
3. Появится меню, в котором нужно кликнуть по пункту «Настройки».
4. Теперь нужно пролистать список параметров до раздела «Интерфейс» и найти блок «Цветовая схема».
5. Отмечаем пункт «Темная» и заодно «Использовать темные фоны…».

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

Включение черного оформления страниц

Как сделать Яндекс темным фоном, а вместе с ним и другие страницы? В этом нам поможет расширение под названием Dark Reader. Его можно без проблем найти в интернет-магазине Google Chrome. Плагин отличается очень простыми настройками и наличием русского языка в интерфейсе.

Данное дополнение весьма неплохо заменяет расцветку страниц на черные тона. Причем никакого конфликта шрифтов и фона нет. Так что стоит попробовать. Вот подробная инструкция, рассказывающая о том, как и что нужно делать.

1. Сначала запускаем веб-обозреватель при помощи соответствующего значка на рабочем столе.
2. Далее, открываем страницу https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=ru.
3. Откроется страница с описанием расширения. Просто нажимаем на кнопку «Установить» и подтверждаем процедуру.
4. Через некоторое время иконка дополнения появится в панели инструментов. Кликаем по ней.
5. Нажимаем на кнопку «Вкл».
6. Загружаем какую-нибудь страницу и проверяем работу плагина.

Теперь все страницы, загружаемые в браузере, будут иметь черное оформление. Настраивать плагин не нужно. Он работает в автоматическом режиме и без проблем справляется даже с самыми сложными страницами.

Затемнение страниц

В этом случае нам понадобится расширение под названием Care Your Eyes. Оно отлично работает с мобильной версией Яндекс Браузера. Цвета страниц при его использовании инвертируются в темные, что позволяет просматривать их более комфортно в темноте.

У расширения есть определенные настройки, но касаться их мы не будем. Плагин превосходно работает и со стандартными параметрами. Сейчас мы рассмотрим процесс инсталляции и активации. Вот соответствующая инструкция.

После рестарта все страницы будут отображаться в темных тонах. При желании можно заняться тонкой настройкой дополнения и самому выбрать цвета. Но и в стандартном исполнении все выглядит неплохо. Так что настраивать ничего не нужно.

Как в браузере Microsoft Edge включить тёмную тему оформления

21.01.2021 | Браузеры IT-Actual.ru Нет комментариев

Разработчики браузера Microsoft Edge постарались на славу, внедрив множество инноваций в свой новый Интернет браузер, который пришёл на смену старому доброму Internet Explorer-у, которым долгое время «комплектовался» Windows на протяжении нескольких поколений. Среди обширного списка нововведений Microsoft Edge имеется и возможность изменить тему оформления с традиционной светлой на тёмную. Благодаря переключению оформления интерфейса браузера на тёмный дизайн, к примеру, лучше воспринимается отображаемый в окне браузера контент, если внешнее освещение достаточно слабое.

К тому же это какое-никакое разнообразие, которое едва ли можно было реализовать ранее в интерфейсе браузера от Microsoft.

Непосредственное переключение цветовой гаммы интерфейса осуществляется столь же просто, как и использование самого браузера Microsoft Edge. Далее мы детально рассмотрим, как осуществить переключение темы оформления во встроенном по умолчанию браузере Майкрософт Идге в Windows 10.

Что такое Firefox Focus

Firefox Focus не хранит историю и требует Touch ID, если есть открытые страницы

У Firefox есть специальная мини-версия браузера. Основная его фишка — это повышенная конфиденциальность. В приложении нет функции переключения вкладок, истории. Даже закладки сохранить нельзя. Лишь в одном окне можно взаимодействовать со страницами, а приложение по умолчанию отключает отслеживание рекламы, контента и соцсетей. Все трекеры, которые заблокировал Firefox Focus можно по нажатию кнопки. Топовый браузер для тех, кто переживает за конфиденциальность.

Как добавить билет в Wallet на Айфоне

Включаем тёмную тему оформления в Microsoft Edge

1. Данная задача осуществляется в параметрах Microsoft Edge. Дабы открыть их, следует осуществить нажатие по кнопке меню. Оная кнопка расположена в углу интерфейса браузера, на ней изображено несколько точек.

Нажав по кнопке, что вызывает главное меню в браузере Microsoft Edge, далее следует выбрать в появившемся меню пункт Параметры.

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

Кликните по пункту Светлая и в выпадающем меню выберите вариант Тёмная. Тема будет моментально переключена в тёмный вариант в браузере Майрософт Идге.

Как можно заметить невооружённым взглядом, разработчики сделали всё, дабы процедура переключения интерфейса на тёмный цвет в браузере Microsoft Edge была максимально быстрой и не представляла особых сложностей для самого широкого круга пользователей. Буквально несколько кликов и результат не заставит себя ждать – теперь вы сможете работать в браузере, интерфейс и в целом концепция которого была переосмыслена, дабы понравиться как можно большему количеству как действующих, так и потенциальных пользователей. И добавленная кастомизация цвета интерфейса окна Интернет браузера это лишь подтверждает.

Мы рады, что смогли помочь Вам в решении поставленной задачи или проблемы.

В свою очередь, Вы тоже можете нам очень помочь.

Просто поделитесь статьей в социальных сетях и мессенджерах с друзьями.

Поделившись результатами труда автора, вы окажете неоценимую помощь как ему самому, так и сайту в целом. Спасибо!

Mozilla Firefox для Айфона

Firefox работает шустро, не тормозит и блокирует рекламу

Я пользуюсь Firefox для ПК уже около 10 лет: так уж вышло, что в те времена Chrome уже был тяжеловат для слабеньких нетбуков, а вот Firefox отлично справлялся и не подвисал. Мои коллеги до сих пор считают меня ненормальным, ибо лучше использовать Chrome. Мобильная версия для iPhone очень схожа по оформлению с десктопной, в результате чего не испытываешь дискомфорта. Сбоев в браузере нет, за исключением одного неделей ранее. Кроме того, имея учетную запись в Firefox, можно синхронизировать закладки, открытые страницы и пароли.

В приложении достаточно функций конфиденциальности, что устроит тех, кого это особенно волнует. К сожалению, приложение не имеет расширений как у ПК-версии. В приватном режиме не сохраняется информация о просмотре, а все логины и пароли доступны только при использовании Touch ID или Face ID. Есть ночной режим, при использовании которого все страницы становятся темными, а еще встроенная защита от всплывающих страниц и рекламы.

Firefox для iPhone

Тратим накопленное: Кайфовые находки с АлиЭкспресс за эту неделю

Включаем темную тему в Яндекс браузере

Темный режим, снижающий нагрузку на глаза при работе за компьютером, появился в Windows летом 2016 года с выходом версии 1607 Anniversary Update. Яндекс тянул с полноценной реализацией Night Mode еще два года, добавив ее только осенью 2022. В течение всего этого времени обозреватель оставался «белым пятном» в операционной системе, выбиваясь из общего фона. Сегодня мы рассказываем, как включается темная тема в Яндекс.Браузере и разбираемся с нюансами ее работы.

Как включить темную тему для всех сайтов

Что делать, если вы хотите затемнить интерфейс различных сайтов? В случае с некоторыми мессенджерами, это можно сделать через стандартные настройки. Например, сменить тему можно в браузерных версиях Discord, Telegram и не только.

Однако для остальных сайтов таких настроек нет. Здесь на помощь приходят расширения и плагины.

DarkReader

Это самое популярное и эффективное расширение для браузера, которое позволяет включить темную тему практически для любого сайта. Плагин редактирует HTML-код, меняя цвет фона и шрифта для каждого интернет-ресурса. Дополнение распространяется для Chrome, Firefox, Safari и Edge.

В 99 % случаев плагин корректно подбирает цвет шрифтов, но на некоторых ресурсах могут попадаться надписи, которые теряются на сером фоне.

Настройки выполняются через ярлык, который появляется в верхней правой части окна. Пользователи могут отключить темный режим для сайта или наоборот — выставить светлый, сменить яркость, контрастность, настроить сепию или оттенки серого. Отдельным блоком идет настройка шрифтов. Включена поддержка горячих клавиш для включения и отключения плагина.

Единственный условный недостаток — страницы могут подгружаться с небольшой задержкой в 1-2 секунды, поскольку Dark Reader изменяет их код.

NightEye — Темный режим

Если предыдущий плагин по каким-то причинам работает некорректно, можете скачать расширение NightEye. Как и предыдущее, оно изменяет цвет фона и шрифта для каждого сайта, фактически включая ночную тему. Ключевое преимущество — поддержка более широкого списка браузеров: Google Chrome, Opera, Firefox, Safari, Edge, Yandex, UCBrowser и не только. Ссылка на скачивание для каждого браузера располагается на официальной странице.

Вы можете изменить яркость, контраст, насыщенность цветов, а также устранить синий оттенок. Последнее еще больше снижает нагрузку на глаза. Разработчики NightEye предлагают уникальную функцию конвертирования иконок, но это существенно повышает нагрузку на CPU. Вы можете даже настроить время работы плагина, например, чтобы он автоматически включался только в вечернее время.

Выставить русский язык для плагина можно в настройках через иконку шестеренки

SuperDarkMode

Это расширение создано только для Google Chrome, но входит в список наиболее популярных. Позволяет сменить цвета сайта на более темные и в большинстве случаев делает это максимально корректно. В правой части окна появляется соответствующая иконка, нажимая на которую вы можете включать или отключать темный режим.

Через параметры дополнения уже выполняется тонкая настройка. Можно добавить популярные сервисы в исключения, а в продвинутом режиме выбрать цвета фона, ссылок и других элементов сайта на свой вкус из палитры. Также имеется режим работы по расписанию, настройка яркости и контрастности. Все пункты меню на английском, однако встроенный переводчик Chrome легко решает эту проблему.

Эти расширения включают ночной режим независимо от того, поддерживает ли сайт темную тему или нет, однако потребляют небольшой ресурс ОЗУ и дают дополнительную нагрузку на процессор.

Интерфейс

Сделать темную тему в Яндекс браузере можно в любой версии поисковой системы, как с компьютера, так и с мобильного устройства. Dark Mode удобна для восприятия в темное время суток, в меньшей степени напрягает зрение и меньше отвлекает от просмотра контента. Темная тема также подходит тем, кто выбрал соответствующее оформление для своей операционной системы.

Настройка цветовой схемы в Яндекс браузере

Разница между браузером и большинством системных программ заключается в том, что ему приходится работать с внешними данными. Говоря иными словами, пользователь в соответствии со своими предпочтениями может сделать черным интерфейс Проводника, но никак не может повлиять на оформление веб-страниц.

1. Запустив обозреватель, нажимаем на указанную стрелкой область верхней панели. В открывшемся управляющем меню выбираем пункт «Настройки».

Открываем настройки в управляющем меню Яндекс.Браузера

1. Переключаемся в боковой области навигации на раздел «Интерфейс». Прямой доступ к нему можно получить, набрав в адресной строке или скопировав в нее без кавычек путь: «browser://settings/interface». В области «Цветовая схема» устанавливаем переключатель в указанное стрелкой место, активируя темный вариант оформления.

Изменяем цветовую схему оформления с системной на темную

1. На следующем скриншоте показано, как изменяется внешний вид обозревателя. Панели и «умная строка» получают окраску в темных тонах, но основной фон по-прежнему остается светлым. Веб-страницы будут отображаться в Dark Mode, только если это предусмотрено их собственными настройками. Изменения не затронут также «табло», открывающееся по умолчанию в каждой новой вкладке. Для усиления полученного эффекта ставим еще одну галочку в обозначенном цифрой «2» пункте.

Подключаем фоновое изображение для темной темы

1. Яндекс.Браузер автоматически подберет фоновое изображение, подходящее к общей теме оформления. В результате «табло» приобретет вид аналогичный показанному на следующей картинке.

Итоговый вид обозревателя после включения темной темы и подключения фона

Адаптивная тема

Настало время волшебства! Из недостатков первых двух подходов собираем чеклист:

1. Делать фон тёмным, текст — светлым, границы — средними.
2. Определять уже тёмные страницы и не перекрашивать их.
3. Сохранять оригинальное соотношение яркостей и контрастов.
4. Давать возможность настройки цветов.
5. Оставлять тона такими, какими они были вначале.

Нам нужно изменить цвета стилей так, чтобы фон был тёмным. И почему бы не сделать это буквально? Просто берём все стили, ищем правила, связанные с цветами (color, background, border, box-shadow, их подсвойства), и заменяем его на «затемнённое» — затемняем фон, осветляем текст, границы затемняем меньше фона и т. д.

У такого метода есть одно невероятное достоинство, которое согреет душу любому разработчику. Каждому свойству можно настраивать (да, прямо кодом описывать!) свои правила преобразования цветов. При достаточном воображении можно интегрироваться с любой внешней темой, делать любую цветокоррекцию (например, вместо тёмной темы делать светлую или серо-буро-малиновую) и даже добавлять немного контекстности — скажем, по-разному обрабатывать широкие и узкие границы.

Недостатки — стандартные для «everything-in-js». Да, мы гоняем скрипты, ломаем инкапсуляцию стилей и парсим CSS регэкспами. Ну, в отличие от HTML, последнее не так уж позорно, потому что грамматика (нужного нам уровня) CSS всё-таки регулярная.

План перекраски такой:

1. Нормализуем легаси-свойства стиля (bgcolor и друзей), перекладываем их в style=»…».
2. Находим все инлайн-стили.
3. В каждом стиле находим все цветные правила (background-color, color, box-shadow и т. д.).
4. Из всех цветных правил достаём цвета, находим нужный преобразователь (затемнитель для фона, осветлитель для текста).
5. Вызываем преобразователь.
6. Собираем преобразованные правила обратно в CSS.

Обвязка (нормализация, поиск стилей, парсинг) довольно простая. Разберёмся с тем, как именно работает наш волшебный преобразователь.

HSL-преобразования

«Затемнить цвет» — не такое простое действие, как может показаться, особенно если мы хотим сохранить тон (голубой становится тёмно-синим, а не оранжевым). Сделать это в нормальном RGB можно, но проблематично. Любители алгоритмического дизайна знают, что там даже градиенты получаются кривоватые. Зато работать с цветами в HSL — чистое наслаждение: вместо Red, Green и Blue, с которыми непонятно, что делать, у нас появляются другие три канала:

• Hue — как раз тон, который мы хотим сохранить.
• Saturaion — насыщенность, которая нам сейчас не очень важна.
• Lightness — яркость, которую мы будем менять.

Такое пространство удобно представлять в виде цилиндра. А наша задача — перевернуть этот цилиндр с ног на голову. Функции цветокоррекции делают что-то вроде (h, s, l) => [h, s, 1 — l].

Цвета, с которыми и так всё хорошо

Иногда ситуация складывается удачно: эксклюзивный дизайн письма (или его части) уже тёмный. В таком случае не нужно ничего менять, лучше просто тихонько порадоваться — вероятно, дизайнер подобрал цвета не хуже нашего алгоритма. В HSL достаточно смотреть на L — яркость. Если она выше (для текста) или ниже (для фона) порога (который, конечно, настраивается) — ничего не делаем.

Динамический цирк

Хотя нам это и не понадобилось (ещё раз спасибо, санитайзер, ты спас меня от безумия!), но я всё же расскажу, какие допилы нужны адаптивной теме, чтобы затемнять полные страницы, а не только дурацкие статические письма из девяностых. Аккуратнее, это задача для тех, кто любит запах селекторов по утрам.

Динамические инлайн-стили

Самый простой кейс, который ломает нашу затемнённую страницу — изменение инлайн-стилей. Операция частая, но и фикс простой: добавляем MutationObserver и оперативно чиним инлайн-стили при изменениях.

Внешние стили

Работать со стилями из

изнутри страницы довольно мучительно из-за асинхронности и @import, да и от CORS не веселее. Кажется, эту проблему можно было бы довольно элегантно решить через веб-воркер (прокси для *.css).

Динамические стили

Наконец, собирая в кучу все наши проблемы, вспоминаем, что скрипт вообще может добавлять, удалять и переставлять (специфичность! каскад!)

и , да ещё и менять правила в . Решается всё тем же MutationObserver на элементы стилей, но на каждое изменение — больше обработки.

CSS-переменные

Совершенно новый виток безумия наступает, когда в игру входят CSS-переменные. Затемнять сами переменные мы не можем: даже если допустить, что мы по формату угадаем, что в переменной находится цвет (хотя я бы не советовал этим заниматься), неизвестно, в какой роли он нам встретится — фон, текст, граница, всё сразу? Более того, значения переменных наследуются, так что нам уже нужно учитывать не только стили, но и элементы, к которым они применяются, и всё это быстро эскалируется и взрывается.

Если CSS-переменные доедут до мейнстрима, у нас проблемы. С другой стороны, к тому времени уже начнут подвозить color(), с которым можно будет не менять цвета в JS, а просто заменять цвета на color(var(—bg) lightness(-50%)).

Резюме

Для нашего случая, когда санитайзер оставляет только инлайн-стили, адаптивное затемнение на уровне CSS подходит отлично: даёт лучшее качество затемнения, не ломает письма и работает относительно просто и быстро. Не уверен, что вариант со всем фаршем для динамики стоит того. К счастью, если вы работаете с пользовательским контентом и при этом пишете не браузер, ваш санитайзер должен делать то же самое.

На практике адаптивный режим нужно использовать вместе с переопределением стилей: к стандартным элементам вроде или стили обычно явно не применяют, а по умолчанию они светлые.

Настройка режима чтения

Режим чтения, используемый в современных браузерах, – это еще один способ снизить нагрузку на глаза пользователя. Он приходит на помощь в тех случаях, когда необходимо много читать с монитора, но нет возможности обеспечить яркое освещение рабочего пространства.

1. Оставаясь в том же разделе «Интерфейс», в котором меняли цветовую гамму оформления, спускаемся на несколько пунктов ниже, в область «Умная строка». Проверяем наличие галочки в поле, указанном стрелкой.

Активируем кнопку «режим чтения» в адресной строке обозревателя

1. При посещении большинства веб-страниц в правой части строки адреса будет отображаться указанная стрелкой иконка. Нажав на нее, переводим обозреватель в режим чтения.

Увеличенное изображение кнопки «режим чтения» в адресной строке

1. Включение Read Mode оптимизирует текстовую информацию, приводя ее в удобный «газетный вид». Со страницы убираются стили, рекламные блоки, фоновые картинки и прочие отвлекающие внимание элементы оформления. Одновременно под адресной строкой появляется дополнительная панель управления видом. С ее помощью корректируются три основных параметра: размер шрифта, его гарнитура и цвет подложки. Изменяем последний на черный, переключая значение в обозначенной цифрой «2» области.

Переключаем фоновое изображение страницы в режиме чтения

1. Оставаясь в режиме чтения, получаем страницу, полностью оформленную в темных тонах.

Вид Яндекс.Браузера с темной темой оформления и черным фоном в режиме чтения

Преимущества и недостатки темной темы

Среди преимуществ настройки темной темы можно отметить ее доступность – изменить цвет можно с любого устройства (как с компьютера, так и с телефона, планшета), в том числе при установке старой версии браузера; также есть возможность установить фоновое изображение или анимацию для главной страницы и новых вкладок (как из представленных системой, так и из личной галереи).

Среди недостатков можно выделить тот факт, что не для всех версий браузера есть возможность затемнить фон на всех вкладках.

Темная тема – удобный вариант для тех, кто любит работать при низкой яркости экрана или тусклом освещении. Считается, что она оказывает меньшую нагрузку на глаза и позволяет лучше сосредоточиться на контенте.

Загрузка темного фона

Не всегда настроение совпадает с автоматическим выбором алгоритмов Яндекса. В этом случае фоновую картинку обозревателя можно сменить, подобрав более подходящую.

1. Переключаем Яндекс.Браузер в режим «табло». Нажимаем на троеточие у пункта «Галерея фонов», показанное на скриншоте цифрой «1». В выпадающем меню имеется два варианта замены изображения. Первый предусматривает загрузку картинок с серверов Yandex, а второй с компьютера пользователя.

Меню настройки фонового изображения с вариантами выбора источника

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

Устанавливаем фоновое изображение из галереи Яндекса

1. При загрузке с компьютера процедура напоминает смену фоновой картинки рабочего стола. Используя интерфейс Проводника, находим подходящее по тональности изображение в своей коллекции. Выделяем его в окне мышкой и щелкаем по кнопке «Открыть».

Загружаем фоновое изображения для «табло» браузера с компьютера

1. В приведенном примере изображение, установленное на «табло» обозревателя, делает боковые рамки более контрастными.

Итоговый вид браузера с выбранным на ПК фоновым изображением

Меняем тему на домашней странице Яндекс

Ранее смена тем оформления выполнялась в настройках главной, но в конце 2022 года соответствующий пункт пропал из этого раздела. Однако сама страница с темами, как и возможность их установки, остались доступны. Перейти к ним можно следующим образом:

Примечание: В качестве примера нами используется Яндекс.Браузер, но для выполнения изложенных ниже рекомендаций вы можете прибегнуть к любому другому решению, например, Google Chrome или Mozilla Firefox. Алгоритм необходимых действий будет идентичен.

Выберите то, что хотите установить,

и кликните по кнопке «Сохранить», чтобы внесенные вами изменения были применены.

К сожалению, возможность добавления и последующей установки собственных изображений разработчиками сервиса не реализована, а потому придется довольствоваться доступными шаблонами.

Совет: Так как в содержащий темы оформления раздел нельзя попасть с главной Яндекса и настроек этой страницы, рекомендуем сохранить указанный в предыдущем пункте адрес в закладки. Для этого нажмите по показанной на изображении ниже кнопке и, если потребуется, войдите в свою учетную запись, чтобы активировать функцию синхронизации в браузере.

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

Важно! Выбранное вами фоновое изображение будет отображаться только в том случае, если вы авторизованы в своей учетной записи Яндекс (см. пункт № 1 настоящей статьи). Как только вы из нее выйдите, оформление будет сброшено до стандартного.

Дополнительно

Включение темного фона с помощью расширений

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

1. Открываем управляющее меню, щелкнув по указанной стрелкой области на верхней панели. Переходим в раздел «Дополнения».

Открываем раздел «Дополнения» в основном меню обозревателя

1. Опускаемся на странице до самого конца, прокрутив список предлагаемых и установленных плагинов. Нажимаем на кнопку желтого цвета, содержащую ссылку на интернет-каталог.

Переходим в каталог расширений Яндекс.Браузера

1. Ищем дополнения, изменяющие внешний вид обозревателя с применением темной темы. Поиск лучше выполнять по английским названиям: «dark mode» или «night mode». Обращаем внимание на дату выхода последнего обновления. Посмотреть ее можно в поле, указанном цифрой «1». В каталоге часто попадаются не совсем «свежие» расширения, которые могут некорректно работать с новыми версиями браузера. Определившись с параметрами, нажимаем кнопку «Добавить». Разрешение на загрузку и установку необходимо будет дополнительно подтвердить во всплывающем окне.

Устанавливаем выбранное дополнение в Яндекс.Браузер

1. Выбранное для тестирования расширение «Dark Mode» устанавливает на панели обозревателя кнопку, представляющую собой двухпозиционный переключатель. На следующем скриншоте показано, как преображается страница поисковика Google при активации темной темы. Расширенные параметры дополнения содержат почти четыре десятка готовых стилей, позволяя подстраивать оформление для комфортного восприятия.

Вид поисковой страницы Google после активации темной темы в плагине «Dark Mode»

Гугл Хром для Айфона

А вот с блокировкой рекламы Chrome не может справиться. Или не хочет

Наверное, самый популярный браузер для iPhone в нашей редакции. В нем есть все, что необходимо: синхронизация между устройствами, автозаполнение данных, встроенный голосовой поиск, Гугл Переводчик и режим инкогнито, чтобы не сохранять куки, историю загрузок и просмотров. У него много сходств с десктопной версией — например, Chrome для iPhone потребляет слишком много ресурсов, что быстрее разряжает батарею, а еще он не поддерживает расширения как у Safari. Так что, никакой блокировки рекламы тут нет. Это расстраивает больше всего.

Наш Telegram-чат не спит: общаемся круглые сутки!

С какой версии Android темная тема доступна по умолчанию

На данный момент темное оформление доступно на устройствах с Android Pie. Попытки внедрить ночной режим начались со времен Андроид 7.0, однако это не увенчалось успехом. Современная функция способна автоматически включаться и выключаться в зависимости от времени суток.

Совсем недавно компания Google представила Android Q, в котором также будет присутствовать возможность включить черный фон. Но пока об этом говорить рано, так как обычные телефоны смогут обновиться только к началу 2022 года.