angular 7全局变量_如何使用CSS变量为Angular 7应用创建主题

angular 7全局变量

In this post, we will build a super simple cryptocurrency listing app using Angular 7 and CSS variables.

在本文中，我们将使用Angular 7和CSS变量构建一个超级简单的加密货币列表应用程序。

目录 (Table of Contents)

• Design

  设计

• Project Setup

  项目设置

• Code

  码

• Conclusion, Repo, and Further Reading

  结论，回购和进一步阅读

设计 (Design)

Feel free to skip this section if you’re only here for the code.

如果仅在此处查看代码，请随时跳过本节 。

I designed this simple app using Figma.

我使用Figma设计了这个简单的应用程序。

配色方案 (Color Scheme)

Our color scheme is made up of foreground, background, primary, and error colors. Each color group has several lighter and darker variants of the base color.

我们的配色方案由前景色 ， 背景色， 原色和错误色组成。 每个颜色组都有几种较浅和较深的基色变体。

For our light/dark themes, the foreground and background colors will simply swap.

对于我们的浅色/深色主题，前景色和背景色将简单地互换。

组件 (Components)

Next up is to create the components. Since our app is pretty small, we only have a couple of components.

下一步是创建组件。 由于我们的应用程序很小，因此我们只有几个组件。

The nav component, which will let our user toggle the theme.

导航组件，它将使我们的用户可以切换主题。

The tile component which will display coin info.

将显示硬币信息的图块组件。

Putting it all togeth