我如何在没有 CSS 变量的情况下为我的 Angular 应用程序设置主题
我如何在没有 CSS 变量的情况下为我的 Angular 应用程序设置主题
您可能认为为任何 Web 应用程序设置主题很容易。 _
_你 __ 只需要使用 CSS 变量，对吧？ CSS 变量很棒。使用它们为您的应用程序设置主题要容易得多。
但 …..
如果您必须针对不支持 CSS 变量的旧版浏览器（例如 IE-11）怎么办？如果你不允许使用任何 polyfill 来让它工作怎么办！ 😦
前段时间我也遇到过类似的情况，这就是我如何使用 SCSS 的力量来为我的应用程序设置主题。
我们要建造什么？
查看下面的 StackBlitz。一个简单的 Angular 应用程序，当您单击页面时会更改主题。
Theming applciation demo
建筑模块
我们将在 Angular 应用程序中主要创建 3 个新文件。
主题.scss ** __ —** 该文件将不同的颜色定义为不同主题的 SCSS 映射。
主题-mixins.scss — 这个文件定义了所有可以在应用程序中重用的 SCSS mixin。
主题文件.scss — 此文件导入所有组件主题 mixin 并生成主题。
Flow map of how theme map flows between files to create a new theme.
首先，我们需要定义颜色。我们将使用 SCSS 映射来定义不同主题的颜色。 [优秀的阅读 这里 ]。
接下来让我们定义一个函数，它可以读取这些 SCSS 映射并从映射中获取值。当您将主题和密钥传递给它时，下面的 SCSS 函数只会获取值。
现在让我们创建一个名为 专题 . scss。 **** 该文件是项目中所有可主题化组件 mixin 的包装器。 【想想这是什么鬼？继续阅读]
可主题化的组件混合
这些是您的应用程序中需要主题化的组件。我喜欢做的是将 CSS 样式分成两部分。
基本款式 — 包含基本样式，如高度宽度等
主题风格 **** - 只处理主题。这是一个 SCSS mixin，它被导入 主题 .scss 文件 [啊哈]。
查看图标组件 堆栈闪电战 例如。
将所有可主题化的组件混合导入到 themeable.scss 文件中后，它看起来像这样
现在您可以使用 生成主题 方法来生成你想要的任意数量的主题。在下面的代码中，我通过传递 4 个不同的 SCSS 映射来生成 4 个主题。
将来，如果需要更多主题，只需添加新的颜色图并生成类似上述的新主题即可。十分简单 ！
好的！现在你完成了。您可以在应用程序中使用这些主题。你甚至可以动态切换这些主题
和 html
结论
尽管这会增加包的大小，但当您不想使用 CSS 变量或希望针对旧版浏览器时，这是一种为应用程序设置主题的好方法。这是一个简单、有组织和可扩展的解决方案，不需要任何额外的库来使其与 Angular 一起工作。
谢谢阅读。希望这可以帮助。 ！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
