Как изменить дизайн Firefox, чтобы он стал похожим на новый Chrome

Как изменить дизайн Firefox, чтобы он стал похожим на новый Chrome

В одной из наших статей мы рассматривали способ восстановления старого дизайна Google Chrome, обновление которого до 69 версии привнесло в графическую оболочку популярного браузера элементы нового стиля Material Design 2, также известного как Material Refresh.

Обновляем дизайн Mozilla

Нельзя, однако, сказать, что большинству пользователей обновленный дизайн пришелся не по вкусу. Скорее наоборот, многие из них остались довольны. Более того, среди пользователей других браузеров, в частности, Mozilla Firefox, нашлось немало таких, которые хотели бы примерить Material Refresh на своего «огнелиса» (тем более новинка отчасти перекликается с прежним стилем Australis, что был в Firefox до обновления Quantum).

Так вот, это вполне реально. Если вы хотите сделать свой Firefox похожим на обновленный Google Chrome, следуйте этой инструкции.

Для дела вам понадобится специальный набор стилей и SVG-файлов под названием MaterialFox. Скачать его можно совершенно бесплатно с этой страницы проекта GitHub.

Распаковав архив, вы найдете в нём папку chrome с набором разных файлов. Она как раз вам и нужна. За тем перейдите в Проводнике Windows по адресу:

%appdata%/Mozilla/Firefox/Profiles

путь до профиля Firefox
Он приведёт вас в папку профиля Firefox.

У нас данная папка называется za4airzp.default. У вас название, а точнее, его первая часть, будет отличаться. Теперь скопируйте в эту папку полученный из архива каталог chrome.
папка chrome
В том случае, если вы раньше настраивали интерфейс Firefox с помощью собственных стилей и в папке профиля у вас имеется файл userChrome.css, вам нужно будет открыть файл с таким же названием в папке chrome, скопировать имеющийся там код и вставить его в конец уже существующего файла userChrome.css.
дизайн Material Refresh
Итак, папка chrome скопирована в каталог профиля и можно смотреть, что получилось. Запустив Firefox, вы увидите, что дизайн изменился, но вкладки выглядят черными, да и значки на панели инструментов смотрятся не очень привлекательно.
about:config в Firefox
Устраним эту проблему. Перейдите в браузере по внутреннему адресу about:config на страницу скрытых настроек, нажмите кнопку принятия риска и найдите в списке с помощью поисковой строки параметр svg.context-properties.content.enabled.
параметр svg.context-properties.content.enabled
По умолчанию он имеет значение false, вы же замените его на true, для чего кликните по нему два раза мышкой.

Перезапустив Mozilla Firefox, вы увидите результат применения темы во всей красе.
дизайн нового Google Chrome
И вот еще один момент. Если вы работаете в Windows 10, то для полноты картины в разделе персонализации можете установить птичку в чекбоксе «В заголовках окон» для опции «Отображать цвет элементов на следующих поверхностях».
Windows 10
На страничке загрузки темы вы также найдете полезные советы от разработчика по модификации мелких деталей интерфейса Firefox с тем, чтобы сделать его еще более похожим на новый интерфейс Chrome. Если хотите, можете ими воспользоваться.

5 комментариев к “Как изменить дизайн Firefox, чтобы он стал похожим на новый Chrome”

  1. Здравствуйте!
    Спасибо за статью! Получилось изменить вкладки своей "лисы", а то новые как-то непривычные.
    Но с применением стилей под chrome не всё получилось гладко, адресная строка и строка поиска почему-то стали чёрными.
    [IMG]http://images.vfl.ru/ii/1558071100/0f4cf0bb/26562732_m.jpg[/IMG]
    Да и функциональные кнопки получились обрезанными сверху.
    [IMG]http://images.vfl.ru/ii/1558071100/9f8bfc08/26562731_m.jpg[/IMG]
    Подскажите, пожалуйста, в каких файлах css поковыряться и какие параметры нужно изменить, чтобы сделать адресную строку белой и кнопки нормальными ?
    Заранее благодарен за ответ.

  2. Aleks, спасибо большое! Просмотрю, там много интересных ссылок есть...
    Не могу только понять как именуется адресная строка в синтаксисе css, нигде нет такой информации

  3. Да, это именно то, нужно посмотреть по форуму или воспользоваться DOM Inspector'ом, как там советуют.
    Aleks, благодарю!

Обсудить статью