Сделать новые вкладки Firefox тёмными: простой userChrome/userContent CSS фикс

Быстрые ссылки

• Тёмный режим отличен, но белая «вспышка» раздражает

• Забудьте об расширениях — измените свою Chrome-папку

Если вы любите тёмную тему для удобства ночной работы и используете Mozilla Firefox, возможно, вы уже встречали одну неприятную проблему: новые вкладки и загрузки страниц ослепляют белым светом. Ниже — подробное руководство, как сделать новые вкладки дружественными к тёмной теме и дополнительные рекомендации по тестированию и отладке.

Тёмный режим отличен, но белая «вспышка» раздражает

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

Это не катастрофа, но при работе в ночной тишине или при чувствительности к яркому свету такая вспышка неприятна и отвлекает.

Важно: решение ниже локальное — оно меняет только ваш профиль Firefox и не требует установки сторонних расширений.

Забудьте об расширениях — измените свою Chrome-папку

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

userChrome.css

и

userContent.css

userChrome.css — набор пользовательских стилей для интерфейса браузера (browser chrome). userContent.css применяется к содержимому страниц (в том числе вкладке about:blank).

Включите поддержку legacy-стилей

1. Запустите Firefox и в адресной строке введите

about:config

2. Подтвердите предупреждение, если оно появится.

3. В поле поиска найдите

toolkit.legacyUserProfileCustomizations.stylesheets

4. По умолчанию значение false — дважды кликните по записи, чтобы установить true.

Найдите каталог профиля

1. В адресной строке введите

about:profiles

2. Откроется список профилей Firefox и кнопка «Открыть папку» рядом с «Корневой папкой» (Root Directory). Выберите профиль, в который хотите внести изменение, и нажмите «Открыть папку».

Для Windows путь будет похож на

C:\Users\[ВашеИмя]\AppData\Roaming\Mozilla\Firefox\Profiles\[ИмяПрофиля]

где ИмяПрофиля — строка вроде

fxxd088p.default-release

Создайте папку chrome и файлы стилей

Внутри каталога профиля создайте подпапку с именем

chrome

В ней нужно создать два текстовых файла и сохранить их как userChrome.css и userContent.css.

userChrome.css (устранение белой вспышки между загрузками):

tabbrowser tabpanels { background-color: rgb(19,19,20) !important; }

