Комментарии 8
НЛО прилетело и опубликовало эту надпись здесь
Был бы вам благодарен, если б вы попробовали ответить на пару вопросов чуть поинтереснее передачи контекстов:
1) Насколько часто, по вашему мнению, надо на лету менять тему приложения? Какой % от людей вообще воспользуется функцией смены темы, и какой % от них будет ожидать, чтоб эта функция отработала без перезагрузки страницы?
2) Расширяя вопрос №1: что делать, если у меня 100500 тем, цсс которых теперь занимает у меня большую часть загружаемых ресурсов всей страницы?
1) Насколько часто, по вашему мнению, надо на лету менять тему приложения? Какой % от людей вообще воспользуется функцией смены темы, и какой % от них будет ожидать, чтоб эта функция отработала без перезагрузки страницы?
2) Расширяя вопрос №1: что делать, если у меня 100500 тем, цсс которых теперь занимает у меня большую часть загружаемых ресурсов всей страницы?
НЛО прилетело и опубликовало эту надпись здесь
1) Смена темы на данный момент является базовой функциональностью не только вебсайтов (твиттер, ютуб), но и различных приложений, например, вы наверняка используйте темную тему в своем VS Code. Про % ничего сказать не могу, но уверен, что смена темы — популярная фича.
2) Наверное, в первую очередь надо уменьшить число тем, так как наличие 100500 тем, если речь идет о вебсайте, по моему мнению не обоснованно. На работе, CSS UI-Kit выполнен в Emotion, тем самым используя компонент, мы берем только его стили, никаких общих стилей не импортируются.
Вот быстрый пример компонента с несколькими темами, выполненный в эмоушн:
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;
`;
Смена темы на данный момент является базовой функциональностью не только вебсайтов (твиттер, ютуб), но и различных приложений, например, вы наверняка используйте темную тему в своем VS Code. Про % ничего сказать не могу, но уверен, что смена темы — популярная фича.
Это неинтересная часть ответа. Интересная — это «какой % ожидает, что тема сменится без перезагрузки страницы». И есть даже еще более интересное дополнение — «сколько в среднем раз за визит пользователь меняет тему».
То есть менять тему — штука достаточно востребованная в определенных кругах. Нужно ли её менять на лету и вообще писать код, способный так делать — вот самый интересный вопрос.
ЗЫ: И нет, я не отношусь к людям, которые светлый текст на черном фоне считают чем-то хорошим.
На работе, CSS UI-Kit выполнен в Emotion
CSS-in-JS — это тема для большого холивара, потому что это заведомые тормоза против чистого CSS даже на хороших библиотеках. Не всем нравится идея тормозить CSS в несколько (а то и во много) раз ради некоторого удобства писательства.
Наверное, в первую очередь надо уменьшить число тем, так как наличие 100500 тем, если речь идет о вебсайте, по моему мнению не обоснованно.
Это детали — может быть пара тем, но цсс одной темы весить достаточно существенно. В любом случае, речь тут о том, что цсс тем — это один из явнейших кандитатов на ленивую загрузку.
Вместо defaultTo можно просто передать тему по умолчанию в createContext()
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Использование Context API в React для создания глобальной темы приложения