css - 如何在 Aurelia 中动态更改元素主题

Question

我想动态更改我的元素主题。我创建了不同的主题文件，如“Blue”、“Red”、“Light”、“Black”等。因为我在“light-theme.scss”下面的给定代码是我的主题我在上面的 App.html 中需要的文件来自主文件“ezmax-home-pages.scss”。

基本上 light-theme 文件是在主文件中导入并更改元素主题。它对我有用。但是有很多主题文件。我不能每次都手动更改主题文件路径。

我用谷歌搜索并找到了很多解决方案，但没有一个有效。我发现你不能在 require 标签等中使用任何变量请告诉我的问题是否有任何解决方案。

 <require from="./assets/css/light-theme.scss"></require>
  <require from="./assets/css/ezmax-home-pages.scss"></require>

浅色主题

:root {
    --themeColor: #007ACC;
    --otherButtonColor: #26a69a;
    --cancelButtonColor: rgb(244, 67, 54);
    --themeBackColor: #F5F5F5;
    --themeElementColor: #fff;
    --themeAltColor: #f8fafb;
    --themeNormalColor: #fff;
    --themetxtColor: #000;
    --themeAlttxtColor: #8997a6;
    --themeDarkBorderColor: #D7D7DB;
    --themeBorderColor: #e8eaed;
    --themeDarkAltColor: #f0f4f6;
  }

我想采用动态方法，我可以通过从下拉菜单中选择主题文件名来更改主题文件路径，代码将更改我的主题文件的路径，并且元素主题会动态更改。

Answer 1

阿米尔。在您的情况下，由于您有用于捆绑的 webpack，因此您必须将用户样式表与源代码分开管理。否则，对于每个新客户，您都将被迫重新编译和发布。 一个解决方案是拥有一个包含客户样式表的存储库并构建如下内容:

themes = [
    {
      title: "default",
      url:
        "https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css"
    },
    {
      title: "cerulean",
      url: "https://bootswatch.com/4/cerulean/bootstrap.min.css"
    },
    {
      title: 'darkly',
      url: 'https://bootswatch.com/4/darkly/bootstrap.min.css'
    }
  ];

activate() {
    this.changeTheme(this.themes[0]);
}
changeTheme(theme) {
    const head = document.getElementsByTagName("head")[0];
    const itemId = 'css-sheet';
    let link = document.getElementById(itemId);
    if (!link) {
      link = document.createElement("link");
      link.id = itemId;
      link.rel = "stylesheet";
      link.type = "text/css";
      link.href = theme.url;  <-- here occurs the switch
      link.media = "all";
      head.appendChild(link);
    } else {
      link.href = theme.url;
    }
}

此示例通过从下拉菜单中选择主题来工作。在您的情况下，应该从客户的个人资料中推断出工作表的 url。

以下链接提供了外部样式表的工作示例 https://codesandbox.io/s/aurelia-dynamic-css-enrge?fontsize=14 .

祝你一切顺利。