使用 Vue 更改主题

Question

我正在使用 Vue.js 2.0 开发一个应用程序。和用于状态管理的 Vuex。我需要实现所谓的“品牌化”的可能性，即用户需要能够为他们的帐户选择一个主题，然后将一种特定的颜色应用于应用程序的样式。

作为概念证明，我选择并设法实现的第一个选项是使用 Vuex 将所需样式作为 Vuex 对象存储在应用程序商店中，然后我将其用于绑定到需要应用的元素的样式到。用于选择颜色的颜色选择器会触发状态突变以更改颜色。这工作得很好，甚至不太难使用，因为它允许只在需要应用的 html 元素上使用类似 :style ="$store.state.brand" 的表达式。当我更改颜色时，它会在所有组件上更新。此选项有其优点，因为它非常简单，并且还允许用户从颜色选择器中选择他/她想要的任何颜色。但是，它在设计方面有其局限性，因为这种方式无法实现复杂的样式（例如

所以我想尝试并向我们的客户建议的第二个选项是拥有一组用户可以选择的预定义主题。这些主题将在 css 文件中定义（使用 sass/less 或类似的东西）。我现在需要实施的是以下内容：

当用户选择一个主题时，比如说从下拉列表中，我想从适当的 css 文件加载应用程序的样式并重新加载应用程序以反映这些更改。在 Vue 中执行此操作的最有效和最佳实践方法是什么？

Answer 1

所以如果其他人需要这个，我们最终使用了样式组件。有关更多详细信息，请查看https://www.npmjs.com/package/vue-styled-components. 我们为需要接收指定主题颜色（按钮、单选按钮、标题、菜单项等）的元素创建了样式组件，并将所需的颜色作为道具传递给它们。prop 的值来自 Vuex 存储，因此它在整个应用程序中是一致的。这种方法的好处是客户的颜色选择是无限的（与我们正在考虑的预定义主题相比）。此外，另一个好处是，现在客户可以假设通过颜色选择器更改 vuex 商店中的颜色，并实时查看主题更改。最后，这种方法还使您能够使用 css 的所有功能，例如使用 css 选择器创建更复杂的样式。这对于常规的 vue 样式绑定是不可能的。如果您需要更多详细信息，请随时与我联系。