动态更改我的 Vue.js SPA 主题的最佳方式？

Posted 2023-02-22

【中文标题】动态更改我的 Vue.js SPA 主题的最佳方式？

【英文标题】：Best way to dynamically change theme of my Vue.js SPA?

【发布时间】：2018-09-08 02:59:13

【问题描述】：

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

最终编辑

终于找到解决办法了，参考答案！

【参考方案1】：

最后，经过漫长的几天后，我想出了一个我认为既易于实施又非常轻量级的解决方案。

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 后调用中）我只是使用一个简单的bodyStyles.setProperty('propertyName') 函数来修改它们。

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

希望这可以帮助某人！干杯！

【讨论】：

这在 IE11 及更早版本中不起作用。对于即时主题更改，我使用 vuex + :stylecolor: primary 等。codesandbox.io/s/3no663nv6

@DenniLa2 很抱歉迟到了评论，但你是绝对正确的，最好的做法是开始使用 vuex，但为了时间和简洁，我选择了这个实现。

但是 Element UI 没有读取 css 变量，所以它不适用于 Element UI 或其他 UI 框架。

@sangelee 你知道如何在 element-ui 中做到这一点吗？