Как сделать темную тему в браузере

Обновлено: 21.11.2024

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

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

В этой статье мы расскажем, как включить темный режим или использовать темную тему в Chrome, Firefox, Edge, Safari и Opera для ПК.

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

Как включить темный режим в Chrome

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

В Windows выберите «Настройки» > «Персонализация» > «Цвета». В разделе «Выберите режим приложения по умолчанию» выберите «Темный».

На Mac выберите «Системные настройки» > «Основные» > «Внешний вид» > «Темный».

Кроме того, вы можете установить темную тему из Интернет-магазина Chrome. Одним из примеров является тема Just Black; нажмите «Добавить в Chrome», чтобы использовать его. Однако это не совсем темный режим, потому что он изменяет только некоторые элементы, такие как строка заголовка и вкладки, а не все элементы, такие как меню (как это происходит при наследовании темы вашей системы).

Чтобы изменить тему позже, нажмите на три вертикальные точки в правом верхнем углу и выберите "Настройки > Внешний вид > Тема".

Как включить темный режим в Firefox

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

В правом верхнем углу Firefox нажмите «Открыть меню приложений» (три горизонтальные линии).
Нажмите "Дополнения и темы".
В меню слева выберите Темы.
В списке тем найдите «Темная» и нажмите «Включить».

Все элементы Firefox, такие как строка заголовка, панели инструментов и меню, мгновенно становятся черными/серыми.

Как включить темный режим в Edge

У Edge есть собственная темная тема, которую вы можете включить в настройках браузера:

В правом верхнем углу Edge нажмите "Настройки и другие" (три горизонтальные точки).
Нажмите "Настройки".
В меню слева нажмите "Внешний вид".
Под общим видом выберите «Темный».

Edge сразу переключается на темную тему, меняя вкладки, панели инструментов, меню и многое другое.

Как включить темный режим в Safari

Как и в Chrome, в Safari нет темного режима, который можно выбрать по умолчанию. Вместо этого он использует тему вашего Mac по умолчанию.

Чтобы применить темную тему к вашему Mac, выберите «Системные настройки» > «Основные» > «Внешний вид» > «Темный».

Как включить темный режим в Opera

Opera предлагает встроенную темную тему, которую можно легко включить:

В правом верхнем углу нажмите кнопку "Простая настройка" (три горизонтальные линии).
Под Внешним видом нажмите Темный.

При этом элементы Opera, такие как вкладки и панели инструментов, затемняются.

Как включить темный режим на всех веб-страницах

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

Хотя некоторые веб-сайты предлагают темную тему, не все. Таким образом, вы можете использовать сторонние надстройки, чтобы перевести каждую веб-страницу в темный режим. Имейте в виду, что из-за этого некоторые веб-сайты могут выглядеть странно, если они не разработаны с учетом темного режима.

Для этого мы рекомендуем два расширения:

Темное чтение (Firefox, Chrome, Edge, Safari)
Темный режим (Firefox, Chrome, Edge, Opera)

Dark Reader особенно удобен тем, что вы можете настраивать яркость и контрастность, а также быстро переключать темный режим для определенных веб-сайтов. Но попробуйте их оба и посмотрите, что вам больше нравится.

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

В адресной строке Chrome введите chrome://flags/
Поиск темного режима.
Используйте раскрывающийся список рядом с параметром Автоматический темный режим для веб-контента и установите для него значение Включено.
Нажмите "Перезапустить", чтобы перезагрузить Chrome и применить изменения.

Применить темный режим на всех ваших устройствах

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

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

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

Компания Google подтвердила, что использование более темного интерфейса вместо яркого белого, как в последнем обновлении Facebook, требует меньше времени автономной работы, особенно если вы используете что-то с OLED-дисплеем, поскольку черные пиксели там полностью отключены.

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

Google не первый, кто запрыгнул на поезд темного режима. Вы можете найти эту функцию в macOS, iOS и Android, и вскоре вы увидите ее в Windows 11. , также. Будь то экономия заряда батареи вашего устройства или снижение нагрузки на глаза, вам следует перейти на темную сторону.

Если вы считаете эти причины убедительными для включения темного режима Chrome, прочитайте ниже, как сделать это в Windows, macOS, Android и iOS.

