什么是 ngx-theme
ngx-theme 是一个 Angular 应用的主题管理器，它使用了 Angular Material 库来构建，并提供了一系列的 API 和组件，可以让我们很方便地定制和管理应用的主题。其中的主题定义就是一组 CSS 变量的集合，可以应用到整个应用中。ngx-theme 还包含了一些常用组件的样式定义和封装，方便我们在应用中使用。
如何安装 ngx-theme
我们可以使用 npm 进行安装，使用如下命令：
$ npm install --save ngx-theme
如何使用 ngx-theme
引入及使用主题
我们需要将要使用的主题引入到应用中。首先，我们需要生成主题文件。在命令行下执行如下命令：
$ npx ngx-make-theme my-theme
执行完命令后，我们可以在项目根目录下看到一个名为 my-theme 的文件夹，其中包含了主题的定义文件和样式文件等。
我们可以将其作为 npm 包发布（npm pack）或上传到 GitHub 等托管平台。我们也可以在应用中手动导入该主题：
-- -------------------- ---- ------- ------ - ------- - ---- ----------- -------- ----- ----------- -------- ------- -- ------ ----- ------------ - -- --- -
这样就完成了主题的引入。其中通过 @Theme 装饰器来定义了该组件使用的主题名称和主题的定义（使用 extends 属性继承上面的 my-theme）。
使用样式
当我们需要在组件中使用 ngx-theme 中已经定义好的样式时，我们可以将样式名添加到组件的 class 属性中。在模板中使用类似 class="my-class" 的方式即可。我们也可以使用在 SCSS 中 $my-class 的方式来引用。
-- -------------------- ---- -------
------------
--------- -----------
--------- -
--- ---------------------- ----------
--
------- --
--------- -
-------- ---------
-
--
--
------ ----- ------------ --其中，我们使用 SCSS 的 @include 指令来引用 ngx-theme 中定义的样式。当我们在 SCSS 中使用 @import 'ngx-theme'; 指令导入 ngx-theme 的样式库后，就可以在 SCSS 中引用到所有的样式了。
自定义主题
ngx-theme 提供了非常方便的方式来定制主题，我们只需要在生成的主题文件夹中按照预定义好的规则修改即可。主题文件夹中包含了许多以 tm 前缀的文件夹，分别代表不同分组的样式变量。例如，tm-typography 文件夹中包含了与字体排版相关的变量。在主题文件夹中找到我们需要修改的变量文件，修改即可。
$tm-success: #66bb6a !default; // 这里将原来的颜色修改为绿色
自定义样式
如果我们需要在应用中添加自定义的样式，我们也可以将其封装成 ngx-theme 中的样式，然后在应用中使用。比如，想在应用中使用一个蓝色的按钮样式，我们可以将其定义在 ngx-theme 中：
.tm-button--blue {
@include mat-button-theme($mat-blue);
}然后在应用中引用：
-- -------------------- ---- -------
------------
--------- -----------
--------- -
------- ---------------- ----------- ------------------------------
--
------- --
---------- -
------ ------
-
--
--
------ ----- ------------- --我们定义了一个名为 tm-button--blue 的类名，该类名在 SCSS 中使用 @include 指令引用了 Angular Material 中的蓝色按钮样式。在应用中的模板使用了 my-button 和 tm-button--blue 两个类名，其中 my-button 定义了文本颜色。
总结
通过本文的介绍，我们了解了 ngx-theme 的使用方法和一些常见的用法。我们学习了如何引入和使用主题，以及如何自定义主题和样式。这对于前端开发者来说是非常有价值的。除了 ngx-theme，还有许多与其类似的库可供选择，前端开发者可以根据自己的需求选择最适合自己的库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ab81e8991b448d4b0d