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

  • Как создать тему с помощью Styled Components
  • Как создать темный режим для веб-приложения
  • Как никогда не дублировать цвета в коде
  • Как использовать TypeScript для улучшения DX

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

Без дальнейших церемоний, давайте прыгать прямо!

Использование переменных

Не используйте цвета напрямую. Всегда помещайте их в переменную. Переменные CSS лучше, чем переменные SASS или JS, даже если мы создаем приложение JS с помощью CSS-in-JS (styled-components,например,). Мы покажем вам позже в статье, почему.

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

Использование смысла

Довольно часто используется один и тот же цвет для нескольких элементов. Возможно, цвет нашего основного текста совпадает с цветом фона нашей основной кнопки. Теперь представьте, что текст слишком светлый и не имеет достаточного контраста. Нам нужно будет изменить цвет текста, сохранив исходный цвет нашей кнопки. Вот почему лучше называть наши переменные по их варианту использования, а не по их отношению к палитре. Например, лучше назвать цвет background, а не white, или button-background, а не primary-dark.

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

Соглашение об именовании

Соглашение об именах необходимо для больших команд, но оно необходимо даже для небольших команд. Это как создавать Rest API без какой-либо документации. В приведенном ниже примере мы видим проверку в Figma с тем же цветовым ключом [в квадратных скобках], который мы будем использовать в компоненте React рядом с ним. Четкое название цветов в Figma снимает любые вопросы о том, какие цвета использовать, особенно для новых пользователей.

Придерживайтесь одной цветовой нотации

YПри создании темы лучше придерживаться одной нотации, чтобы избежать дублирования цветов. Есть много вариантов. В большинстве случаев цвета представлены в шестнадцатеричном формате или RBGA, когда нам нужен альфа-канал.

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

В будущем мы также могли бы использовать широкую гамму display-p3 или Lab цветовых пространств. Они могут описывать гораздо больше цветов, чем цветовое пространство RGB. К сожалению, в настоящее время цвета широкой гаммы поддерживаются только в последней версии браузера Safari (начало 2022 г.).

Совет по преобразованию процентов в HEX

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

Собираем все вместе

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

Создание темы

Прежде всего, нам понадобится цветовая палитра. Мы можем использовать готовую палитру, такую ​​как Material UI, или использовать наше руководство Как создать лучшую цветовую палитру пользовательского интерфейса, чтобы создать свою собственную. Мы также можем перейти прямо в Atmos, чтобы сгенерировать его за считанные минуты.

Может возникнуть соблазн взять цветовую палитру, превратить ее в объект JS и на этом закончить. Это сработает (вроде бы), но есть способ получше!

В приведенном ниже фрагменте кода у нас есть два объекта, наша цветовая палитра и наша тема. Обратите внимание, что у каждого есть свое предназначение.

Палитра

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

Тема

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

Избегайте мерцания с помощью переменных CSS

Мы создали тему, теперь мы хотели бы ее использовать. Если вы используете какой-либо инструмент CSS-in-JS, самый простой способ — передать объект темы поставщику темы. Это сработает, но у него есть один существенный недостаток, который следует учитывать, если вы генерируете HTML во время сборки или запроса на сервере с такими фреймворками, как Next.js и Gatsby.

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

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

Превращение темы в переменные CSS

Когда наша тема готова, нам нужно превратить ее в переменные CSS. Мы будем использовать рекурсивную функцию, которая превращает каждое атомарное значение в переменную CSS с именем из ключей объекта. Затем строка может быть назначена непосредственно на :root.

Совет для темного режима

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

Но мы можем позволить пользователям выбирать между светлым и темным режимами в пользовательском интерфейсе приложения и сохранять настройки. Мы можем добиться этого, внедрив простой скрипт сразу после <head>, прочитав локальное хранилище и установив имя класса для светлого/темного режима в элементе HTML. Мы можем попытаться придумать что-то сами, а можем использовать этот хук React, который сделает это за нас.

Наша удивительная темная тема почти готова. И последнее, что нужно сделать, наши полосы прокрутки, вероятно, все еще белые. Не в Firefox, потому что Firefox использует системные настройки. Чтобы исправить наши полосы прокрутки, а также сделать их темными, существует простое свойство css или метатег html, чтобы сообщить браузеру, что полоса прокрутки должна быть темной.

Использование переменных CSS

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

Или мы можем создать простую (типобезопасную) функцию, которая поможет нам в этом. Большим преимуществом является то, что функции не нужна ссылка на тему (в отличие от подхода Theme Provider). Из приведенного ниже фрагмента кода видно, что эту функцию можно использовать где угодно.

Совет для TypeScript

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

В заключение (TLDR)

  • Используйте переменные, предпочтительно переменные CSS
  • Называйте цвета по их использованию, а не по тому, как они выглядят
  • Создайте соглашение об именах и придерживайтесь его
  • Придерживайтесь одной цветовой нотации, HEX или RGB, это не имеет значения

Я что-то пропустил?

Я хотел бы услышать от вас:

  • Было ли это просто переподготовкой или совершенно новым для вас?
  • Что вы измените в своей кодовой базе в первую очередь?
  • Вы делаете что-то по-другому?

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