如何使用 React 改变 Web 应用程序配色方案？
How make web application color scheme changeable using react?
比方说，我们有一个使用 react-bootstrap 开发的 React Web 应用程序。此应用程序必须使用颜色选择器进行自定义。用户选择基色，并在整个 Web 应用程序 GUI 中采用具有多种自动选择的辅助色的配色方案。
记住 react-way 是为每个单独的组件使用内联样式，我想知道如何在 react-bootstrap?
中做到这一点
您可能需要查看 React CSS Modules，这将允许您使用动态样式对象。该代码可以轻松阅读并且可以正常运行。但是，这需要有预定义的主题。
第二种方法是在 redux store 或相邻组件中定义颜色，将其作为 prop 传递给所有子组件。
但是我建议不要让用户使用自定义颜色选择器选择任何颜色。如果让用户选择 RGB 颜色，请记住有 16777216 种颜色组合。你不能仅仅通过加深任何给定的颜色来轻松地制作替代颜色，因为很有可能只改变例如。降低亮度可能会降低与二次色的对比度。
如果您想制作您的应用程序 themable，您可能需要：
- 创建主题的工具
- 将此主题实施到您的应用程序的方法
作为一种工具，您可以尝试使用此 storybook-addon-material-ui（尽管标题中存在 Material-UI，但它允许为所有目的创建主题 objects）
然后为您的应用提供主题，您可以使用 react-theme-provider。它只是通过上下文将主题数据传递到您的 Components 中，因此您可以在需要时实现任何框架或手动设置颜色。它还有一个 API 用于主题切换。
比方说，我们有一个使用 react-bootstrap 开发的 React Web 应用程序。此应用程序必须使用颜色选择器进行自定义。用户选择基色，并在整个 Web 应用程序 GUI 中采用具有多种自动选择的辅助色的配色方案。
记住 react-way 是为每个单独的组件使用内联样式，我想知道如何在 react-bootstrap?
中做到这一点您可能需要查看 React CSS Modules，这将允许您使用动态样式对象。该代码可以轻松阅读并且可以正常运行。但是，这需要有预定义的主题。
第二种方法是在 redux store 或相邻组件中定义颜色，将其作为 prop 传递给所有子组件。
但是我建议不要让用户使用自定义颜色选择器选择任何颜色。如果让用户选择 RGB 颜色，请记住有 16777216 种颜色组合。你不能仅仅通过加深任何给定的颜色来轻松地制作替代颜色，因为很有可能只改变例如。降低亮度可能会降低与二次色的对比度。
如果您想制作您的应用程序 themable，您可能需要：
- 创建主题的工具
- 将此主题实施到您的应用程序的方法
作为一种工具，您可以尝试使用此 storybook-addon-material-ui（尽管标题中存在 Material-UI，但它允许为所有目的创建主题 objects）
然后为您的应用提供主题，您可以使用 react-theme-provider。它只是通过上下文将主题数据传递到您的 Components 中，因此您可以在需要时实现任何框架或手动设置颜色。它还有一个 API 用于主题切换。