用Angular管理应用程序的主题

首先

在黑暗模式风靡流行的当下,实现黑暗模式有许多方法可供选择,但本次我们尝试使用Angular来管理应用程序的主题(背景、颜色)。

这次使用的应用程序大致是这样的。

    • Angular 9

 

    Angular Material 9.2.1

使用Angular Material进行颜色管理

image.png

设定调色板

image.png

请参考这个链接(https://material.io/resources/color/)来查看 Material 调色板。

image.png
image.png

创建用于更改的主题

image.png
image.png
image.png
image.png

当主题服务处理完事件后,将其发送到应用组件,并将相应的类添加到DOM元素中。这样就完成了。

最终结果将是这样的

image.png

总结

我介绍了Angular Material的主题功能。
您可以在Stackblitz上进行试用,无需进行设置,希望大家尽早尝试!
我们在Stackblitz上提供了本次的成品,如果您愿意,请参考一下!
(https://angular-crosscomponent.stackblitz.io/)

广告
将在 10 秒后关闭
bannerAds