Реализуйте темный режим в своем приложении уже сегодня

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

Я буду использовать реализацию темного режима / светлого режима из нашего приложения Learn By Ear в качестве примера, который вы можете проверить в живой версии здесь.

Глубокое погружение

Давайте погрузимся в это.

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

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

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

Итак, как я уже говорил, Neumorphism установил эти два набора цветов (скриншоты ниже взяты из проекта в Figma, который мы используем в качестве программного обеспечения для наших макетов дизайна):

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

Сначала мы поместили три основных цвета, а затем добавили вспомогательный цвет - Серый - и один для шрифтов - Темный.

На этом я хотел бы остановиться на мгновение: использование названий Серый и Темный проблематично. Прежде всего, мы видим, что серый цвет не совсем серый в сценарии темного режима, и темный, вероятно, должен быть намного светлее, если мы хотим использовать его на темном фоне.

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

Что, если вы добавите еще 10 из них, в том числе темные, серые и т. Д.? Скорее всего, это в конечном итоге приведет к беспорядку, который будет нелегко (или вообще не будет использоваться), и вы забудете о создании настраиваемого или расширяемого кода. Что делать, если вы хотите использовать режим оттенков серого? Или красный? Видите, как это может довольно быстро выйти из-под контроля?

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

Позвольте мне показать вам, что я имею в виду:

Выше мы разделили цвета на три основных раздела:

  • Текст
  • Элементы
  • Помощники

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

Элементы

Main, Shadow и Highlight взяты из паттерна Neumorphism, но переименованы; если вы отметите, изначально это были Свет, Основной и Дополнительный, что может сбивать с толку, как только вы начнете с ним работать, поскольку Neumorphism использует эти цвета для эффектов тени и выделения.

Текст

Основной цвет будет различаться в зависимости от фона (светлее на темнее и наоборот). Затененный текст также может означать отключенное состояние и может быть меньше / второстепенным.

Помощники

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

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

Реализация

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

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

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

Но подождите, это были только цвета из светового режима, верно? Верно. Аналогичным образом мы объявляем переменные темного режима:

Подождите, что это [data-theme='dark']?

Это ключ к изменению вашей темы! Он будет применять значения этих переменных, если ваш тег html имеет этот атрибут <html [data-theme='dark']> (вы также можете сделать это с помощью JavaScript - дайте мне знать, если вы хотите, чтобы я тоже поделился кодом).

А тело?

Тело остается точно таким же! И поскольку мы назвали переменные осмысленным образом, без ненужной привязки к их цветовому значению, вы получаете такую ​​свободу!

Трудный путь

Позвольте мне показать вам, как это выглядит, когда вы делаете это очень тяжело.

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

Если бы мы сохранили соглашение об именах черный, синий, и белый, то в качестве нашего CSS мы использовали бы следующее:

Но это сработает только для нашего светового режима, верно? Итак, вам нужно будет расширить его с помощью:

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

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

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

Вам нужно покрыть каждый элемент и изменить каждый цвет для каждой темы. Ого, это много каждый, не так ли?

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

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

Все присвоения цветов соответствующим переменным будут происходить в другом месте (где находятся другие ваши переменные), и как только вы измените атрибут, он сделает всю работу за вас.

Таким образом вы сохраните все свои цвета в одном месте, и вам нужно будет добавить / изменить их только в одном месте. Более чистое состояние и более безопасная реализация:

Разве не намного чище и организованнее?

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

Заключение

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

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

Спасибо за чтение!