因此，我认为标题足以说明问题:我想为整个应用程序动态设置主题。也许这意味着当我按下特定按钮时更改所有div的颜色，或者在特定用户登录时更改整个webapp的颜色。
只是为了对我目前正在从事的工作提供一些见解，我会说我已经构建了一个使用许多库的Vue.js应用程序，其中包括一个名为Element-ui的应用程序，该应用程序已经内置了主题选项。问题是它是用scss编写的，我想在导航过程中更改所有可变颜色。我的项目看起来像这样:
<template>
... some HTML and components...
</template>
<script>
... some javascript ...
</script>
<style scoped>
... some style that is scoped to the current component only ...
</style>
我有很多这样的文件，所以对我所有人来说都不能为它们创建“全局函数”。另外，我只在
main.js中导入一次主要的scss文件。我可以为我的Web应用程序创建动态主题吗？使用saas是个好主意吗？也许是Javascript？
编辑
我觉得我对它的解释不够好，所以我想添加一个简单的例子。如果您访问Element页面，您会在右上角看到一个颜色选择器，当颜色改变时，它还会改变整个网站的强调色，例如按钮颜色，链接颜色等。
希望这可以帮助您更好地理解
编辑
现在，我已经选择了一个非常差的优化解决方案。这个想法是，当用户更改主题时，我只是创建一个新的CSS文件并将其附加到当前文档中。
let sheet = document.createElement('style')
sheet.innerHTML = `*[class*="--primary"]{
background-color: ${colors[0]};
}
...`;
document.body.appendChild(sheet);
我确实认为这是一个非常糟糕的解决方案，但是现在，当用户更改参数时，我无法提出任何其他可以正常工作的解决方案。我真的希望该过程是完美无瑕的:用户选择一种颜色，并且整个应用程序只是更改为该特定颜色，而无需预先构建的
theme.css。最终编辑
我终于找到了解决方案，请引用答案!
最佳答案
最后，经过几天的忙碌，我想出了一个既易于实现又非常轻巧的解决方案。
CSS变量
在进行大量搜索之前，我什至不知道这些变量的存在，并且它们似乎并没有那么用。无论如何，我希望这可以帮助某人寻求我的相同答案:
<template
<app-main></app-main>
<app-sidebar></app-sidebar>
...
</template>
<style>
:root{
--primary-color: #C5C5C5!important;
--secondary-color: #6C7478!important;
--tertiary-color: #FFFFFF!important;
--success-color: #80b855!important;
--warning-color: #eaca44!important;
--error-color: #ef4d4d!important;
}
/* Theming */
header{
background-color: var(--primary-color);
}
div{
color: var(--tetriary-colory);
}
...
/* END */
</style>
<script>
import axios from 'axios' /* all your imports etc. */
export default{
data(){
},
methods: {
axios.post(`http://localhost:8080/foo`).then(function (response){
let bodyStyles = document.body.style;
bodyStyles.setProperty('--primary-color', response.colors[0]);
bodyStyles.setProperty('--tertiary-color', response.colors[1]);
...
}
}
}
</script>
如您所见，我只是初始化了一些有用的 CSS变量，当我需要它们时(例如在该api post调用中)，我只是使用一个简单的
bodyStyles.setProperty('propertyName')函数对其进行了修改。我非常喜欢这种类型的设置，因为我在登录页面中使用了它，因此当用户成功登录时，我会从数据库中加载他自己的颜色并进行设置。
希望这可以帮助某人!干杯!
关于vue.js - 动态更改Vue.js SPA主题的最佳方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49551205/