所以我认为标题已经足够解释:我想动态地为我的整个应用程序设置主题。也许这意味着当我按下特定按钮时更改所有 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
.
我能做些什么来为我的 web 应用程序创建一个动态主题吗?使用 saas 是个好主意吗?也许是Javascript?
编辑
我觉得我解释得不够好,所以我想添加一个简单的例子。如果您访问Element页面,您可以在右上角看到一个颜色选择器,当颜色改变时,它也会改变整个网站的强调色,如按钮颜色、链接颜色等。
希望这可以帮助更好地理解
编辑
现在,我已经确定了一个非常糟糕且我认为优化不佳的解决方案。这个想法是,当用户更改主题时,我只需创建一个新的 css 文件并将其附加到当前文档。
let sheet = document.createElement('style')
sheet.innerHTML = `*[class*="--primary"]{
background-color: ${colors[0]};
}
...`;
document.body.appendChild(sheet);
我真的认为这是一个非常糟糕的解决方案,但现在我想不出任何其他可以在用户更改参数时正常工作的方法。我真的希望这个过程完美无瑕:用户选择一种颜色,整个应用程序只是更改为该特定颜色,没有预建theme.css
的 .
最终编辑
终于找到解决办法了,参考答案!