Расширьте возможности Chrome с помощью VPN.
Помимо того, что ваши данные будут зашифрованы, а онлайн-идентификация останется анонимной для посторонних глаз, загрузка VPN может улучшить работу с Chrome. Помимо множества применений, это программное обеспечение может помочь вам избежать заблокированных веб-сайтов, использовать запрещенные приложения, транслировать телевидение и спорт из-за границы, а также безопасно использовать торренты. У ExpressVPN лучшее расширение для Chrome, и читатели TechRadar получают 3 дополнительных месяца бесплатно в годовом плане и могут сначала попробовать его с 30-дневной гарантией возврата денег.

Переключение Chrome в темный режим для Windows 111

<р>1. Войдите в меню «Настройки», выберите «Персонализация», нажмите «Цвета» и прокрутите вниз до переключателя с пометкой «Выберите режим приложения по умолчанию».

<р>2. Измените это на «Темный», и все приложения с собственным темным режимом, включая Chrome, изменят цвет. Нет необходимости перезапускать браузер.

Переключение Chrome в темный режим для macOS

<р>1. Откройте «Системные настройки», нажмите «Общие», выберите «Внешний вид».

<р>2. Выберите вариант «Темный». Как и в Windows, все приложения с собственным темным режимом изменятся автоматически без вашего участия.

Переключение Chrome в темный режим для Android 12

<р>1. Темный режим все еще является экспериментальной функцией Chrome для Android, поэтому имейте в виду, что некоторые элементы дизайна могут выглядеть немного странно. Чтобы активировать его, введите chrome://flags в адресной строке браузера.

<р>3. Коснитесь раскрывающегося меню под каждым из этих параметров и измените параметр на «Активировано», затем перезапустите Chrome.

<р>4. Теперь откройте меню настроек, нажмите «Темы» и выберите «Темные». Если вы не видите параметр «Темы», снова перезапустите Chrome, и он должен появиться.

Переключение Chrome в темный режим для iPhone и iPad

Когда Apple выпустила iOS 13, она ввела темный режим во всю операционную систему, как для iPhone, так и для iPad.

С тех пор Google Chrome для iOS был обновлен с учетом этого.

Вам нужно только убедиться, что темный режим включен в меню «Настройки» > «Экран» > «Темный режим», и Chrome это отразит.

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

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

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

Как включить темный режим Chrome на Mac

Убедившись, что вы используете macOS Mojave или более позднюю версию, вы можете включить темный режим на Mac через меню «Системные настройки».

<р>1. Откройте Системные настройки, нажав значок Apple в верхнем левом углу экрана или нажав значок на панели инструментов.

<р>2. Нажмите Общие.

<р>3.В меню «Внешний вид» нажмите «Темный», чтобы активировать темный режим.

Выберите «Темный» для продолжительного темного режима или «Авто», чтобы активировать светлый режим днем и темный режим ночью. Инсайдер

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

<р>4. Откройте браузер Chrome, который появится в темном режиме вместе с другими приложениями.

Как включить темный режим Chrome на ПК

Чтобы включить темный режим в версии Chrome для ПК с Windows, вы можете включить темный режим для всей операционной системы Windows или для приложений.

<р>1. Нажмите кнопку «Пуск», затем выберите значок «Настройки».

<р>2. Выберите Персонализация.

<р>3. На панели в левой части экрана щелкните Цвета. Отсюда вы можете выбрать «Темный» в качестве режима Windows по умолчанию или режима приложения по умолчанию, щелкнув соответствующий вариант.

<р>4. Откройте браузер Chrome, который теперь отображается в темном режиме.

Совет. Браузеры Chrome на компьютере также предоставляют множество вариантов цветовой палитры, в том числе вариации темных тем. Выберите меню из трех точек в правом верхнем углу, выберите «Настройки», затем выберите «Внешний вид» в меню слева. Нажмите «Тема», и вы увидите множество вариантов более темных и светлых цветов браузера. Сделайте свой выбор и нажмите «Добавить в Chrome».

Как включить темный режим Chrome на iPhone

