Реализуйте темный режим в своем приложении уже сегодня
Темный режим - это то, что нравится многим из нас, но пока не многим довелось его реализовать. Поскольку я видел свою долю упрямых настроек, я хочу поделиться с вами некоторыми ключевыми моментами, которые следует учитывать перед тем, как начать, или принять во внимание, если вы уже используете его.
Я буду использовать реализацию темного режима / светлого режима из нашего приложения Learn By Ear в качестве примера, который вы можете проверить в живой версии здесь.
Глубокое погружение
Давайте погрузимся в это.
У нашего веб-приложения просто есть темный режим, поскольку мы хотим дать пользователям возможность выбирать то, что им больше всего подходит, в то время, когда они взаимодействуют с нашим продуктом, наряду с другими предпочтениями.
Конечно, реализация или помня о том, что вам с самого начала понадобятся две темы, полезно, но это не всегда так. Принципы, которыми я поделюсь с вами, можно использовать как для новых реализаций, так и для рефакторинга. В конце концов, речь идет о ключевых моментах.
Небольшое замечание: мы выбрали неоморфизм в качестве шаблона проектирования, что означает, что наши три цвета для светлого режима и три для темного режима уже установлены. Я говорю установленный из-за того, как работает эффект неоморфизма, но я не буду здесь останавливаться на этой части, поскольку она характерна для нейморфизма. Но если вам интересно, вы можете прочитать об этом подробнее.
Итак, как я уже говорил, Neumorphism установил эти два набора цветов (скриншоты ниже взяты из проекта в Figma, который мы используем в качестве программного обеспечения для наших макетов дизайна):
И хотя у нас уже было три цвета для каждого режима, мы знали, что нам нужно по крайней мере иметь еще два - для текста и вспомогательный цвет (для начала). То, как мы настраивали эти цвета, было похоже на то, как мы выбрали три основных, что привело к следующему:
Сначала мы поместили три основных цвета, а затем добавили вспомогательный цвет - Серый - и один для шрифтов - Темный.
На этом я хотел бы остановиться на мгновение: использование названий Серый и Темный проблематично. Прежде всего, мы видим, что серый цвет не совсем серый в сценарии темного режима, и темный, вероятно, должен быть намного светлее, если мы хотим использовать его на темном фоне.
Это самая большая ошибка, которую я вижу, как разработчики тем повторяют снова и снова - называя цвета для своих цветов.
Что, если вы добавите еще 10 из них, в том числе темные, серые и т. Д.? Скорее всего, это в конечном итоге приведет к беспорядку, который будет нелегко (или вообще не будет использоваться), и вы забудете о создании настраиваемого или расширяемого кода. Что делать, если вы хотите использовать режим оттенков серого? Или красный? Видите, как это может довольно быстро выйти из-под контроля?
Вам нужно назвать цвета по функциям, которые они представляют.
Позвольте мне показать вам, что я имею в виду:
Выше мы разделили цвета на три основных раздела:
- Текст
- Элементы
- Помощники
Мы смогли разбить его таким образом, набросав эскизы дизайна нашего приложения и увидев, какие элементы страницы должны иметь цвета и чем они отличаются друг от друга.
Элементы
Main, Shadow и Highlight взяты из паттерна Neumorphism, но переименованы; если вы отметите, изначально это были Свет, Основной и Дополнительный, что может сбивать с толку, как только вы начнете с ним работать, поскольку Neumorphism использует эти цвета для эффектов тени и выделения.
Текст
Основной цвет будет различаться в зависимости от фона (светлее на темнее и наоборот). Затененный текст также может означать отключенное состояние и может быть меньше / второстепенным.
Помощники
Опасность и успех предназначены для визуальной обратной связи, позволяющей пользователю понять, прав он или нет, когда изучает приложение. Цвета не обязательно должны быть красным или зеленым (они могут быть розовыми и синими или пурпурными и желтыми).
Мы назвали их в соответствии с соглашением об именах нашей основной интерфейсной библиотеки (Bootstrap). Затем, поскольку наш дизайн довольно минималистичен, мы хотели включить один всплывающий цвет, который снова может варьироваться в зависимости от атмосферы основного элемента, поэтому мы назвали его PopColour.
Реализация
Внедрение этой системы именования гораздо более расширяемое, чем, например, использование черного, синего и белого как имена. Если вы все еще не уверены, продолжайте читать, и я покажу вам, как это происходит, когда вы действительно начнете работать с этим.
После того, как мы отсортировали наши имена (это не обязательно должен быть окончательный результат, но у вас есть навык), давайте настроим некоторые собственные переменные CSS (вы можете прочитать о них в официальной документации здесь) :
Мы устанавливаем их на корневом уровне, как указано в документации. Это наши значения по умолчанию. Теперь, когда вы захотите их использовать, вы можете просто сделать это следующим образом:
Но подождите, это были только цвета из светового режима, верно? Верно. Аналогичным образом мы объявляем переменные темного режима:
Подождите, что это [data-theme='dark']
?
Это ключ к изменению вашей темы! Он будет применять значения этих переменных, если ваш тег html
имеет этот атрибут <html [data-theme='dark']>
(вы также можете сделать это с помощью JavaScript - дайте мне знать, если вы хотите, чтобы я тоже поделился кодом).
А тело?
Тело остается точно таким же! И поскольку мы назвали переменные осмысленным образом, без ненужной привязки к их цветовому значению, вы получаете такую свободу!
Трудный путь
Позвольте мне показать вам, как это выглядит, когда вы делаете это очень тяжело.
На нашем веб-сайте есть тумблер для переключения светлого / темного режима, и иногда это выглядит так:
Если бы мы сохранили соглашение об именах черный, синий, и белый, то в качестве нашего CSS мы использовали бы следующее:
Но это сработает только для нашего светового режима, верно? Итак, вам нужно будет расширить его с помощью:
И вам нужно будет повторять это для каждого отдельного элемента, который изменяется! Это немного теряет смысл переменных, и, в общем, чистое безумие.
Вы хотите, чтобы ваши переменные работали для вашей темы, а не просто хранили какую-то информацию, например, в сейфе.
Давайте пойдем дальше и скажем, что вы хотите реализовать особую тему на Новый год или на весну - или на то и другое вместе!
Вам нужно покрыть каждый элемент и изменить каждый цвет для каждой темы. Ого, это много каждый, не так ли?
Я почти уверен, что не многие люди захотят взяться за эту задачу, и количество ошибок, которые могут возникнуть в результате, слишком велико.
Вместо этого, если мы реализуем переменные так, как я предлагал, у нас будет только эта строка кода:
Все присвоения цветов соответствующим переменным будут происходить в другом месте (где находятся другие ваши переменные), и как только вы измените атрибут, он сделает всю работу за вас.
Таким образом вы сохраните все свои цвета в одном месте, и вам нужно будет добавить / изменить их только в одном месте. Более чистое состояние и более безопасная реализация:
Разве не намного чище и организованнее?
Тем из вас, у кого уже есть существующая настройка, я предлагаю сначала попытаться разбить ее на переменные с предложенным соглашением об именах, а затем применять их во всем коде. Как только вы закончите с этим, вы можете начинать добавлять темы.
Заключение
В заключение, не создавайте бесполезную работу для себя или своих коллег. Это не означает, что каждый проект должен начинаться с переменных сейчас - используйте для этого собственное суждение.
Но если вы все же начинаете работать с темами, я настоятельно рекомендую придерживаться этого соглашения об именах, а не просто называть цвета для их имен. (Попробуйте веб-сайт в оттенках серого со всеми этими черными / серыми оттенками. Это не весело - я вам гарантирую!)
Спасибо за чтение!