Темная тема для Яндекс Метрики

У Яндекс Метрики сейчас нет встроенной темной темы интерфейса, переключателя в настройках не предусмотрено ни в старом, ни в новом дизайне. Но выход есть - использовать специальный скрипт, который позволяет переключаться между темной и светлой темой, доступной в Метрике по умолчанию.

После того, как я в своем блоге опубликовал статью про Tampermonkey и скрипт Voice-Over Translation для перевода видео, мне стало интересно, а как еще можно применить данное расширение в задачах и сервисах интернет-маркетолога. И я как раз сразу же подумал над реализаций темной темы для Яндекс Метрики.

Но меня ждало разочарование - я был не первый, кто подумал точно так же. Публично мне удалось отыскать один репозиторий на GitHub (автор - Daniil Lobanov), который выполняет ту же самую функцию - добавляет темную тему в интерфейс Яндекс Метрики.

Получилось очень классно! Не правда ли?

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

Перед внедрением темной темы в Яндекс Метрику рекомендую посмотреть демо. Записал короткое видео с результатом, чтобы вы смогли оценить решение:

 

Как сделать темную тему Яндекс Метрики в своем браузере? Для этого воспользуемся расширением Tampermonkey.

Tampermonkey

Tampermonkey - это популярное расширение для браузеров (доступно для Chrome, Microsoft Edge, Safari, Opera Next и Firefox), которое позволяет запускать и управлять пользовательскими скриптами на JavaScript. Например, вы можете добавить новую кнопку на веб-страницу, которая позволит вам быстро поделиться ссылкой в социальных сетях или автоматически заполнить форму с вашей личной информацией. Это особенно полезно в эпоху оцифровки, когда веб-страницы часто используются в качестве пользовательских интерфейсов для доступа к широкому спектру услуг и приложений.

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

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

Установка расширения

Я буду демонстрировать установку данного расширения для браузера Google Chrome, поскольку именно его я использую в повседневной работе. Вы можете выполнить те же самые шаги для Microsoft Edge, Safari, Opera Next и Firefox - Tampermonkey доступен для всех этих браузеров, а сами шаги установки +/- похоже для каждого из них.

Примечание: приложение Tampermonkey для Safari (Safari 12+ | MacOS 10.13+) является платным и стоит 1.99$. Это единоразовая плата.

Итак, откройте свой браузер. В правом верхнем углу нажмите на иконку с тремя точками и перейдите в раздел Расширения - Перейти в интернет-магазин Chrome:

Перейти в интернет-магазин Chrome можно также по прямой ссылке, либо воспользовавшись обычным поиском в Google, а также ссылкой на официальном сайте расширения:

В открывшемся окне в строке поиска введите название расширения Tampermonkey и выберите его из списка результатов:

Нажмите Установить:

После установки расширения в правом верхнем углу браузера нажмите на иконку Расширения и закрепите его, чтобы иконка Tampermonkey всегда отображалась на панели:

Активация режима разработчика

Согласно официальной документации, для пользователей расширения Tampermonkey (версия 5.3+) в браузере на базе Chrome необходимо включить либо переключатель Разрешить пользовательские скрипты (доступен в Chrome 138+ через настройки расширения), либо Режим разработчика.

Для этого в правом верхнем углу нажмите на иконку с тремя точками и перейдите в раздел Расширения - Управление расширениями:

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

Активация пользовательских скриптов

Не закрывая окна, найдите в списке установленное расширение Tampermonkey. Нажмите на кнопку Сведения:

Включите пользовательские скрипты, сдвинув ползунок в активное положение:

На этом установка и настройка расширения завершена.

Dark Theme Mode for Yandex Metrika

Tampermonkey выполняет роль менеджера пользовательских скриптов, необходимого для запуска кода в браузере. Но нам нужен сам скрипт, который бы обеспечивал переключение со светлой темы Яндекс Метрики на темную. И таким скриптом является Dark Theme Mode for Yandex Metrika, доработанная версия решения от Daniil Lobanov.

Его возможности были следующими:

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

Я сделал небольшие доработки и учел новые возможности Яндекс Метрики и стили отчетов, которые были добавлены за последние несколько месяцев.

Установка скрипта

Без Tampermonkey скрипт Dark Theme Mode for Yandex Metrika не запустится, поскольку обычные расширения браузера не поддерживают пользовательские скрипты.

Чтобы установить темную тему и воспользоваться моим скриптом, в правом верхнем углу своего браузера нажмите на иконку Tampermonkey и выберите пункт Создать новый скрипт:

Вам откроется отдельная страница с редактором кода:

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

[download url="https://osipenkov.ru/files/tampermonkey-dark-theme-yandex-metrika.txt" target="_blank" title="Dark Theme Mode for Yandex Metrika"]

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

Должно быть так:

Сохраните скрипт, нажав в редакторе меню Файл - Сохранить:

После этого вас перенаправит на страницу установленных скриптов. В общем списке должен отображаться Dark Theme Mode for Yandex Metrika. Обязательно проверьте, чтобы он был включен:

Активация темной темы

Теперь вы можете перейти в интерфейс Яндекс Метрики и попробовать включить темную тему. Сделать это очень просто - в левом нижнем углу у вас должен появиться переключатель.

Если его нет, попробуйте перезапустить браузер, а также убедитесь, что в правом верхнем углу рядом с иконкой Tampermonkey отображается цифра в красном квадратике. Это значит, что ваш скрипт включен и активен на странице:

Измените его положение на ВКЛ. Теперь ваша Яндекс Метрика будет в темном стиле!

Насколько известно:

• отчеты (например, Цели, Конверсии) рендерятся React/Vue-компонентами после загрузки данных, CSS применяется только к начальному DOM, а новые элементы остаются белыми без переприменения стилей;
• Вебвизор использует изолированные контейнеры (shadow roots, canvas, iframes), где !important CSS не проникает без специальных хаков;
• графики над таблицами отрисовываются с использованием Highcharts, а эта библиотека в отчетах имеет встроенные SVG-стили с высокой специфичностью, код частично их перехватывает, но не все подгруппы (тултипы, оси и т.д.);
• и так далее и тому подобное.

Поэтому идеально создать темную тему не получится (разработчики Яндекса сами должны это сделать). Все равно где-то ​будут присутствовать элементы светлой (родной) темы. Например, вот так у вас может выглядеть отчет Цели:

Или данные Вебвизора:

Работать с таким вариантом (где одни элементы - темные, а другие - светлые) невозможно! Поэтому внутри отчетов, где не удалось полностью изменить стили и придать Метрике темную палитру, есть дополнительный переключатель внутри окна:

Таким образом, вы можете оставить цветовую палитру всей Яндекс Метрики в темном цвете, а те отчеты, которые "встроены" - вернуть в светлый стиль, переключив другой ползунок в положение ВЫКЛ.:

Чтобы выключить темную тему полностью, просто переместите левый нижний ползунок в положение ВЫКЛ. Тогда все отчеты вернуться в первоначальный вариант:

Я вполне допускаю, что при использовании темной темы в Яндекс Метрике некоторые элементы, подписи или названия будут отображаться некорректно. К сожалению, учесть все стили всех отчетов очень сложно, поскольку отчеты внутри Метрики динамически создаются и подгружаются. Их приходится вручную находить и добавлять в скрипт с индивидуальными цветами. Быть может, когда-нибудь, разработчики Яндекса добавят темное цветовое оформление в свой продукт, как это сделали в
Yandex DataLens.

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

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