如何使用 React 使 Web 应用程序配色方案可变？

Posted 2023-02-22

【中文标题】如何使用 React 使 Web 应用程序配色方案可变？

【英文标题】：How make web application color scheme changeable using react?

【发布时间】：2017-03-23 14:35:08

【问题描述】：

假设我们有一个使用 react-bootstrap 开发的 react Web 应用程序。此应用程序必须使用颜色选择器进行自定义。用户选择基色，并在整个 Web 应用程序 GUI 中采用具有多种自动选择辅助颜色的配色方案。

记住 react-way 是为每个单独的组件使用内联样式，我想知道如何在 react-bootstrap 中做到这一点？

【参考方案1】：

如果你想让你的应用 themable 你可能需要：

创建主题的工具 在您的应用中实现此主题的方法

作为一个工具，你可以试试这个storybook-addon-material-ui（尽管标题中存在 Material-UI，但它允许为所有目的创建主题对象）

然后，您可以使用react-theme-provider 为您的应用提供主题。它只是通过上下文将主题数据传递到您的Components，因此您可以实现任何框架或在需要时手动设置颜色。它还有一个用于主题切换的 API。

【参考方案2】：

您可能想查看React CSS Modules，这将允许您使用动态样式对象。该代码可以轻松阅读并且可以正常运行。然而，这需要有预定义的主题。

第二种方法是在 redux 存储或相邻组件中定义颜色，将其作为 prop 传递给它的所有子组件。

但是我建议不要让用户使用自定义颜色选择器选择任何颜色。如果您让用户选择 RGB 的颜色，请记住有 16777216 种颜色组合。您不能通过使任何给定颜色变暗来轻松制作替代颜色，因为很有可能只改变例如颜色。降低亮度可能会降低与辅助颜色的对比度。