动态更改我的Vue.js SPA主题的最佳方法是什么？

Question

所以我认为这个标题足以解释:我想动态地设计我的整个应用程序.也许这意味着当我按下特定按钮时更改所有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>

我有很多类似这样的文件,因此对所有这些文件进行"全局功能"对我来说似乎并不实用.我也只在我的导入一次主scss文件main.js.

有什么办法可以为我的webapp创建一个dinamic主题吗？使用saas是个好主意吗？可能是Javascript？

编辑

我觉得我没有足够好地解释它,所以我想添加一个简单的例子.如果您访问元素页面,您可以在右上角看到一个颜色选择器,当颜色发生变化时,它也会改变整个网站的重点颜色,如按钮颜色,链接颜色等.

希望这有助于更好地理解

编辑

现在我已经找到了一个非常差的,我认为,非常优化的解决方案.我们的想法是,当用户更改主题时,我只需创建一个新的css文件并将其附加到当前文档.

let sheet = document.createElement('style')
sheet.innerHTML = `*[class*="--primary"]{
                      background-color: ${colors[0]};
                    }
                    ...`;
document.body.appendChild(sheet);

我真的认为这是一个非常糟糕的解决方案,但是现在当用户更改参数时,我无法想出任何其他可以正常工作的方法.我真的希望这个过程是完美无缺的:用户选择一种颜色,整个应用程序只是更改为特定的颜色,没有预先构建theme.css.

最终编辑

我终于找到了解决方案,请参考答案!

Answer 1

最后,经过几天的漫长岁月,我想出了一个我认为既易于实现又非常轻巧的解决方案.

CSS VARIABLES

在进行大量搜索之前,我甚至不知道这些变量是否存在,而且它们似乎并没有被如此使用.无论如何,我希望这可以帮助那些寻求我同样答案的人:

<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')函数来修改它们.

我真的非常喜欢这种类型的设置,因为我在登录页面中使用它,所以当用户成功登录时,我从数据库加载他自己的颜色并将它们设置为就像那样.

希望这可以帮助别人!干杯!