ng-md-theme-loader 是一个基于 Node.js 的 npm 包，它提供了一种简单易用的方法来管理 Angular Material 主题。这个包可以自动检测主题文件夹的变化，使得 Angular 应用程序可以及时更新。
安装
在开始之前，我们需要安装 Node.js 和 npm。安装完成后，可以在终端运行以下命令来安装 ng-md-theme-loader：
npm install ng-md-theme-loader --save-dev
使用
1. 启用主题加载器
要使用 ng-md-theme-loader，我们需要在 Angular 应用程序中启用它。在 Angular CLI 项目中，我们可以通过在 .angular-cli.json 文件中添加以下内容来启用它：
-- -------------------- ---- -------
--------- -
-------------
-
-------- ----------------------
--------- -------------
--------------------- ----
-
--
------- -
-
---
--------- -
-------------
------------
-
-
--
-------- ------- -- ---------以上 Angular CLI 配置文件中的 "theme": "theme" 行启用了主题加载器。
2. 创建主题
我们可以使用 Angular CLI 来创建一个新的主题：
ng g @angular/material:material-theme blue
以上命令会在 src/app/ 目录下创建一个名为 blue.scss 的主题文件。在主题文件中，我们可以使用标准的 CSS 和 Less 变量来定义颜色和其他样式。
3. 配置主题加载器
我们需要在项目的根目录下创建一个名为 themes 的文件夹，并在该文件夹中创建我们的主题。在 themes 文件夹中，我们需要为每个主题创建一个新的文件夹，并将主题文件（如 blue.scss）放入其中。
在项目的根目录下创建一个文件名为 theme-loader.config.js 的文件，并使用以下内容进行配置：
module.exports = {
themesDirectory: 'themes',
mainTheme: 'blue'
};在以上配置中，themesDirectory 变量定义了存放主题文件夹的路径，mainTheme 变量定义了默认主题。
4. 集成到应用程序中
在项目的 src 目录下创建一个名为 app-theme.ts 的 TypeScript 文件，并在其中增加以下内容：
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------
------ - ---------- - ---- ----------------
-------------
------ ----- -------- -
------------------- -------------- ------------- - -
--------------- -------- ---- -
-----------------------------------
-
-在应用程序中，我们可以通过使用 AppTheme 服务来设置主题。
@Component({ ... })
export class HomeComponent {
constructor(private _appTheme: AppTheme) {
this._appTheme.setTheme('blue');
}
}5. 运行应用程序
运行应用程序时，ng-md-theme-loader 将自动检测 themes 文件夹中的变化，并使主题能够及时更新。
示例代码
完整的示例代码可以在以下 GitHub 存储库中找到：https://github.com/ng-md-theme-loader/ng-md-theme-loader-example
总结
ng-md-theme-loader 是一个方便易用的 npm 包，可帮助我们管理 Angular Material 主题。通过 ng-md-theme-loader，我们可以轻松地创建和配置主题，并将其集成到我们的 Angular 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626681e8991b448dfaed