Material Design - freeCodeCamp.org

How to make a custom theme in Angular Material

freeCodeCamp — Fri, 07 Dec 2018 00:37:26 +0000

By Charlee Li

Angular Material is a great library that implements Material Design for Angular 2+. The official document is sufficient regarding the component usages, while there are few articles about how to customize the theme itself, specifically, the colors used in the theme.

In this post I would like to summarize what I’ve learned these months from customizing Angular Material themes.

Note this article is NOT about AngularJS Material, which is used for AngularJS 1.x.

Some common posts about customizing themes are:

“Theming your Angular Material app”, the official guide for custom themes,
“The complete guide to Angular Material Themes” by Tomas Trajan, which provides many undocumented instructions. Strongly recommended.

I didn’t find other useful posts and would appreciate if anyone could provide some resources in the comments.

How to Create a Custom Theme

Creating a material theme is extremely simple: you only need to pick three colors — primary, accent, and warn — and Angular Material will do the rest for you. The material palette page explains how it works clearly, and you can also create a theme visually with Color Tool.

In regards to code, all you need to do is to create the following theme file:

// theme.scss@import '~@angular/material/theming';

$my-theme-primary: mat-palette($mat-green);$my-theme-accent : mat-palette($mat-amber);$my-theme-warn   : mat-palette($mat-red);

$my-theme: mat-light-theme(    $my-theme-primary,    $my-theme-accent,    $my-theme-warn);

Then you need to apply this theme in your main style.scss file:

@import "theme.scss";

@include mat-core();@include angular-material-theme($my-theme);

How to Use Custom Theme in Components

After creating our own theme, requirements like this will rise:

I want to create a text box. The text color, background color, and border color should all come from our own theme, not by hard coding.

This requirement is pretty common — anyway, being able to be used in components is exactly why we want to create a custom theme. The problem is how.

The mixin approach

The first official document I shared proposed a way of using SCSS’s mixin. I call it a “bottom-up” approach, which includes the following steps:

Each component defines a theme mixin, and retrieves colors from $theme parameter.
A global theme.scss defines the custom theme, then includes all the component theme mixins and calls them with the custom theme.

In addition to the theme.scss definition mentioned above, each component needs to create a theme file like this:

// src/app/comp-a/comp-a.theme.scss@import '~@angular/material/theming';

