Как изменить цветовую схему веб-приложения с помощью реакции?

Допустим, у нас есть реагирующее веб-приложение, разработанное с помощью response-bootstrap. Это приложение должно быть настраиваемым с помощью палитры цветов. Пользователь выбирает основной цвет, и цветовая схема с несколькими автоматически выбранными вторичными цветами применяется во всем графическом интерфейсе веб-приложения.

Вспоминая, что реакцией является использование встроенных стилей для каждого отдельного компонента, мне интересно, как это сделать в реакции с реакцией-начальной загрузкой?

2 ответа

Решение

Возможно, вы захотите заглянуть в модули React CSS, которые позволят вам использовать динамические объекты стиля. Код легко читается и будет работать правильно. Это, однако, потребует иметь предопределенные темы.

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

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

Если вы хотите сделать свое приложение themable вам может понадобиться:

  1. Инструмент для создания тем
  2. Подход для реализации этой темы в вашем приложении

В качестве инструмента вы можете попробовать этот сборник рассказов-addon-material-ui (который позволяет создавать объекты темы для всех целей, несмотря на наличие Material-UI в заголовке)

Затем, чтобы предоставить свои темы своему приложению, вы можете использовать response-theme-provider. Он просто передает данные темы в ваш Components через контекст, так что вы можете реализовать любой фреймворк или настроить цвета вручную, когда вам это нужно. Он также имеет API для переключения тем.

Другие вопросы по тегам