Как сделать темную тему в фикбуке

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

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

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

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

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

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

Режим инверсии цветов

Если в вашей версии Android нет возможности управлять темами интерфейса, то вам можно воспользоваться еще одним универсальным способом — режимом инверсии цветов. Эта функция находится в меню «Специальные возможности» телефона и позволяет преобразовать цвета интерфейса устройства во всех приложениях и медиафайлах на противоположные. У данного режима есть один существенный нюанс — после его включения все цвета на фотографиях и в видеофайлах будут выглядеть как на негативе фотопленки.

Для его активации перейдите в Настройки → Специальные возможности → Средства улучшения видимости → Инверсия цвета.

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

Как включить темную тему через магазин тем

Перевести интерфейс операционной системы Android в темный режим можно и через пункт «Темы» в настройках вашего телефона.

Покажем как это сделать на примере магазина тем «Galaxy Themes» от Samsung.

Перейдите в Настройки → Темы.

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

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

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

Включение темной темы через стороннее приложение

Чтобы применить темную тему к интерфейсу системы и приложений, можно также воспользоваться сторонними приложениями из Play Маркет. Откройте приложение Play Маркет на вашем телефоне и наберите в поиске словосочетание «Темная тема».

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

Способ активировать темную тему в Google Chrome

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

В браузере Google Chrome есть два способа активировать темную тему: В настройках браузера и через меню Flags.

Способ № 1 Включение через настройки браузера

Откройте браузер Google Chrome, нажмите на меню «Опции» (три точки в верхнем правом углу экрана браузера) и перейдите в настройки, а затем выберите пункт «Тема».

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

Способ № 2 Включение через скрытое Меню Flags

Если после включения темной темы через настройки, браузер по-прежнему открывает некоторые страницы в светлых цветах, можно принудительно включить темную тему через скрытое меню «Флаги». Для этого введите в адресной строке гугл хром значение: chrome://flags.