@mixin comp-a-theme($theme) {          // define mixin  $primary: map-get($theme, primary);  // retrieve color def  button {                             // apply theme to component    background-color: mat-color($primary);  }}

And probably you want a custom-theme.scss to import all the component level themes:

// src/app/custom-theme.scss@import '~@angular/material/theming';@import 'src/app/comp-a/comp-a.theme';@import 'src/app/comp-b/comp-b.theme';

@mixin custom-themes($theme) {  @include comp-a-theme($theme);  @include comp-b-theme($theme);}

Then import the above custom-theme.scss in your theme.scss:

// theme.scss...@import './custom-theme';@include custom-themes($my-theme);

This hierarchy works, and probably is the only way when you need to support multiple themes.

However, most of the time we only support one theme, and using a mixin could be cumbersome. Mainly there are three disadvantages with this approach:

Every single color reference needs a separate .theme.scss file.
custom-theme.scss must know exactly which components provide custom themes. This creates unnecessary dependencies.
Most importantly, component level theme files are not encapsulated.

The first and second points are pretty self-explanatory. Let me explain a little bit about point 3. This involves some background knowledge called “View Encapsulation”.

Angular uses a technique called “View Encapsulation” to keep component CSS local. In other words, rules defined for one component will stay in that component and will not affect other components.

In this way you can define CSS class name freely in your component without worrying about naming conflicts. However, view encapsulation is done only if the CSS is defined through @Component, i.e. @Component({ styleUrls: ['./comp-a.scss'] }).

As to our custom theme file comp-a.theme.scss, since it is imported directly by custom-theme.scss, its rules are not encapsulated so it will apply to all elements on the page. In the example above, I used the following code (which was WRONG!):

@mixin comp-a-theme($theme) {  button { ... }    // This will apply to ALL buttons!}

But this will apply the style to all the buttons instead of those buttons belonging to comp-a only. You have to do something like comp-a button in order to make this work correctly.

The direct approach

Therefore I propose a better approach. Instead of using a mixin, we let each component include the theme file and use the color definition directly.

In this approach, the component theme file will look like this:

// NOTE: just do this in your regular scss file.// No need to create separate theme file!// src/app/comp-a/comp-a.scss@import 'src/theme.scss';

$primary: map-get($my-theme, primary);button {  background-color: mat-color($primary);}

And that’s all.

Let’s see how this works. First, theme related rules are put into the component SCSS file, so no extra component level theme file required. Second, the main theme.scss does not need to know component level themes (since it does not need to import them), so a simple theme definition is adequate. Third, the component SCSS file is used with @Component so it is encapsulated correctly, which means we can simply define rules for button.

Predefined Theme Keys

Probably you have noticed the next problem. What are the foreground, primary in above theme files ( map-get($my-theme, primary))? Are there any other keys I can use?

Well these “keys” refer to different colors defined in the theme. However I could not find any documents explaining these “keys”, so the only way I could find out is to read the source code. (Although it is said that good programmers should read the code, having to read the code is definitely not a good sign for a library.)

Open node_modules/@angular/material/_theming.scss and you will see the definitions for these keys. For future reference, I would like to summarize the keys here.

$theme  |- primary  |- accent  |- warn  |- foreground  |   |- base  |   |- divider  |   |- dividers  |   |- disabled  |   |- disabled-button  |   |- disabled-text  |   |- hint-text  |   |- secondary-text  |   |- icon  |   |- icons  |   |- text  |   |- slider-min  |   |- slider-off  |   `- slider-off-active  |- background  |   |- status-bar  |   |- app-bar  |   |- background  |   |- hover  |   |- card  |   |- dialog  |   |- disabled-button  |   |- raised-button  |   |- focused-button  |   |- selected-button  |   |- selected-disabled-button  |   |- disabled-button-toggle  |   |- unselected-chip  |   `- disabled-list-option  `- is-dark         // bool, whether dark theme or not

For example, if you want to render a disabled text in your component, you may want to use the following code:

$foreground: map-get($my-theme, foreground);.disabled-text {  color: mat-color($foreground, disabled-text);}

Okay these are some lessons I’ve learned from struggling with Angular Material. Hope this post is helpful if you are facing similar problems.

How to create a prototype in record time with the Material Theme Plugin for Sketch and Vuetify.js

freeCodeCamp — Sun, 10 Jun 2018 23:58:55 +0000

By Adam Wattis

When developing an MVP (Minimum Viable Product), you intend to go from idea to prototype as fast as possible. The faster you can prototype your idea, the faster you are able to iterate upon it.

As you’re moving from abstract idea to working prototype, you usually don’t want to spend a lot of time creating a custom design when you should be focusing on the functionality of the application. To solve this issue, we use frameworks like Bootstrap to quickly achieve a structured layout with a UI that looks “pretty good” without too much effort.

What we really want to achieve, in terms of design, is to rapidly create a UI that is recognizable and coherent.

I’m about to show you a super fast way of going from abstract idea, to design, to working prototype with Material Design. Material Design is Google’s open source design system that they use for all their applications. This makes it recognizable because it is intuitive and easy to navigate, and most people are familiar with it already. If you haven’t already, you should definitely check out what Material design is all about.

By using the Material Design Plugin for Sketch, we’ll create our own customizable Material Design system. This will include a great set of components that will allow us to quickly create coherent designs for our prototype app. The app we’ll make is a simple reminders app.

We will use front-end framework Vue.js together with the Material Design component library Vuetify.js to realize our app designs. Lets get to it!

Creating the design system

Download this plugin for Sketch. Once installed, simply go to Plugins > Material > Open Theme Editor to see the Material Design Theme Editor. Click “Create New Theme”, and we choose to begin with the Baseline theme.

We are now presented with our Material Design system of Sketch components.

Your component library.

In the Theme Editor, you may change the primary and secondary color, change the font, change the shape of elements’ corners, and include custom icons. For this example, we will change none of these and just stick with the defaults.

We have now created our design system. As you can see, it says that the document is a library. This means that any changes you make to this Sketch file will affect your mock-ups and update all your designs with those changes. How great is that?

Before we continue, we will also install the Sketch Material plugin, which will add some modules that we’ll soon use.

Mock-ups

Let’s start by opening a new Sketch document then creating a new iPhone artboard and saving it as MaterialReminders.sketch. This is where we’ll create our designs for our application. But first, lets explore the rich component library that is at our disposal.

Under Insert > Symbols you should see the component library we just created.

Explore all the components in our library and imagine the possibilities!

Just so many components! We can now begin to create our designs. But first we must break down what functionality we want this reminders app to have. We’re keeping it simple and only adding the ability to:

Add a new reminder
Delete a reminder
Check off a reminder from your todo list
Uncheck a reminder from your completed list

Fantastic, let’s speed things up and begin dropping some components into our first iPhone artboard.

We start with a top navbar. Drop it in and place it then size it to fit the screen. We’ll have to change the first icon to an “Icon / Add / Filled” for the Menu Icon and change icon color to white. Then change all the other icons to none, since we wont be needing them. We also change the headline to Reminders.

Customizing for your needs becomes super easy with symbol overrides.

We’ll now start dropping in some dummy reminders. We’ll create our reminders like a list, so let’s find a suitable component. We’ll use “List / Single Line / Indent / Body 2”.

Now we will center the list object, take away the bottom divider, set the text to “Chores”, and lastly change the icon to “Icon / Checked Circle / Outlined”.

Add a title by inserting a text field, then using the Plugins > Sketch Material > Typography module to change the style to Subhead.

When selecting a text field and going to the Typography module you can click on a style to apply it.

It’s beginning to look pretty good so far! But we are now faced with a problem. We want to also include list controls to the right in each list object, because we want to add a delete button there. But the devs over at Google did not include any override for that in the Sketch component. No worries though, we’ll fix this by going into our library file and adding our icon to the symbol, thus updating it throughout our project.

Go to the library and find the list component we used in the Material Components page. Then, double click it to go to its symbol. Click the icon to the left so that it is in focus, then copy paste and move it over to the right. Done deal.

When we switch back over to our project, we can now see that in the the top right corner it says “Library Updates Available”.

Changes have been detected in the library. You may choose to update your designs with these new changes.

Now we should be able to change the right hand icon to “Icon / Close / Filled” which will be the button to remove a reminder completely from the list.

To create a list of reminders, we simply copy paste a bunch more list objects, change their text, then change the title that we added to Todo.

Todo list is complete.

Then we copy paste that entire list to create the Completed list. On this new list, you must change the title to “Completed”, then change all the icons to the left to be filled instead of outlined.

Select all the list items to change the icons to them all at the same time.

Were almost done with our mock-ups. To speed things along, I just changed our artboard color to #FAFAFA and added a “Shadow / 00dp” behind each of my lists.

Completed mock-up.

This mock-up view is now complete. The next one we need to create is the dialogue that appears when you press the add button.

We begin by copy pasting the artboard we’ve been working on to create an exact copy. Then, we use the Dialogue and Form modules under “Plugins / Sketch Material” to create a dialogue and a form separately. These are then combined and a opaque box is placed behind. I switched out the transparent action button in the dialogue to a primary colored button.

We are now done with Sketch. Of course, we could add more features and expand our mock-ups even more, but we will keep it simple for now. The next step is to write the code that will become our app!

Vue with Vuetify

Now to the fun part — coding. We will be using Vue.js which is a front-end UI library written in JavaScript. It’s really easy to learn, and checking out their website would be a first step. To implement Material Design, we’ll use the Vuetify.js component library which includes a bunch of Vue components along with a grid system to easily organize your layout.

We start by simply copy pasting the example markup that’s on the Vuetify starter page. Let’s look at what this does for us.

When looking at HTML, start from the outside and work you way inwards.

We have our and <body>dy> tags.Inside the <head> tag we have k> tags that` will pull in the required vuetify.min.css file and Google Fonts.


In the &lt;/body>; we have a 
 and within that we have some Vuetify components, for example -app> and , which are signified by the “v-” in their names.
Further down you have two