Чтобы включить темный режим в приложении Chrome на iPhone, вам необходимо включить темный режим на устройстве.

<р>1. Перейдите в приложение "Настройки".

<р>2. Прокрутите вниз и нажмите «Экран и яркость».

<р>3. В меню «Внешний вид» нажмите «Темный». Затем ваш экран перейдет в темный режим, и приложения, которые предлагают этот режим просмотра, включая, помимо прочего, Chrome, будут отображаться таким образом.

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

Как включить темный режим Chrome на Android

Вы можете настроить темный режим на своем устройстве Android через само приложение Chrome.

<р>1. Откройте приложение Chrome.

<р>2. Коснитесь трех вертикально расположенных точек в правом углу экрана.

<р>3. Выберите Настройки в раскрывающемся меню.

<р>4. Нажмите «Тема» в меню настроек.

<р>5. Выберите «Темный», чтобы изменить цветовую схему просмотра на темный режим.

Примечание. Вы также можете нажать «Системные настройки по умолчанию» в меню выше, чтобы автоматически включать темный режим в Chrome, когда на вашем устройстве установлен темный режим или вы включили режим экономии заряда батареи Android.

Как определить, находитесь ли вы в темном режиме или в режиме инкогнито в Chrome

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

Если вы видите значок режима инкогнито, который выглядит как шляпа и очки детектива, вы находитесь в режиме инкогнито. Если вы видите собственный значок Google, значит, вы находитесь в темном режиме.

Дженнифер — писатель и редактор из Бруклина, штат Нью-Йорк. Она проводит время в поездках, пьет кофе со льдом и слишком много смотрит телевизор. У нее есть подписи в журналах Vanity Fair, Glamour, Decider, Mic и многих других. Вы можете найти ее в Твиттере по адресу @jenniferlstill.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Темный режим в последнее время набирает популярность. Например, Apple добавила темный режим в свои операционные системы iOS и MacOS. Windows и Google сделали то же самое.

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

Оглавление

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

Существует несколько способов сделать это:

Использование класса тела

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

Вот скрипт для кнопки, которая будет переключать этот класс, например:

Вот как мы можем использовать эту идею:

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

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

Теперь давайте переопределим значения этих свойств, на этот раз установив их для другого класса тела:

Стили темной темы будут потомками того же родительского класса (в данном примере это .dark-theme), который мы применили к тегу.

Как мы «переключаем» классы тела, чтобы получить доступ к темным стилям? Мы можем использовать JavaScript! Мы выберем класс кнопки ( .btn-toggle ), добавим прослушиватель нажатия, затем добавим класс темной темы ( .dark-theme ) в список классов элемента body. Это эффективно перекрывает все установленные нами «светлые» цвета благодаря каскаду и специфичности.

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

Использование отдельных таблиц стилей

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

Например, светлая тема по умолчанию, такая как light-theme.css :

Затем мы создаем стили для темной темы и сохраняем их в отдельной таблице стилей, которая называется dark-theme.css.

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

Использование пользовательских свойств

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

Мы по-прежнему можем изменить класс тела и использовать этот класс для переустановки пользовательских свойств:

Во-первых, давайте определим значения цвета света по умолчанию как настраиваемые свойства элемента body:

Теперь мы можем переопределить эти значения в классе body .dark-theme точно так же, как в первом методе:

Вот наши наборы правил для элементов body и link с использованием настраиваемых свойств:

С таким же успехом мы могли бы определить наши пользовательские свойства внутри документа :root . Это вполне законная и даже обычная практика. В этом случае все определения стилей темы по умолчанию будут находиться внутри :root < >, а все свойства темной темы — внутри :root.dark-mode < >.

Использование сценариев на стороне сервера

Если мы уже работаем с серверным языком, например с PHP, то можем использовать его вместо JavaScript. Это отличный подход, если вы предпочитаете работать непосредственно с разметкой.

Мы можем попросить пользователя отправить запрос GET или POST. Затем мы позволяем нашему коду (в данном случае PHP) применять соответствующий класс тела при перезагрузке страницы. Я использую запрос GET (параметры URL) для этой демонстрации.

И да, мы можем поменять местами таблицы стилей так же, как и во втором методе.

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