browser { background-color: #131314 !important; }

Сохраните содержимое как userChrome.css. Эта простая правило задаёт фон элементов интерфейса вкладок и окна браузера тёмным цветом и снижает эффект яркой белой «перебивки» между сменой страниц.

userContent.css (делает пустые вкладки тёмными):

@-moz-document url-prefix(about:blank) {

html > body:empty {

background-color: rgb(19,19,20) !important;

}

}

@-moz-document url(about:blank) {

html > body:empty {

background-color: rgb(19,19,20) !important;

}

}

Сохраните как userContent.css. Это правило применяется к страницам about:blank и делает пустую вкладку тёмно-серой вместо ярко-белой.

Примечание: вы можете заменить цвета на любые значения RGB или hex. Например, почти чёрный: 0,0,0 и #0A0A0A. Для экзотики — неоновый цвет: 117,225,51 или #75FF33.

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

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

Почему этот подход лучше расширений

• Локальный контроль: изменения живут только в вашем профиле и не передают данные третьим сторонам.

• Безопасность: нет новых разрешений или фоновых процессов.

• Простота отката: достаточно удалить файлы или вернуть настройку в about:config.

Когда это может не сработать

• Если профиль использует политику корпоративного управления, файлы могут игнорироваться.

• Если вы используете внешний менеджер профилей или синхронизацию, убедитесь, что правите правильный профиль.

• Некоторые страницы с агрессивной политикой CSP или inline-стилями могут временно показывать свой белый фон до применения своих тёмных стилей. Наш подход влияет на фон браузера и about:blank, а не на такие страницы до полной загрузки.

Важно: если эффект не появляется после перезапуска, проверьте корректность пути профиля, регистр имён файлов и отсутствие расширений, которые активно перезаписывают CSS (маловероятно).

Альтернативные подходы

1. Установить расширение, которое инжектит CSS для всех страниц. Плюсы: гибкость, быстрый переключатель. Минусы: потенциальные риски приватности и баги с производительностью.

2. Включить системный тёмный режим и оставить авто-переключение тем для сайтов. В некоторых случаях это уменьшит контраст, но не решит about:blank.

3. Использовать пользовательский стиль в менеджере стилей вроде Stylus. Требует расширения.

4. На уровне ОС: уменьшить яркость экрана и включить ночной режим/фильтр синего света.

Пошаговая инструкция (SOP)

1. Откройте Firefox -> about:config.
2. Установите toolkit.legacyUserProfileCustomizations.stylesheets = true.
3. Откройте about:profiles и нажмите «Открыть папку» для нужного профиля.
4. Внутри папки профиля создайте папку chrome, если её нет.
5. Создайте userChrome.css с кодом для фона интерфейса.
6. Создайте userContent.css с кодом для about:blank.
7. Перезапустите Firefox полностью (включая фоновые процессы).
8. Проверьте about:blank и откройте несколько ссылок в новых вкладках.
9. Если не работает — проверьте путь и флаг в about:config.

Критерии приёмки

• При открытии about:blank фон соответствует заданному цвету.
• Между сменой страниц не видно ярко-белой вспышки; фон тёмный и плавный.
• Откат выполняется удалением файлов или установкой флага в false.

Чек-листы по ролям

Для домашнего пользователя

• Включил флаг toolkit.legacyUserProfileCustomizations.stylesheets
• Создал chrome/userChrome.css и chrome/userContent.css
• Перезапустил браузер

Для администратора IT

• Проверил, не применяются ли групповые политики к профилям
• Документировал изменение для пользователей
• Поставил инструкцию отката в базу знаний

Тесты приёмки

• Тест 1: Открыть новую пустую вкладку -> ожидание: фон тёмный.
• Тест 2: Открыть несколько ссылок в фоне и переключаться между вкладками -> ожидание: нет ярких белых вспышек между загрузками.
• Тест 3: Переключить флаг toolkit в false и перезапустить -> ожидание: поведение вернулось к дефолтному.

Отладка и частые проблемы

• Неправильная кодировка или BOM в файлах CSS может помешать их чтению. Сохраняйте файлы в UTF-8 без BOM.

• Убедитесь, что расширение файлов действительно .css, а не .css.txt (частая ошибка в Windows).

• Если вы используете более одного профиля — правьте тот профиль, который реально запускаете.

• Для быстрой проверки откройте консоль браузера (Ctrl+Shift+K) и смотрите на ошибки загрузки файлов профиля (редко появляется сообщение, но может подсказать о проблеме).

Ментальные модели и рекомендации

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

• Разделяйте интерфейс и контент: userChrome.css трогает интерфейс браузера, userContent.css — содержимое страниц и about:blank.

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

Краткий словарь

• userChrome.css — пользовательские стили интерфейса Firefox.
• userContent.css — пользовательские стили для содержимого страниц (включая about:blank).
• about:config — встроенная страница настроек Firefox.
• about:profiles — управление профилями Firefox.

Риски и способы их снижения

Риски:

• Корпоративные политики могут блокировать изменения.

• Неправильные правила CSS могут нарушить отображение интерфейса.

Митигаторы:

• Храните резервную копию изменённых файлов.

• Тестируйте изменения на непроизводственном профиле перед массовым развёртыванием.

Советы по кастомизации цвета

• Используйте онлайн RGB/hex-палитру, чтобы подобрать комфортный для глаз оттенок.

• Предпочтительнее не использовать чистый чёрный (#000000) для более мягкого восприятия; тёмно-серые оттенки (например #131314) дают меньше контраста и легче для глаз.

Примерный план развертывания для группы пользователей

1. Создать инструкцию с шагами SOP и предложениями по цветам.
2. Подготовить ZIP с примерами файлов и текстовой инструкцией.
3. Тестировать на 2–3 профилях разных ОС.
4. Распространить как рекомендованную настройку (не как обязательную) с инструкцией отката.

Краткое резюме

Простое добавление userChrome.css и userContent.css в папку chrome вашего профиля Firefox и включение toolkit.legacyUserProfileCustomizations.stylesheets решает проблему белых вспышек в тёмном режиме. Это локальное, обратимое и безопасное решение без необходимости устанавливать расширения.

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

Завершение

Теперь вы можете наслаждаться тёмным интерфейсом Firefox без неожиданных ослепляющих вспышек при создании новых вкладок и загрузке страниц. Если потребуется — измените цвет на персональный и сохраните копию файлов для быстрого восстановления.