如何在 Aurelia 中动态更改项目主题

Question

我想更改我的项目主题 dynamically.I 创建了不同的主题文件，如 "Blue"、Red"、"Light"、"Black" 等。如下面的给定代码"light-theme.scss" 是我的主题文件，我在上面的 App.html 中需要来自 "ezmax-home-pages.scss" 的主文件。

基本上 light-theme 文件正在主文件中导入并更改项目 theme.Its 为我工作。但是有很多主题 files.I 无法每次手动更改主题文件路径。

我 google 找到了很多解决方案，但是 none worked.I 发现你不能在 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，因此您必须将用户样式 sheet 与源代码分开管理。否则，对于每个新客户，您都将被迫重新编译和发布。一个解决方案是拥有一个具有客户风格的存储库 sheets 并构建如下内容：

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;
    }
}

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

以下 link https://codesandbox.io/s/aurelia-dynamic-css-enrge?fontsize=14.

提供了外部样式 sheets 的工作示例

祝你一切顺利。

如何在 Aurelia 中动态更改项目主题

How to change Project Theme Dynamically in Aurelia

css

themes

saas

aurelia