Использование Context API в React для создания глобальной темы приложения

[camelCaseVlad]

Спасибо за комментарий. Возможно, данное применение контекста попробует юзер с низкой версией реакта. Данный пост — только базовая имплантация, но которая может быть применена в большинстве проектов (React.JS).

[JustDont]

Был бы вам благодарен, если б вы попробовали ответить на пару вопросов чуть поинтереснее передачи контекстов:

1) Насколько часто, по вашему мнению, надо на лету менять тему приложения? Какой % от людей вообще воспользуется функцией смены темы, и какой % от них будет ожидать, чтоб эта функция отработала без перезагрузки страницы?
2) Расширяя вопрос №1: что делать, если у меня 100500 тем, цсс которых теперь занимает у меня большую часть загружаемых ресурсов всей страницы?

[JustDont]

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

[camelCaseVlad]

1) Смена темы на данный момент является базовой функциональностью не только вебсайтов (твиттер, ютуб), но и различных приложений, например, вы наверняка используйте темную тему в своем VS Code. Про % ничего сказать не могу, но уверен, что смена темы — популярная фича.

2) Наверное, в первую очередь надо уменьшить число тем, так как наличие 100500 тем, если речь идет о вебсайте, по моему мнению не обоснованно. На работе, CSS UI-Kit выполнен в Emotion, тем самым используя компонент, мы берем только его стили, никаких общих стилей не импортируются.

Вот быстрый пример компонента с несколькими темами, выполненный в эмоушн:

const colors = theme => ({
  blue: css`
    border-color: ${blue};
  `,
  'light-blue': css`
    border-color: ${lightBlue};
  `,
  green: css`
    border-color: ${green};
  `,
  orange: css`
    border-color: ${orange};
  `,
  red: css`
    border-color: ${red};
  `,
  yellow: css`
    border-color: ${theme === 'dark' ? darkYellow : lightYellow};
  `,
  white: css`
    border-color: ${white};
  `,
});

export default ({ color, theme }) => css`
  ${textColor[theme]};
  ${colors(theme)[color]};
  display: block;
  padding: 10px;
  text-align: center;
`;

[JustDont]

Смена темы на данный момент является базовой функциональностью не только вебсайтов (твиттер, ютуб), но и различных приложений, например, вы наверняка используйте темную тему в своем VS Code. Про % ничего сказать не могу, но уверен, что смена темы — популярная фича.

Это неинтересная часть ответа. Интересная — это «какой % ожидает, что тема сменится без перезагрузки страницы». И есть даже еще более интересное дополнение — «сколько в среднем раз за визит пользователь меняет тему».
То есть менять тему — штука достаточно востребованная в определенных кругах. Нужно ли её менять на лету и вообще писать код, способный так делать — вот самый интересный вопрос.

ЗЫ: И нет, я не отношусь к людям, которые светлый текст на черном фоне считают чем-то хорошим.

На работе, CSS UI-Kit выполнен в Emotion

CSS-in-JS — это тема для большого холивара, потому что это заведомые тормоза против чистого CSS даже на хороших библиотеках. Не всем нравится идея тормозить CSS в несколько (а то и во много) раз ради некоторого удобства писательства.

Наверное, в первую очередь надо уменьшить число тем, так как наличие 100500 тем, если речь идет о вебсайте, по моему мнению не обоснованно.

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

[andres_kovalev]

Вместо defaultTo можно просто передать тему по умолчанию в createContext()