![]() ![]() Available pre-built themes are: deeppurple-amber, indigo-pink, pink-bluegrey and purple-green. Using pre-built themesĪs mentioned earlier, Angular Material already comes with a set of pre-built themes that can be used right out of the box. If you want to dive deeper into the whole color usuability story in Material Design, we recommend checking out the Material Design Specification for colors, as it describes the topic in very deep detail. Background - Colors used for element backgrounds.Used for floating action buttons and interactive elements. Accent - Also known as the secondary color.Primary - Main colors most widely used across all screens and components.While this might sound unnecessary first, it turns out that this is a very powerful setup to define themes in a very flexible way.Īlright, but what color palettes are needed to compose a theme? As for Angular Material, it boils down to five different color palettes with each being used for different parts of the design: That’s right, not just a single color palette, multiple color palettes. ![]() To be more specific, a theme is a composition of color palettes. The official theming guide is pretty much to the point here:Ī theme is a set of colors that will be applied to the Angular Material components. “Theme” can mean many different things to different people, so it’s good to clarify what a theme in the context of Angular Material means. In this article we’ll explore how theming is implemented, how pre-built themes can be used and how we can make our own custom components theme-able so they pick up the configured theme as well! What is a theme? The Angular Material project comes with a built-in story for theming, including using any of Material Design’s own predefined themes, but also creating custom themes that will be used not only by components provided by Angular Material, but also our own custom ones. This is often required when we build things that can be reused across different projects, or if the project we’re working on should simply enable the user to change the color scheme. Being able to use existing, or create new components, but easily changing their look and feel without changing their code. However, one thing that’s still super hard to do these days is theming. These tools are great and they solve many different problems in a very elegant way. Especially nowadays, where things like CSS variables and modules exist. This applies not only to the actual application logic, but also to style sheets. When building bigger applications, we always strive for flexibility, extensibility and reusability.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |