Оптимизируйте свои названия цветов для темного режима
Я использовал названия цветовых оттенков в своих проектах и быстро понял, что это не лучшая идея, особенно при кодировании для темного режима.
Что я имею в виду под названиями цветового спектра?
Названия спектра означают, что вы используете такие имена, как: grey, blue, green… и т. Д. Это также относится к оттенкам определенного цвета: grey[500], blue[300], green[100].
Почему такой подход плохой?
У такого подхода много минусов:
- Трудно провести рефакторинг
Представьте, что ваше приложение использует red цвет в качестве основного цвета. Вы должны использовать red название цвета в своем коде, что означает, что если вы решите изменить свой акцентный цвет в будущем, скажем с красного на зеленый, вы пройдете весь свой код и измените имя переменной на green. Как вы понимаете, это неэффективно.
- Это не поддерживает темный режим
Допустим, вы используете оттенки серого для создания компонентов (текста, фона, границ, цветов разделителя ...)
grey[500] в светлом режиме на светлом фоне выглядит хорошо, но то же самое в grey[500] темном режиме над темным фоном может быть полностью невидимым.
Предложенное решение
Используйте функциональные названия вместо названий спектров.
- начальный
- вторичный
- высшее
- ошибка
- предупреждение
- успех
- Информация
Это решает вышеупомянутые проблемы.
Например, text.primary цвет в светлом режиме может быть #000000 (черный), а в темном режиме #ffffff (белый).
Ту же концепцию можно применить к цветам акцента, состояниям ошибок, границам, фону и т. Д.
Удачного проектирования / кодирования! 🎉