Затем в открывшемся меню «Experiments» начните вводить слово «Dark», чтобы найти пункт «Force Dark Mode for Web Contents» (или сразу введите в адресной строке значение chrome://flags/#enable-Force-Dark-Mode-for-Web-Contents). После этого смените в его выпадающем меню пункт «Default» на «Enable» и нажмите на кнопку «Relaunch» в нижней левой части экрана, чтобы изменения вступили в силу.

Настройка темной темы в приложениях

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

Telegram

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

Для того, чтобы включить темную тему в приложении «ВКонтакте», перейдите в свой профиль → Настройки → Внешний вид → Темы.

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

Instagram

По аналогии с приложением VK, перейдите в свой профиль → Настройки → Тема → Темная.

Заключение

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

Источник

Как сделать тёмную тему для сайта

Рассказываем, как добавить на сайт тёмную тему и выбрать для неё цвета, комфортные для глаз.

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

Рассказываем, как выбирать цвета, которые не будут сильно контрастировать, как сменить тему и сделать так, чтобы она не сбрасывалась при обновлении страницы.

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

Цвета, от которых не будет больно

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

Выбранные цвета не должны сильно контрастировать друг с другом. Яркий пример — чёрный текст на белом фоне. Между этими цветами целая пропасть, поэтому после долгого чтения у пользователя начнут болеть глаза.

Использовать настолько контрастные цвета рекомендуется только тогда, когда вы добавляете отдельную тему для людей с плохим зрением. В остальных случаях лучше сделать фон сероватым, например, #f4f4f4, а шрифт — угольным (#373737) или почти чёрным (#111111).

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

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

Определившись с палитрой, можно начинать работать над сайтом.

Создание сайта

Для начала создадим страницу, для которой сделаем несколько тем:

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

Также у второго тега есть идентификатор, который понадобится для работы скрипта — в нём будет меняться путь к файлу. Когда путь изменится, браузер автоматически загрузит и применит стили из другого файла.

Источник

Тёмная тема: приёмы, которые помогут сделать качественный интерфейс

Рассказываем про кейсы Google, Apple, Microsoft и «ВКонтакте» — главное, что нужно знать про разработку тёмной темы.

Тёмная тема стала популярной в 2018 году после её релиза на macOS Mojave. Её полюбили за удобство для глаз и возможность по-новому посмотреть на привычные интерфейсы.

Создание тёмной темы — сложная дизайнерская задача: под тёмный фон нужно подобрать новые цвета, сохранить общую узнаваемость интерфейса и читаемость текста. Рассмотрим, какие принципы и приёмы помогут вам сделать тёмную тему для собственного интерфейса на примере Google, Apple, Microsoft и «ВКонтакте».

Зачем нужна тёмная тема

Экономия батарей аккумуляторов с OLED-дисплеями

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

Наглядный эксперимент провело издание PhoneBuff. Оказалось, что в среднем тёмная тема экономит 30% заряда:

Комфорт для глаз

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

Фокусировка на задачах

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

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

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Опыт крупных компаний

Тёмная тема появилась во всех сервисах Google, Apple и Microsoft. Поэтому изобретать велосипед остальным дизайнерам уже не нужно — все принципы и приёмы давно проверены крупными корпорациями.

Фон и тени

Google применяет систему Material Design. В светлой теме плашки отделяются друг от друга по принципу «наслаивания»: каждый элемент интерфейса — это отдельный слой, который отбрасывает тень на предыдущий:

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

Теми же соображениями руководствовались дизайнеры мобильной версии Office 365 и «ВКонтакте»:

Apple хитро поступила с тенями в macOS. Их сделали насыщеннее и дополнительно усилили контраст с помощью чёрной обводки и внутренних бликов окна:

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

Цвет элементов интерфейса

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

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

Дизайнеры Google сформулировали правило для подбора цветов: чем темнее фон, тем светлее должны быть цвета элементов интерфейса. Каждый цвет разбили на яркостную градацию от 900 до 50 и подобрали наиболее контрастные и приятные глазу оттенки:

Цветовое правило работает не только с элементами интерфейса, но и с векторными иллюстрациями:

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

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

Результат этой работы хорошо виден на боковой панели Finder:

Также важен контраст текста и фона. Приложением или сайтом с тёмной темой может пользоваться кто угодно, а значит, нужно подобрать удобные для всех цвета. Google, Apple и другие компании ориентируются на стандарт 1.4.6 WCAG: «Визуальное отображение текста и текст на изображениях должны иметь коэффициент контрастности не менее 7:1».

Совет. Чтобы проверить контраст своих цветов, зайдите на сайт Web Aim, введите код цвета текста в графу Foreground Color, а цвета фона — в Background Color. За образец контрастности можно брать значения Google и Apple — 15,8:1.

Иконки

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

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

Так же поступили и дизайнеры мобильной версии Office 365 — перерисовали иконки с использованием заливки:

При таком подходе иконки не теряют форму, остаются читаемыми и контрастными.

В Photoshop и Figma уровень прозрачности регулируется свойством Opacity — непрозрачность.

О чём нужно помнить при создании тёмной темы

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

Источник

Как сделать темную тему с помощью CSS

На днях я баловался с темной версией в новой версии MacOS Mojave. Мои глаза не на 100% рады, но это особенно полезно, когда залипаешь в экран ночью при тусклом освещении.

Сегодня, темная тема в тренде. Большинство reader-приложений уже снабжены им (Medium App, Twitter …). Темная тема — это не просто инверсия всех цветов, это целое направление в современном дизайне.

В macOS Mojave вы можете сделать свой интерфейс темным. Safari и Firefox уже поддерживают это.

Ещё не везде стемнело (пока)

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

Автор открывает пост на nuancesprog.ru в ночном режиме, в тёмной комнате.

Разберёмся с пользовательскими настройками ночного режима.

Было бы приятно, если бы, документы и сайты соответствовали текущей теме, не так ли?

Автоматическое преобразование цвета?

OMG! В HTML-почте все цвета инвертированы. Apple Mail, macOS Mojave

«Умное-инвертирование» цвета может стать отличным решением, а может и нет. Что ещё?

Медиа запросы в помощь.

Я не один. В настоящее время (Август 2018) ведутся дискуссии по поводу ночной темы в «CSS Working Group Editor Drafts». Идея в том, чтобы использовать для этого медиа-запросы. Кое-что уже реализовано в Safari (обсуждение), и ещё здесь.

Так что, в теории, можно сделать так:

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

Инверсия, это ещё не темная тема.

А вы знали, что, уже есть фича в медиа-запросах для «inverted-colors», в Media Queries Level 4. Это, и темная тема― не одно и тоже. Что-то вроде темной темы существовало и ранее. Например, в Windows уже есть режим High Contrast. Есть и другие примеры.

И всё же, было бы действительно круто, если авторы сайтов смогут сами решать, что делать, когда пользователь включил темную тему в браузере. Так что, у дизайнера будет полный контроль, над внешним видом сайта с «выключенным светом». Думаете, тут много роботы? Нет, это просто. Читайте дальше.

Инкогнито — это не темная тема

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

Используем CSS переменные для создания темной темы

Благодаря «CSS custom properties» (также известные как «CSS Vars») теперь, мы можем проще, чем когда-либо, создавать темы, используя CSS. Самый простой способ инвертировать тему:

Немного рекламы: мой новый (крутой) CSS фреймворк ― Teutonic CSS, уже умеет делать подобную инверсию:

Вставьте в код “.inverted”, чтобы инвертировать цвета. Посмотреть в действии.

Веб-сайты меняют браузер chrome.

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

Заключение

В стандартах хорошо то, что у вас всегда есть выбор.

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

Источник

Как за 3 простых шага включить темную тему в ВК на телефоне и ПК

Хотите темную тему ВК на компьютере и на смартфоне и не знаете как включить. Мы подготовили для Вас пошаговую фото-инструкцию как подключить темную тему на телефоне и подобрали самые лучшие расширения для браузера.

Как сделать темную тему в «ВК» на ПК

Если мобильные клиенты социальной сети, доступные на iOS и Android, разрешают свободно настраивать оформление и переключаться между подготовленными темами, то с браузерной версией «Вконтакте» ситуация иная – официально сменить дизайн нельзя, а потому предстоит обращаться за помощью к плагинам и расширениям.

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

Темная тема «ВК» в Google Chrome

Темная тема «ВК» в браузере от Google активируется всего за пару нажатий: достаточно открыть интернет-магазин Chrome, кликнув по ссылке, а после нажать на кнопку «Установить» (или «Удалить из Chrome», если необходимо сбросить добавленные графические параметры).

Браузер сразу предложит проверить содержимое плагина и согласиться по списком соглашений (Dark Theme For VK запрашивает доступ к истории и внесению корректировок в интерфейс). Иконка плагина появится на панели быстрого доступа сверху справа.

Каждое нажатие меняет оформление социальной сети со светлого на темное.

Темная тема в «ВК» в «Яндекс.Браузер»

Веб-обозреватель от «Яндекс» основан на движке Chrome и поддерживает весь список тех же плагинов и расширений, включая Dark Theme For VK. Загрузка контента происходит из уже знакомого интернет-магазина от Google.

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

Темная тема ВК для Mozilla Firefox

Браузер Mozilla Firefox разрешает свободно менять интерфейс VK с помощью уже знакомого плагина Dark Theme For VK. Как и в случае с Chrome разбираться в деталях не придется – достаточно заглянуть в интернет-магазин Firefox Browser Add-ons и воспользоваться поиском.

После в правой части интерфейса сразу появится кнопка «Добавить в Firefox» и предложение выдать соответствующие права на доступ к вкладкам и данным на сайте «ВКонтакте».

Последний шаг – найти иконку справа сверху и нажать для смены оформления социальной сети в Firefox и активации черной темы ВК.

Темный фон «ВК» для Opera

Темная тема «Вконтакте» для браузера Opera добавляется по чуть более запутанному пути – предстоит даже воспользоваться специальным плагином Chrome Extensions, необходимым для загрузки расширений, представленных в интернет-магазине Chrome (включая ночную тему).

После предварительной подготовки предстоит вновь перейти по ссылке и добавить расширение для Chrome Extension. Opera сразу предупредит о возможной несовместимости программного обеспечения, но, если согласиться с возможными рисками, то иконка Dark Theme for VK GX появится справа от поисковой строки.

И, как и в Google Chrome разрешит сделать ВК черным после нажатия на иконку. Убрать темную тему расширение Dark Mode Theme в Опера разрешает по тому же нажатию на комп.

VK Helper (VK Expert)

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

Среди дополнительных нововведений – темная тема, активируемая через параметры. Фон, выпадающие меню и дополнительные разделы окрасятся в черный цвет, а шрифт станет белым. Доступен VK Helper в Chrome, «Яндекс.Браузер», Firefox и Opera.

Часть функций открыта сразу, но за дополнительные преимущества предстоит платить.

Dark Reader

Dark Reader активирует в браузере темную тему, предназначенную для просмотра веб-страниц в темное время суток и при недостаточной освещенности вокруг.

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

Дополнительно в Dark Reader предусмотрены ползунки, меняющие интенсивность применяемых визуальных эффектов – меняется и яркость, и насыщенность, и контраст.

Dark Theme

Плагин Dark Theme для VK добавляет в браузеры Chrome, Firefox и «Яндекс.Браузер» специальный переключатель оформления для социальной сети «ВКонтакте» на панель быстрого доступа.

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

Stylish

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

Сверху отобразится поисковая строка (уже туда достаточно вписать VK Dark), а слева – список рубрик и категорий. Оттуда выбирается и «ВКонтакте. После выбора достаточно нажать на кнопку «Install with Stylish».

Vanilla Dark

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

Подходящие параметры настраиваются и интегрируются с помощь Stylish: предварительно предстоит воспользоваться доступными кнопками и выпадающими списками, а уже после принять Customization и активировать параметры.

Dark Theme For VK

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

Активируется тема через панель быстрого доступа в браузере. Дополнительно предусмотрено расписание – плагин способен считывать информацию о текущем времени и менять тему ближе к 22:00.

Как включить темную тему в «ВК» на телефоне

Инструкции о смене оформления интерфейса в VK начали появляться сразу после появления глобального обновления – разработчики буквально «вручили» каждому владельцу смартфона или планшета с iOS и Android темную тему, а вместе с тем рассказали, как действовать дальше.

Но, если рекомендации давно пропущены, то ниже – подробный алгоритм действий!

Как сделать темную в «ВК» на Андроид

Операционная система Android разрешает менять оформление интерфейса по следующему сценарию:

Как поставить темную тему в «ВК» на iPhone

Оформление социальной сети на iPhone и iPad меняется немного иначе и содержит дополнительные настройки:

Источник