Какой метод выбрать?

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

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

Темный режим на уровне операционной системы

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

К счастью, в CSS есть медиа-запрос Preferences-Color-Scheme, который можно использовать для определения предпочтений системной цветовой схемы пользователя. Он может иметь три возможных значения: без предпочтений, светлое и темное. Узнайте больше об этом на MDN.

Чтобы использовать его, мы можем поместить стили темной темы в медиа-запрос.

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

Мы можем обратиться к JavaScript, чтобы определить предпочтительную цветовую схему пользователя. Это очень похоже на первый метод, с которым мы работали, только мы используем matchedMedia() для определения предпочтения пользователя.

У использования JavaScript есть обратная сторона: светлая тема, скорее всего, быстро вспыхнет, так как JavaScript выполняется после CSS. Это может быть неправильно истолковано как ошибка.

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

Переопределение настроек ОС

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

Давайте воспользуемся подходом с пользовательскими свойствами CSS, чтобы продемонстрировать, как это сделать. Идея состоит в том, чтобы определить пользовательские свойства для обеих тем, как мы это делали раньше, обернуть темные стили в медиа-запрос Preferences-Color-Scheme, а затем определить класс .light-theme внутри, который мы можем использовать для переопределения свойств темного режима. , если пользователь захочет переключаться между двумя режимами.

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

Функция медиа-запроса предпочитает цветовую схему поддерживается основными браузерами, включая Chrome 76+, Firefox 67+, Chrome Android 76+, Safari 12.5+ (13+ на iOS) и Samsung Internet Browser. Он не поддерживает IE.

Это многообещающий объем поддержки! Могу ли я использовать, по оценкам, 80,85 % охвата пользователей.

Операционные системы, которые в настоящее время поддерживают темный режим, включают MacOS (Mojave или более поздние версии), iOS (13.0+), Windows (10+) и Android (10+).

Сохранение предпочтений пользователя

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

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

Давайте рассмотрим оба подхода.

Использование локального хранилища

У нас есть скрипт, который сохраняет выбранную тему в localStorage при переключении. Другими словами, когда страница перезагружается, скрипт получает выбор из localStorage и применяет его. JavaScript часто выполняется после CSS, поэтому этот подход может привести к «неправильной теме» (FOIT).

Использование файлов cookie с PHP

Чтобы избежать FLIC, мы можем использовать скрипт на стороне сервера, такой как PHP. Вместо того, чтобы сохранять настройки темы пользователя в localStorage, мы создадим файл cookie из JavaScript и сохраним его там. Но опять же, это возможно только в том случае, если вы уже работаете с серверным языком.

Вот как это сделать с помощью метода отдельных таблиц стилей:

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

Для этого есть разные способы. В этом примере я извлекаю настройки темы пользователя из базы данных и сохраняю их в переменной сеанса во время входа в систему.

Я использую PHP-оператор объединения null ( ?? ), чтобы решить, где выбрать тему: из сеанса или из файла cookie. Если пользователь вошел в систему, значение переменной сеанса берется вместо значения файла cookie. И если пользователь не вошел в систему или вышел из нее, берется значение файла cookie.

Обработка стилей агента пользователя

Чтобы информировать таблицу стилей UA браузера о настройках системной цветовой схемы и указать, какие цветовые схемы поддерживаются на странице, мы можем использовать метатег color-scheme.

Например, предположим, что страница должна поддерживать как «темную», так и «светлую» темы. Мы можем поместить их оба как значения в метатег, разделенные пробелами. Если мы хотим поддерживать только «светлую» тему, нам нужно использовать только «светлую» в качестве значения. Это обсуждается в выпуске CSSWG GitHub, где это было изначально предложено.

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

Хотя темы по большей части настраиваются вручную (что переопределяет стили UA), информирование браузера о поддерживаемых темах помогает избежать даже малейшего шанса потенциальной ситуации FOIT. Это верно для тех случаев, когда HTML отобразился, но CSS все еще ожидает загрузки.

Мы также можем установить это в CSS:

На момент написания этой статьи свойство color-scheme не поддерживалось широкой поддержкой браузеров, хотя Safari и Chrome поддерживают его.

Читайте также: