artalar/app-theme-styles.md

## app-theme-styles.md

      
    Raw
  

              app-theme-styles.md
            
          
    По поводу стилизации и темизации. Особенно больная тема для тех у кого дизайнера нет на проекте, а есть заказчик который хочет что бы было красиво, а как - не известно.
Обычно выбирается набор "сочитающихся" цветов и ими закрашиваются разные компоненты. При этом в наборе два десятка цветов (классический вариант: primary и accent) + разнообразные тени и фоны (например). И какой и куда цвет применить - совершенно не ясно. Вдобавок всего два тона не всегда хватает и возникают новые проблемы с поиском нужной гаммы.
Но можно использовать следующий подход:

Не цвета пытаться впихнуть в компоненты, а к компонентам искать подходящие цвета. Т.е. для каждого компонента должна отдельно определяться цветовая гамма: полностью индивидуальная, или отнаследованная от родителя. Важно понять цель дизайна не раскидать цвета по интерфейсу, а выделить интерфейс, используя цвета.
Брать за основу 3 цвета: background (фон), basic (основной цвет выделения частей интерфейса), accent (для привлечения взаимодействия - интерактивности пользователя). Плюс от каждого цвета могут быть производные (калькулируются автоматически) цвета: text, shadow, disabled (но они, в большинстве своем, будут стандартными и не будут "напрягать" необходимостью их конфигурировать). И здесь важно понимать, что каждая часть интерфейса может быть отдельным компонентом с собственной цветовой гаммой: список товаров, карточка товара, шапка карточки, кнопки.
Например, у карточки товара есть фон из background и бордеры из basic. А у выпадающего списка фон из background, текущий вариант из basic, а вариант с focus \ hover из accent.
Так же данные три цвета являются фундаментальными, но не единственными. У кнопки при hover - цвет accent, но при focus бордер из полупрозрачного accent - т.е. мы модифицируем фундаментальный цвет компонента при необходимости расширения гаммы.

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