Angular Material Theming Workshop (Advanced, 2021) | Dmytro Mezhenskyi | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Angular Material Theming Workshop (Advanced, 2021)

teacher avatar Dmytro Mezhenskyi, Learning is a key to everything

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

26 Lessons (3h 17m)
    • 1. Promo SkillShare

      2:14
    • 2. Creating an Angular Application

      6:22
    • 3. Add basic Layout

      6:22
    • 4. Intro to SCSS/SASS Language

      5:50
    • 5. SCSS Basics - Variables

      6:51
    • 6. SCSS Basics - Hash Maps, Lists, Each loop

      4:35
    • 7. SCSS Basics - Functions

      4:55
    • 8. SCSS Basics - Mixins

      3:09
    • 9. SCSS Basics - Modules

      5:39
    • 10. SCSS Basics - Selector Nesting

      3:55
    • 11. How to migrate Angular App from CSS to SCSS

      2:58
    • 12. How to migrate Angular App from LESS to SCSS

      8:03
    • 13. About Style Encapsulation in Angular

      5:59
    • 14. Theming - Init Custom Theme

      5:59
    • 15. Theming - Material Color System Overview

      17:57
    • 16. Theming - Adding additional Colors to the Palette (aka success, info)

      9:47
    • 17. Theming - Theming of Custom Components Pt.1

      10:31
    • 18. Theming - Theming of Custom Component Pt.2

      6:24
    • 19. Theming - Dealing with Typography

      15:09
    • 20. Theming - Implementing Dark Theme

      20:38
    • 21. Theming - Loading Theme on demand (Lazy Loading)

      11:43
    • 22. Theming - Elimination of unused CSS

      6:15
    • 23. Theming - Fixing bugs after refactoring

      3:13
    • 24. Theming - Density or how to shrink Component Size

      8:36
    • 25. Theming - Elevations (Shadows)

      7:13
    • 26. Theming - Overriding default Material component sizes

      6:24
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

34

Students

--

Projects

About This Class

In this 3-hours workshop you will learn how to properly create and extend Angular Material Theme in order to keep it consistent and maintainable. We will dive into source code and explore hidden features and tricks which are not even covered in official Angular Material documentation.

This is a 100% practical course which consists mostly from coding and very small pieces of necessary theory. New knowledge will be immediately applied to the real-live angular project, so you could use those tricks right away at your work and amaze your colleagues.

Besides theming you will learn basics of SASS language which is absolutely necessary to work with Theming in Angular Material but do not be afraid, you will not be overwhelmed because I will teach you only things you need in order to successfully complete the course.

Here you can see the list of main features you will learn:

  • How to migrate from CSS3/LESS to SASS;
  • Understanding of Material Color System;
  • Extending of Color Palette with additional colors (success / info);
  • How to theme your own components;
  • How to implement Dark Theme;
  • Configuration of Typography;
  • How to optimise theme bundle size and lazy load theme;
  • How to deal with density;
  • Proper overriding of default Material sizes, values etc

I wish you good luck and I would be happy to see you at my workshop lessons.

Meet Your Teacher

Teacher Profile Image

Dmytro Mezhenskyi

Learning is a key to everything

Teacher

Hello, my name is Dmytro. I have been working as a Lead Frontend Developer. I started to build my first projects in 2012 and since that time I have been constantly learning new technologies and working on different complex projects. Since March 2020 I have been running my YouTube channel and back then I had realised that I really enjoy to teach cool things people around the globe.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Promo SkillShare: Hi. So you have chosen Angular material as your design system. That's the great choice. The next step would be to adjust the theme according to your brand style. And if you already tried to do it, you might notice that it couldn't be not so easy as it seems, a lot of default things needs to be overwritten, kept consistent. May be you have to adjust colors and extend your palette with custom colors like success or info color and many other things. I know it because I did it many times and many times I have failed. So my CSS and my styles start into the mess. However, I learned a lot from me. It's old, It's why I created this more than two hours workshop in order to help another developer teams avoid my mistakes. This is the result of my experience and source code investigations which exposed me a lot of hidden tricks and features, which eventually helped me to keep my thing styles consistent, lean, and maintainable. My name is Mitchell Minsky and already nine years I had been working as a front end engineer and also run my YouTube channel decoded front-end. In this workshop, you will learn the basic features and syntax of SAS language. And also we will cover the next thymine concepts like colors, typography, custom component theming, overriding defaults, dark theme implementation, bundle size, optimization, density, and many other things. For this workshop, you should not be an expert in Angular. However, you have to have some basic experience with Angular and Angular material library soul enroll right now to explore the whole power of Angular material thinning and see you on a workshop lessons. 2. Creating an Angular Application: All right guys, let's get started. And for these masterclass, we will definitely need some obligation. So let's quickly created. And the easiest way to create application in Angular, it's using the CLI, right? So let's install Angular CLI and create a new project with it. So from official page of Angular CLI, which is cell I dot angular dot IO. You have to copy these first command and then you have to go to your terminal and paste this common there and just run it. It will take some time to install it. All right, it looks like my NPM version is outdated, so I will quickly updated. So here we go. Now I can clean up my terminal and I just run NG minus-minus version in order to be sure that my Angular CLI has been installed. Then I can run NG new comment and give some name to my application. And then I just have to answer a couple of questions. We don't need Angular routing here. Basically, you can choose any pre-processor, but in the end we will end up anyway with SCSS. But I will choose the pure CSS because I want to show you how to migrate from pure CSS to SCSS and how to migrate from last to SCSS. But as I said before, ultimately we're going to work only with SCSS. So yeah, let's move forward and wait until Angular CLI install all dependencies and will create all the necessary files. Once project has been created, I can navigate to the folder and open this with any code editor I will choose VS Code. You can choose whatever you like. Here is our project. Just let me zoom in on it a little bit. Yeah, and as you can see, this is completely empty NLRB project. I hope that nothing surprises you. And now let's add our end goal, our material library. So I will use the command nc, add and then Angular material. And this common, we'll use some schematics in order to properly install the Angular material to our project. It will update unnecessary files in glued, unnecessary code and things like that. You will see this in action in minute. Here we are being asked which theme we want to install, and you can choose any of these, but in the end, we will be using the custom one. But as I said before, I want to show you how to migrate from pure CSS to SCSS files. And that. And that's why I will choose just the first option, which is indigo being, alright, there's global Angular material. Typography styles means that Angular material already comes with predefined typography styles for different tags like H1, H2, H3, paragraph and so on. And if we choose yes, these predefined styles will be applied to our application. Otherwise, you will need to do it explicitly if it's new project and you need some predefined styles, then y naught, yeah, you, you can choose, yes. Then just wait a little bit until all dependency will be installed. And after these, we see that Angular CLI modified six files. So let's have a look what was changed. So I open App Model Ts and we can see that there were imported animations model. Then inside style CSS, we have some global styles which were set up. Inside. Index, HTML was set up. They biography, in particular, font Roboto, and material icons as well. And also Angular CLI has added Matt Daesh topography class. It is related to that option where we were asked if we want to set demographic globally. So, so every tag like H1, H2 and paragraphs and so on, which are children of bodies. So technically everything will get the predefined classes from Angular material theme. In package JSON, they were added two dependencies and will our CDK and we'll learn material. And the Anglo material depends on angular CDK because it utilizes this under the hood. And the last but not least, Angler JSON file. This is the config for our whole Angular application. And if we scroll down, we will see that inside styles RA, they were added, their pre-built theme which we have chosen. This is actually the place where you can include some global styles. As example, if you have some styles from third party library, these styles property is, uh, these styles arrays a good place in order to include such third-party styles. Okay, and this is pretty much it. Now we can run our obligations by running npm run start. And after some quick compilation process, you will be able to see application like this. And here if we try to investigate this Resources, heather us example, you will be able to see these already much typography classes which were applied to this age two. So this is exactly that global typography styles in action. Okay, I hope it's pretty much clear so I can close the console for now. And that's it for this lecture. And let's move forward and seal in the next video. 3. Add basic Layout: All right guys, Let's continue a masterclass. And in this video we will create some layout for our obligation and add some Angular Material components. So let's get started. First of all, I would ask you to install the next console extension for your VSCode. This extension provides you just nice graphical UI for Angular schematics. And this is not strictly necessary, but this extension just simplifies their creation of components, models and so on. Then if you need to generate some modal component or whatever, you just do, right-click on the folder way. Want to generate this component and select this annex generate here I just say that I want to generate the angular model and I'm going to generate their shared material model, which we'll be exporting material Morris, which are required for this application. Then I say that these models should be also automatically imported into the model. Fled means that we don't need any folder for this model. And then I just press Run button and it will generate the angular model for me. So here we go, and you can see that it was added to imports array inside the App Model Ts file. Now I'm going to import all unnecessary material models which we are going to use. And of course I'm going to export them. So it is going to be rigid model, this widget model. It just exports some certain models to external NG model. So model which imports our widget model, get access to their models which we declared inside their exports array. So only because in this application we will have only one model which is abnormal. I import these shared material more into ABC model. But in reality application you should import this shared material model into an model which uses some Angular Material, components, features, and so on. It is not strictly necessary, should be abnormal. So I hope you understood the idea. Now let's go to template for our app component and to remove everything which was auto-generated by Angular CLI. And because these master class is not about entire Angular Material components and things like that, we're focusing only only on the theming. So I will just grab some templates from Angular material website and will not be focusing on this because Angular Material components will be the topic for and now they're separate master class. All right, Then just removing unnecessary things from our template. And let's move forward. If you're wondering what I have done just now. This thing called M and these functionalities built in, into VS code, just Google for VS Code Emmett. And the first link will lead to the documentation page. And you can find out more about these, but this is really cool thing and it can drastically increase your productivity. So I press tab in order to generate my sections. And then let's go to angularjs documentation and grab some templates. Let's copy, select or dropdown. So this control will be responsible for and also selecting of the sort options. But it doesn't really matter for this master class. And then next to select and want to play some button. So I copy it here and just paste it. Let's name it as a sort. And then I just need some, I don't know Card. So let's go to appropriate page and grab it here. Okay, And now I would suggest you to go to our app component CSS file and add some styling. Okay, let's try it out and check how it looks like and a little bit too big cart. Yeah. Then we have to add some space between Sort button and our dropdown. Then I want to end our type of shrunk down and I don't want this gray background. And also if we have a look at the toolbar, we see that it has gray. I would like to have some primary color and also shared icon should be sticked to the right side rather than stick to their side name. So let's fix it. First. Let's set the color primary for our mud toolbar. The colors think we will cover in a separate video. So I will drop explanation for now. So let's move forward and then we have to fix their current size inside style scientists define the maximal weights for this card to a 120 pixels. I think it should bend up. Then for our dropdown, I will remove this appearance feel in order to have the standard design for our dropdown. And instead I just add some class and I call a drop-down. And for the drop-down and just add some space from the right side. Then, as I said, we have to push the share icon to the right side. So we have to add some styles for our spacer by wholesale appropriately flags to 11 out. So it will push their icon to the right. Or I had looks good. This is going to be our template we're going to work with. And I think that's it for this lecture and see you in the next one. 4. Intro to SCSS/SASS Language: Hello guys, welcome to this lesson. And before we start to do anything, we have to learn such a thing called SAS. If you are already aware what is SAS? And you feel that you are very experienced in this topic. You can, of course, skip this section, but it is always good idea to refresh your knowledge. However, if you see this thing first time, I would highly recommend you to finish this section before to start with Angular material theming. So let's get started. And let's start with two crucial questions. What and why. So what is SaaS? Saas is extension language which has been compiled into CSS. This land which kind of extend their pure CSS. And it introduces such a features like variables, lobes, functions, Maxine's models, and a lot of another things. This definitely allows you to make your styles more maintainable and is it to extend? And the second question is why? So why do we need this language? It is because Angular material library uses SAS as a language for its styles. So if we're going to smoothly extend the Angular material themes, we have to speak the same language. That's why we need to know some basics of sas language. And in this section we will learn the essentials of SaaS. So we will learn only necessary things which are required in order to configure our Angular Material Theme just in order to avoid some magic moments in the future. And in order to start, we have to install the SaaS, right? So we go to the installation page and we see that we have a couple of ways how to install with npm. And we also can use brew if you use also MacOS then, but I will choose the easiest way and install it with npm install. So I type npm install minus g SAS, where minus g means that we installed this package globally. And in then you should see something like this empty furan SAS dash, dash version. You should see the version of SAS which has been installed. Let me just quickly go out from our Angular project. And then next to our existing and our project, I'm going to create a folder SAS playground. And there we will be testing our SaaS and see how it works. So let's open this folder with spheres gold. Let's get started with creating the index as CSS file. The first cool thing about SCSS is that the pure CSS, it's a valid as CSS code. So we can write just pure CSS like this, and then we can just compile it. We just type sas as the first parameter. We define the file which we want to compile. So in our case this is index SCSS file, and it shows us the compiled version. It is not really handy to print this inside the terminal. It would be better to write this valley in some output file. So as a second parameter, you can define the file where this output will be written. So in our case it will be indexed dot CSS. Now if you run this command, you will see the generated in the CSS file where we see pretty much the same code, right? Also you may notice that this is quite inconvenient to compile SCSS every time we change the code. So you can run it in the wash mode so you can add just dash, dash watch to our comment. And SAS will be listening to the changes and recompile this everything automatically. So if I add the display block new property, then we will see that everything was automatically recompiled. Another thing that you have to know about SAS is that it has two alternative syntaxes. The first one, you have seen this SCSS, but it also has the SAS syntax. And if you rename your index SCSS to index dot SAS, you can write the CSS classes without curly braces and semi-colons. So this is what you see is a valid Sass syntax. And if you try to compile this, you will get the same result. Oh yeah, I change it to red and it was successfully recompiled. But I will revert everything to SCSS because I find this syntax more pragmatic because yeah, it's very easy to migrate from CSS to SCSS. And the second reason is that most of the libraries written with SCSS syntax, including their annual or material. So we will be using this syntax as well. All right guys, that's it for this lesson. And let's move forward and explore and other features from SCSS language. So I'll see you there. 5. SCSS Basics - Variables: Hello guys, welcome, and let's continue to learn SaaS language. In this video, we will learn what is variables in SAS. So let's go straight to the point that the first thing you have to know about Sass variables is that this is not the same like CSS variables, right? Because CSS3 has its own variables and SAS variables are not being compiled into CSS Variables, Yeah, it's completely different thing In SAS, variables are being compiled into valorous you assigned actually there. So as example, you can see that we're using the red color for our background. And it is highly likely that we're going to reuse this color in another classes. So it makes sense to extract this color into the variable. And in SAS, variable is being created with the dollar sign at the beginning and then the name of this variable. Then after the semicolon, you can assign their value to this variable. It might be, this, might be the number, it can be literally everything. Then already inside some class. And instead of hard-coded color, we're going to use just a variable. And now if I change the value of my primary color variable, you can see that our CSS, we're recompiled and now we have background color green. Also the value of some certain variable can be another variable. So if we create another variable called like green color, and then we assign this variable as a valid for our primary color, we will get the same result. I hope this is pretty much clear. It is really very straightforward, but what involved the variable scoping? So now we define our two variables as a global ones. But what do you think will happen if we move the declaration of our primary color variable inside the body blog. And then we will create as example, the panel class. And we'll try to access these primary color variable there. So as you can see in this case, we have an error which says that this is undefined variable. So the conclusion we can make from it is that variables in SAS there are block scoped. So it means that the variable will be accessible only within the scope where it was declared. Or if we define this Globally like we did it for green color variable, then we can access it from any blaze. However, if you encountered this situation when you need to declare some variable inside the blog, but you want to have it available globally. Then you can use the exclamation mark in the end and keyword global. And it will make this variable available globally. So you can see now if I save the changes, our styles has been compiled successfully. All right, now let's try to revert our changes. And let's have a look how variables behave when we tried to rewrite the value of the variable somewhere in the middle of the cold. So you can see that the old value, which is green, has been used and deal, we override this value on the line nine. And the court which goes after line nine, it already gets the value red. And this is the biggest difference between CSS variables and SAS variables because css would use only one valid, the latest one. So with CSS variables, we would get the red color everywhere also for body and for panel. And in SAS variables behave as you see a little bit differently. As I said before, the value of the variable can be anything also null. But with now, you should be careful because if some CSS property gets then now barrier, it will not be compiled. So if we run the code as a d is, we can see that only body display block has been compiled because our background color gets the null and the color property for our panel class also will be now SAS. Smart enough to understand that this is the empty panel glass and it removes it completely from the end output. And in the end, we will get only body with display block. The next feature you have to know it's dead. You can concatenate variables. So let's create a variable called I don't know. So fix and their signs some string value or like decorator. And I can concatenate this string with the panel class as example by using the hash and then curly braces. And between curly braces I just place this suffix. And now you can see that decorators drink was attached to the panel class and we got the Bangledesh decorator class. So it allows you to dynamically create the class names as well. This can get the nation you can use pretty much everywhere. Not necessary should be the lastname, but you can also dynamically generate property as well. You can concatenate this suffix variable with the background and it will compile by ground. They're small, which makes no sense because yeah, CSS doesn't have such a property. But this is just an example which shows that you can use concatenation pretty much everywhere in SAS. Also, you can define your variables as default and it will allow another developers to override your variables. But we will see this feature in action in the next video about morals. So I will leave this question open so far. Okay, cool. So this is pretty much everything I would like to tell you about Sass variables. So let's move forward and see you in the next video. 6. SCSS Basics - Hash Maps, Lists, Each loop: Welcome, Welcome guys. And in this video we'll have a look at the data structures which are built in into SAS language, which called lists and HashMaps. Lists in SAS are very similar to arrays which we are using in JavaScript. And you can define the least by separating multiple values by comma. In order to create a HashMap, you have to use their apprentices. And inside you can define some, any key and then the value for this key. Now let's have a look how we can read the values from these data structures. Let's get started with the list. In order to read values from least, you have to use the built-in function and DH. And then as the first argument you have to define the least value are you going to read from? And the next parameter, they should be their index of this element. And this is that strange case when the count in array starts from one. So you have to start not from 0, but from one to get the first element like small and index was valid to, to get this medium value and so on. And then in order to read the value from HashMap, you have to use the built in function map Daesh get, and then you have to do pretty much similar thing. You have to define the HashMap and the key which you want to read. So in our case, we're going to read key medium from the HashMap called elements sizes. And then if I change it to large, I will read the appropriate value. Alright, now we know how to read values from HashMaps and lease. Now let's have a look how to read this values in loop. So SAS language has built in each loop, it looks like this, where this size is some particular element of the list, right? During the first iteration, there will be small during the second medium and during the third iteration there will be large. And after the keyword in, you have to define the actual least values you are reading from. An oldie then inside the loop body to define the CSS rules which should be generated inside this loop. So now let's replace them in the age function with just a science variable. And also inside Mab, Good function instead of hard coded medium value, we place also our size variable. So it should generate three panel variants like Ben all small bundle may have been a large and big appropriate width from our element size HashMap. And you can see the result right there. Now let's have a look how we can read values from HashMap in the loop. It is very similar to reading the list, but besides values, you can also read keys. So having key and value, we can generate similar three bundle classes using only our HashMap. So let's reuse the CSS from their previous loop and slightly adjusted. So inside the size, I pulled the key. So during the first iteration there will be key small and inside the map get function which displays the value there. And this is going to be the value of our small keyword. And then it goes to there, medium, 300, large by 100 and so on. And ultimately we're getting the same three variants for our panel class, but using only the HashMap. Also keep in mind that SAS language has another loops like four and vile, but we're not going to use them in this particular master glass. So I drop the explanation of this loops. But you can always go to the documentation of SaaS language and have a look at the implementation there. And this is pretty much everything I would like to mention about this particular topic. So let's move forward and see you in the next video. 7. SCSS Basics - Functions: Hi there. In this video, I will show you how to use functions in SAS language. Functions are very, very useful tool if you're going to calculate some values and as example, paddings or colors and so on. And if you want to create a function, you have to ride at sign, then keyword function, and give some name to this function. In my case, I'm going to name it like custom color function. Pretty much similar, pretty much similar like usual JavaScript function, right? And usually functions return some balance, right? So let's dive at return. And there we define the value for which this function should return. In my case, I just fade out black color and it's going to be 10 percent faded out, whatever. Then in order to call this function, and in order to trigger this function, you just have to call it like this. Sorry, Hi, made some mistake. We should define the second parameter for the fade-out function between 01. I will fix this back right now. And now you can see that our Blake color was first converted to RGBA and added opacity 0.5. You may say, and I would agree with you that this function not so useful, it would be way more better if this function could accept some parameter. So this is possible, and this is how you can do it. You can define the parameter like regular variable between parenthesis and then use this value inside the function. So now if I bought this primary color variable as an argument for my custom color function, you will see that it was recompiled. And now our primary color, which is green, is being used. Also sometimes you want to have some predefined value. So you can call the function without parameter, but automatically will be assigned some valid the color variable or color arrogant. So in this case, you can assign the default value like this. Good. And of course you can do a bit more sophisticated thing. You can use conditions like if else inside the function. So let's do some easy check. I don't know if color equal to black, we're going to return then the current color CSS variable otherwise will be returned faded out color. So yeah, now you see that our body selector has a color, current color, and if I change it to primary color, will get faded out. Primary color. Cool. And now how to deal with the case when you don't know how many arguments your function takes. So let's assume that we want to have some function called sum. And this function can takes multiple arguments and then return the sum of these numbers as example. So in this case you just have to define a variable. In my case it will be dollar numbers. You can name it whatever you like. And then after the variable name you should add three dots. Likewise, the spread operator in JavaScript, but three dots goals after the variable, not before. Then we can define some initial value for sum, and now we have to add together numbers. So if you take the function arguments like this inside the numbers, you will get at least. And we already know how to work with lists. We can use already familiar each loop. And then inside this loop, we can add together all numbers. So total sum, right? And we can return this value. Then let's say we want to calculate some bedding for my body, right? And I can call this sum function and then provide any amount of arguments I would like. And then I will get only the ductile sum, which in the end will be generated inside the output file. So in our case, this is the 160 pixels. So this is pretty much it, more about functions you can find on the SAS documentation, and that's it for this particular lesson. So let's move forward and see you in the next one. 8. SCSS Basics - Mixins: Welcome back guys. In this video, we're going to learn very simple but heavily used feature in SAS language called mixins. Imagine the situation that we have multiple CSS properties leg these blue blog bedding and know some box sizing, right? And then we have another class which also uses the same set of properties. So we definitely don't want to repeat ourselves and we want to reuse this pieces of code. This is where mixins can help us. If you want to create a vaccine, you have to dive at Maxine them, give some name to it. And then inside the body you have to define the CSS which you're going to reuse. Then the only thing you have to do is to include our mixin inside the class where you're going to reuse this properties. So I will include it inside a body and my header class. And once we recompile our CSS class, you will see that the properties were included into the body and header class. But we see some small issue. You can see that our functions were not executed and just printed like a string. It happened because we define our functions after we call them. So in order to fix this issue, we just have to put our functions before we call them. Now after recompilation, we see the correct result. You might also notice that the call of the mixin very familiar to functions. And it looks like we can pass some variables between the parentheses. And you are right. We can do it. And we can do it absolutely the same way how we did it for our functions. So yeah, I can pass them primary color and then read it inside my mixin. And also the same way I can define the default values for my variables. Until now were used only CSS properties. But what if you want to reuse the whole classes? We can do it as well as mixins. So let's just create a new vaccine. And inside I will just define some common class which has only one property display inline. Then you can just include the mixin on the root level. So not inside some class or another CSS rule, but just inside the root level. And if we save this, we will see that common class has been rendered. Of course, besides variables you can use inside Mixins different, I don't know if else conditions. You can check if variable is in line true, then you can render this common glass was display inline otherwise will be rendered nothing. So yeah, if I change it to false, we will see that our common clause, it has disappeared. Alright, against this is pretty much everything I would like to show you about Mixins. Yeah, very simple feature, but really, really useful. Let's move forward and see you in the next video. 9. SCSS Basics - Modules: All right guys, we're finishing this section involves as language there, reminding only couple of things. And in this video we will have a look at SaaS models. So let's have a look at our code right now. As you can see, we're keeping everything inside one file. So all variables, functions, Maxine's styles, everything inside one file. And if it is not the best solution, if you have bigger project than this one and have to maintain it. So it would be better to split everything into different models. So we can create the file called variables as CSS. This is all our variables are going to leave. And then we will create the mixins dot SCSS file, where we will be storing our functions and mixins. Now let's go back to our indexes CSS file and copy all variables, our HashMaps and lists and put it inside a variable says CSS file. Then we go back and copy all our functions and mixins and also copy them inside the mixins SESS file. Let's clean up this commented out code. And if we say our index file, we will see the error. And it makes sense because SAS doesn't understand how we should import these models, right? So let's invert them. The first way how you can import modules, it's using at import keyword. And then you have to just provide the path to the file you're going to import. So in my case it's going to be variables. And the same way we'll do for mix-ins file. Now you can see that everything works fine. But this way of importing more Bruce has some drawbacks. And the most important of them is that everything loaded by this import will be globally available. So you have to use some prefixes to your variables and mixins because it is easier to have their name collision and some variable can be overwritten by variable from another file. And the second drawback is that the code inside the file you're going to import will be executed every dime when you import this file. So let me just show you one example. Let's say we have some styles inside our variables, right? So let's create this desk selector. And then inside the index SCSS file, I will import our variables file three dimes. And now after compilation, you can see that the desk glass was included three times inside your compiled CSS file. So it introduces the huge risk of increasing of the bundle size or your styles. So that's why I would recommend you to use another way. And I'm going to show you it in a second. Let's just clean out things. And now instead of import, I'm going to use US rule and this rule and forces you to define some namespace for this import. And you can define it by using keyword As and then the name of this namespace. In my case, it's going to be variables. Then in order to access the variables which you are imported with this use rule, you have to use the namespace and then dot, and then the name of your variable. And the same way you can access your mixins and functions as well. So we're going to define the namespace mixins. And via dot I can access my custom color and common mixing. What is also great regarding these cus rule is that it imports things only once. So if I import my variables three times, then I will go to variables and to revert my desk glass and also give some different namespaces to my variables, SPSS. You will see that our desk glass has been included only once. Cool. So let's quickly revert back. If you remember in the video about variables, I mentioned that variables has such a thing called default. So these default, the ink allows to override the variable during their import to let me show you. So right after the namespace definition, I can use keyword with and between parenthesis, I can say that use this green color variable, right? But instead, it's default where their use some, another value or like light green as example. And yeah, now you see inside the body for background color, we see light green instead of just a green color. And if I remove this US, we can see that everything was reverted to the green color. So now you know how to create models in SAS language and how to import them. And models are really great thing which makes your code way more maintainable and cleaner. And this is pretty much it about this topic. So see you in the next video. 10. SCSS Basics - Selector Nesting: Hello guys, welcome to this lesson. In this video, I'm going to show you how to perform nesting in SAS language. So let's say we have the header class and we want to apply some styles to its child elements or classes. And usually we are doing something like this. So we write header one more time. Then next to it we define some selector like H1 in my example. And then we already define the styles which should be applied to this child selector. But with SAS, you can do it a bit more obvious way. You just define this selector inside the parent's block. So like this, I define H1 here, and only then I define the styles for my H1 element. Yeah, and now you see how it was compiled. But what if I would like to add some, I don't know how our effect for my H1. So it's kind of a little bit tricky. Yeah, it's not a nesting, so it's somehow happened on the same level. So in this case you have to ride inside the h one elements, styles, the at sign, and already then you can define the hover selector and styles for it. So this nt sine works like a reference to the closest parents react to our H1. So if we save it like this, you can see that it was correctly recompiled. So the same way you can concatenate the H1 and some class like child, right? So it will allow you to make your style a bit stricter. Yeah, So in our case, display inline-block will be applied only for H1 element which has the child class. So as I mentioned, the sign works like reference to call this parent. So it means that if I define the hover selector inside the child, this enzyme will be a reference to the child class, not to the H1 anymore. Alright. I hope it's somehow clear. Yeah, I hope it's somehow clear. Then sometimes you need to generate some styles at the root level, being in the context of some child. In this case, you have to use the rule called ADH at root. And then you define the glass which have to be rendered at the root level. And then as usually you define the properties, CSS properties for it. If we said right now you can see that our roots styles were generated at the root level instead to be the child of the H1 element. To be honest, I doubt that we're going to use this rule in our master glass, but it's good to know. And it can be useful for some complex mix scenes. Or as example, if you define some variable inside the, let us define some variable inside our header class. Yeah, this one color. And we don't want to make it global. But let's imagine that there is a one selector which needs to read this variable, but the style should be emitted at the root level. In this case, you can easily use this at root rule and we can read our color variable, but it will be emitted as you can see at the root level. Yeah. All right. I guess now we know everything, what we need in order to proceed with our master class. So let's finish up this section and see you in the next one. 11. How to migrate Angular App from CSS to SCSS: Welcome to this lesson. So let's get started with and a lot of material theming. As we know from previous lessons, and a lot of material uses SCSS language in order to ride this styles. However, we are not always getting the project which uses SCSS. Very often we get a project which uses and other preprocessor like glass or just pure CSS. And in this video, I will show you how you can migrate from pure CSS to SaaS language. And if your project uses just pure CSS, it is pretty straight forward dusk. You have to just change the extension for your styles and you have do it for every component as well. Then also have to go in every component and change the file extension from CSS to SCSS. And then also have to open their Anglo or JSON file. Scroll and Neil bid down. You have to find a place where you include your global styles and also a chest that file extension. So I change it here. And if you'll scroll a little bit down, there will be another place where we include global style. So we are configuring here the desktop environment. So when we run fast, we also want to include styles SCSS, otherwise, our tests will fail. And then the last but not least, we have to scroll at the very top. And inside the schematics, we have to configure their style property for our angle, our components schematic. So once we generate the new component using schematics, we want to have by default, SCSS extensions for our styles. And this is pretty much it. You have to just restart your project. And you can see and rsync works fine. So we can navigate to app component SCSS file. And because it is already assess language, we can introduce some variable and use it inside our content class. Let's change the value from 20 to 200 million to better see the changes. So yeah, let's reverse this changes. And this is pretty much it. As you can see, this is Burberry simple because SAS language, and in particular this SCSS syntax is fully compatible with pure CSS. So that's why we can degrade from pure CSS to SaaS. Very, very easy. This is pretty much it. So let's move forward and see you in the next video. 12. How to migrate Angular App from LESS to SCSS: Hi there. Welcome. Unfortunately, mostly we're not working on the Greenfield projects where we can pick their proper technologists, proper architecture and things like that. Usually we're getting already the project which is being actively developed. So you can get a project. We already predefined CSS preprocessor, which is less US example. And unfortunately these brew processor is not compatible with sas syntax. So we have to migrate from less to SCSS syntax in order to use the whole power of Angular material library. Here I should be honest with you, there is no some universal tool or a recipe which can give you 100 births and going deep to that, you can save lead translate your record base from last language to SaaS. And this video is not silver bullet as well. However, here I would love to share with you some strategies and tools which can help you to achieve this goal. So let's get started and first fall, let's switch to the last protests are okay, let's get started. And first poll, Let's switch our project from SaaS tool less for now. So I will change the extension for my style files. All right, then I have to adjust their file extension inside every angler component. Once I have done these, I have to jump into Angular.js JSON file, and I have to replace the whole entrance of SCSS to less. Here we go. So it should be enough and now we can restart our obligation. Alright, and it was compiled successfully. And now we can go to our app component Less file. And because it's already less syntax, we can introduce the new variable. In last language you'd have to do is add ten then name of the variable and it will give some color. And then I will be using this variable inside my condemned class. And if we check our changes in the browser, you can see that our content got this light gray color, which actually comes from our variable we defined. So we've successfully set up they're less language in our project. So now let's talk about the strategies. How are we going to migrate from less? And the first tool I would like to show you is called lasso tool SaaS. This tool you can find in NPM. And the first warning is that please keep in mind that this tool is not perfect. It doesn't do everything automatically. You have to do some manual work. But still it can simplify your work, especially if you don't have something sophisticated in your less caught. So let's try to install globally this baggage. Just run npm install minus g less or Sass. And then you can type less to SaaS. And there you can define the folder which these tools should scan. And once it finds their file with the extension less, it will translate the court from less to SCSS syntax and create the output file, which has the same name but with SCSS extension. And now if we open our app component SCSS file, you can see that the variable inside the Less file was converted to the SCSS syntax and everything works fine. However, I would recommend you to read carefully there, rid me of this tool, especially pay attention on key beats. It says that you have to bear tension on galore functions because they are not really converted. And we need to do it manually. And also it doesn't support their proper sass syntax, but we don't need it. Fortunately. And they say that it might be baggy now. So unfortunately, you have to carefully check this error scene. And now let me quickly show you what exactly the problem we scholar functions. Example less has such a built-in function called fade-out, which takes an argument, a color, and add some opacity to this color. So let's decrease our basmati just 10 percent. And you can see that our color was transform first to RGBA and there was obesity at 0.9 edit. Now let's try to run again. This last tool says Tool and let's see what the output is. And you can see that fade-out function was not executed, so it was just dropped and there were used on just the color variable. So this is exactly what they meant by saying that it's not really convert color functions. So pay attention on this. All right. Sometimes you may have really sophisticated list files and the output of these tools less to SAS might be wronged. Saw in this case, I would suggest you to use another strategy. So you can install the OS globally as a npm package. Then you can manually compile this problematic file. And the output of this command, which is pure CSS, you can write down into App component SCSS file. So in this case, inside SCSS file will get pure CSS. And to ignore that pure CSS, it's a valid syntax for SCSS file. So it will work. However, you will need to add variables, maybe some lines to replace with vaccines and so on. So we have to do mental job, but you can do it incrementally and improve your styles from sprint to sprint. Yeah, Hi, can I understand this is not the perfect solution, but unfortunately, we don't have too much options here. So we are now, once you finished with migration to SCSS, you can remove all Less files. Then you, you have to adjust their extensions in your angular components. Also remove styles here, and also you have to replace all less things to SCSS inside your Anglo JSON file. Of course, don't forget to start your application. All right, I guess that's it. I hope I gave you some ideas which might be useful for your concrete case. And let's move forward and see you in the next lesson. 13. About Style Encapsulation in Angular: Hello guys, welcome to this lesson. In this video, we will learn more about styles in Angular applications. We will see what kind of styles are existing and where can find them in Angular. So there are two types. There are global level styles and component level ones. Global styles can be applied literal it to any HTML tech class selector and so on. They cannot be encapsulated and they work the same way as usual CSS without Angular. And there are also component level styles. The main difference is that this styles can be encapsulated, which means that component level CSS could be applied only inside some certain component and neither children component nor parent will be affected by this styles. But if you need, you can also make this styles available globally. We will see this encapsulation in action later in this video. So let's jump now to our project and see how it looks in the cold. And I would suggest you to start with global styles. So if you open the source folder, you will be able to find a file named style SCSS. Here you can ride any CSS which you would like to have globally. As example, we can say that we want to have background color of our body element as red. And this rule, the style, will be applied to every page, to every application state. Now, if we check it in the browser, you will see that our overgrown turn into red. Oh, but okay, yeah, it looks like it has been covered by our content class, which has its own color. So let's maybe remove it from our content. And here we go. Now our break ground is completely red. So that's where the global styles and let's remove our changes so far. So, but how we can write component level styles? Well, component level styles are located in the components folder. If we open our application component, we will see SCSS file. And then these file is being imported inside our TypeScript file in component decorator. So angle r will know to which component belong, which styles. And there you can write component level styles which can be applied only on the component level. So if we tried to set the body color here as example to green, then he will see that nothing has been changed because the body element is not in scope of these component. And as I mentioned before, the child components will not be affected as well. So if we try to apply some styles to our MLT bottom wrapper, which belongs to material button view. We will see that nothing has been applied to our Math button wrapper class. And the trick in these custom element attributes you see underscore and G, host, dash, CI, blah, blah, blah. This is unique attribute which has been created automatically by angular for every element inside the view which has a class attribute. So this is our toolbar, our buttons, our main tag, and so on. Yeah, you see all of them got this custom attribute. And here you can see how Angular is scoping our styles. So Angular attaches these custom attribute to our class. So it says that please apply this rule, do element which has the content class and also the custom attribute underscore and GI content there SHE, blah, blah, blah, some identifier. Of course, you can turn off this encapsulation. In order to do this, you have to go to your application component or any component where you want to disable encapsulation and then just add the property encapsulation and then view encapsulation Nolan. And now if you save it and go back to the application, you will see that our bread ground green background has been applied. And you don't see anymore that custom attribute. But we're not going to use this encapsulation non in our master class. So I'm going to remove this line. However, there is another way how you can apply styles from component to its child with enabling style encapsulation, you just have two in front of the class which should receive this styles. You have to add the pseudo-class and g dash deep like this. And then you will see that our green background has been, again, apply it. Okay, this is pretty much it. I hope you have no better understanding how Angular handle styling. And let's move forward and see you in the next video. 14. Theming - Init Custom Theme: Hello guys, welcome to this lesson. And finally, we're going to start to do some theming quiz Angular material. And before we start, I want to show you one file. If you go to modules and then old when Angular package and then you will find and expand material folder. You will be able to find the underscore theming SCSS file. And this file contains myriad of different variables, mix-ins, functions, Ever sync, which will allow you to configure your theme. Very, very flexible way. And this is actually the main file we're going to work with in this workshop. But okay, let's get back for now. And I will go to our styles SCSS files where we remember the whole global styles leaf. And here we will define our custom theme. And first fall we have to import this file, which a show to you just few seconds ago. And you can use the import rule in order to do this. What will remember that there is a better way and we can use the US rule and then we can define the path to these underscore steaming file. And then I will define some namespace for whole variables and function from this file. And I call this namespace material. Then we have to include one week seem called MAD core. And this mixin, we will include some styles which are required by war material in order to work properly. So you can see that these mixing includes a novel Maxine's like Example, 3 people. And if we go inside, we see different classes there. These errors will be included by calling the smart core. So because some of it keep in mind that you call this mixing only once. Otherwise you will get duplication of this whole styles which will have negative impact on your bundle size in the end, then every material theme requires at least two colors. This is the primary and Exxon color, so we have to generate them, but for now, I will not be stopping too much on the colors. We will have separate video about this, but for now you can just repeat what I'm doing. So in order to generate the ballot, we have to call the function malloc ballot. And as a function parameter, we have to provide some color map. And in my case it will be mod Cn, Cn. I don't know To be honest how to promote this properly. And let me briefly show you what does this MAC palette function. So you can see it generates some map where you can see default light or dark, darker color and so on. So it generates use some palette and my met CN variable, this is just a HashMap with predefined colors. And as I mentioned before, we will have a look at this in the separate video. But I just wanted to avoid, you know, some magic and show you where it comes from and how it looks like. So yeah, let's proceed for now and let's do the same thing. But for our excellent car, and my excellent color is going to be material pink. If you don't mind having these, we can generate our workshop theme. And in order to do this, I have to call Matt light theme function, obviously in order to generate the live theme, how to generate dark theme? I will show you a bit later, also in separate video. But for now for this smart light theme, you have to provide the HashMap, which has the key color, which is also HashMap, which should provide two keys, at least the primary color and the excellent car. Yeah, that's pretty much everything. What do you have to do in order to generate your theme? And now the last but not least step have to include mixing Angular material theme. And as argument, you have to provide this newly generated workshop theme. And these Angular Material Theme will generate styles for every Angular material component. And as a last step, we have to jump into Angular.js JSON file, where it is hemoglobin. And you have to remove our pre-built theme. So we have to remove this theme for our testing config. And let's find also the same for application config. So here we go. And just make sure that you remove this import to the trivial theme everywhere from your angular JSON file. And this is everything we have to do. So let's restart our application and checkout if everything works fine. So nice, we see that our new theme was applied. So you can see that header has now not a blue, but this CN, CN color, right? And the accent color is still being saw. It means that our new theme is working. So let's move forward and see you next video. 15. Theming - Material Color System Overview: Hello guys, welcome to this lesson. And today we cannot talk about colors in material design system. And let's get started with core colors. And there are three of them. The first one is the primary color, or it's better to save their primary color palette. And it consists from default color, and also it has the darker and lighter variant. And material design specifications defines the primary color as a color which is displayed most frequently across your application screen and components. So this is the primary color. And then we have the axon color palette. It also consist from default darker and lighter baryons. And this color is applied to element user can interact with. So it can be buttons, floating action buttons, and awesome text fields, progress bar, sliders, headline slings, and so on. Material design specifications doesn't require to use another color for the accent color. Actually, you can use also the primary color, also like your accent color, but you can use just another variant of this primary color. But very often and in this workshop, we will be using the separate x and color. And the last but not least, this is the warm color and these scholar defines chest error states yeah, or error an indicator when we tie up some invalid data in some form, we can highlight this with a warm color, which is in 99 percent of cases is red. So this is the warm color and by default it also read. Alright, now let's quickly have a look at our primary palate. And you may notice that on top of the color we have some text. You see this default, darker or lighter. And this text color is also different. So for default we have the black color. For darker, we have white color, light or has also a dark color. And this is not a coincidence. Those are also some special kind of type of colors, which called contrasts. So usually it's dark and light and it shouldn't not be necessary. Black and white, it could be direct gray and, and you know, like light, very light gray color. So it's up to your designer which color to choose, but usually it's very, very dark color and very, very light color. And this color is being applied to text, usually also for icons or different strokes which appear on top of some certain color. All right, I hope you got the idea. Now, let's again get back to our primary palate. And you may ask, bear these colors comes from. So basically you are free to define your own colors and color variants. But in material design system, every color is represented as a separate palette, which consist from 14 variants. And here you can see it. So it has the 10 variants of green color with indexes starting from 50 up to 900. And usually these ballot is being used to peak the primary colors palette and its variance like darker and lighter. So usually you pick the lighter variant with the index of 200. The default one has index 500, and the darker variant has a role 900 or 800 index. But again, it is not something set into the stone. You are free to use your own variants. You are free to choose your own indexes, right? It's up to designer. Again. You can peek, index 50 or 100 for your lighter, whereas AMD or 404 default and so on. This is just an example. So yeah, you would use this part of this palette in case if you're a green color, would be their primary color for application. But if this green color you are planning to use as your accent color, you should consider to pick this color from these remaining four colors at the bottom, which indexes starts with a. And the same way you can define the lighter variant, default variant, and darker variant for your excellent color. Okay, I hope it's pretty much clear and let's move forward. And we have another type of colors in material design system. And this is the bread grounds backgrounds. They're usually represented as like some light gray color. And you can see different variants of this background, like the default one is the most, what? Lightest is the most lightest one. And then for disabled buttons as example, we have a bit darker gray covariant and E14 status bar is something in between. Yeah, and these backgrounds can be applied to do a lot of different elements like dialogues, tooltips, card, whatever. Yeah. And there is also such a colors like for Brown's, those are usually taxed icons, strokes that something similar to contrasts, but contrasts belongs more to the color palette we have seen in previous slide. But foregrounds, this is either for independent texts like regular text, therefore, your content or your only or blog or website, whatever. And then secondary texts, which is a bit lighter and the hint text, which is usually very small and very light. And these texts also can appear on top of background. So it's kinda of contrasts for backgrounds. You can think about it like this as well. All right, enough theory. Let's have a look how it looks like in the real world. So if we jump into the theming as CSS file, you will be able to find already predefined color palettes like for marked gray color or what do we have AS example, matte, brown color. Yeah, you can see hold this indexes we have seen on the second slide from 50 up to 900. Then we see four colors which are reserved for x and color. And also we see contrast for every color variant. So you map them by using indexes. So example, if we have some background with the color brown, with index 50, which is very, very light, we have to use as a text color, the dark primary texts, because it's easier to read that dark text on a light background. The same is for brown color with index 100. So it's also quiet light variance. So we will be using also the dark primary text. But if we take an example already 500 Index, It's already quite dark background. So that text should be not dark but primary light because it's easier to write the light text on the dark background. Yeah. I hope you got the idea. So yeah. And if you scroll a little bit up, you will see that and go on. Material has already created for some basic colors, this color HashMaps. So you can just take and reuse it as example here, our mat dashed cyan color, we just using here in order to create our primary color for our theme. Here, you may also notice that we're using the mat palette function. So let's investigate what does this function. So I copy it and let's try to find it inside thymine guessed CSS. So here we go. And you can see that this math palette function as an argument, it takes the base palette. This is the core we provided this smart CRN besides this month ballot, it also takes the default parameter, which by default is 50. And then we have the lighter with default values and 100 and the darker with default. Well, there are 700, but those are the indexes in the core HashMap. And the last argument is the text, and by default, it's default or means 500. So this color will be used for text which has primary color. Here below you can see that these panel creates the map where defines the default color, also the lighter and darker variant text. And also below you see the contrast for our default color and also contrast for lighter and darker variant. And also here below you see the each loop which generates contrasts for every color variant in these color HashMap. So knowing how this function works, we can go back to our global styles. And we can override the default primary color, right? So as a second parameter, we can provide the index for our default color instead of 500, we can define this example, 100. And if we save it, and then, and then look at the browser, you can see that our background became very, very light. So now let's go back now and reverted back to 500. And I want to override the lighter version four, primary color I want to use the color was index 200. And also I will override the darker version and instead of 700 will be 800. Then let's configure our exome color, which is pink. So because it is my excellent color, I will pick the variant from the index which starts with a. So I define a 200 as my default Exxon color, a 100 as lighter, whereas all this excellent color and a 300 will be the darker variant for my excellent color. Cool. Let's save it and let's have a look. And it is quite hard to understand if it was changed though. Let's go back or removed this and lets her looking there some changes. So yeah, you see it became darker now. So let's go back and throughout it. So our configurations working. All right, what else might be interesting, Kiara, I believe mapped light theme function. Yeah, let's investigate this as well. So here we go. And immediately you can see something strange. Yeah, it takes as an argument there, primary color, accent and warning. But if we go back, you can see that instead we provide their HashMap, which has a key color AND, and, OR. And then inside we have this parameter and exit. And indeed, if we remove this every sink, and instead of this HashMap, we will provide the colors for sure primary and workshop. Excellent. It will be working as well. But the thing is that this syntax is deprecated. It is not flexible enough, so in the future, it will be removed. So you have to use this syntax with the HashMap. Alright, I hope it's clear for now. And now let's go back to the function. And here you can see this check if the accent is not now means if we provide the Exxon color, so we're using the legacy syntax. So this function will generate the book backwards compatibility theme, alright, and market as a legacy one. Otherwise, it goes farther and Here it fetches necessarily colors, primary color, excellent morning and so on. And provided inside that might create light color config function, which generates the primary palate excellent color warning color, which, and it generates already familiar color palettes for primary color with the darker, lighter variants and so on. The same for Exxon for warning. Then it also then it then it marks the theme as not dark. Yeah, obviously. And also we see the foreground and background. And let's go to our foregrounds. Let's have a look what we see there. And as I mentioned in the presentation, the foreground there, those are usually texts, icons, stroke like dividers to Sister strokes. Then you can see him tag secondary text icons, whatever. And then if you scroll a little bit to the top, you will see the similar map for backgrounds. And as I said before, this is mostly the light variance of the gray color. Now you can see therefore status bar. We're using MOD gray with C-index 300, which is quite light or beg round. It has index 50, which is the, really the lightest color in the whole ballot. And also by grounds for the carved dialogues, which is white and so on and so forth. All right, I hope it's clear. So let's go back to the stylus. What else do we have regarding colors? And go on Material Theme mixing. This is not about colors. These mixin inside this mixing rule. Have a look later. So, yeah. And okay, I remember there is one reminding, think very often, design is very unique and to using your own color palette. So you have to generate this similar color map based on your primary color, which may be completely different from what Angular material provides you. So in this case, I will show you one helper. You can go to the homepage of material design, then go to the Design page, then in the sidebar, find that color, then the color system and colleague, the tools for picking colors. And here you have the color picker. You can pick any color you like. And these tool will generate two different variants for your primary color. Here you see generated as indexes from a 100 to 50. So you can copy these colors and build your own color map. The same you can do for their secondary color. And yeah, but this is usually not your job as a developer. This is that something what designers should provide to you. But if you are designer and developer and one person, then you can use this tool, which I find quite useful. So yeah, this is pretty much it. I hope it was interesting. And let's move forward and see you in the next video. 16. Theming - Adding additional Colors to the Palette (aka success, info): Holidays, I'm happy to see you this lesson. And in this video you will know how to extend the basic Angular material color palette with custom colors. As you may know, dist and Laura, Material Theme understands only three colors. This is the primary accent and also warning color. But wherever you often we were using some additional colors like success goal or, or some info or red. So it is not enough. I have only three colors. So let's figure out how we can achieve this. But before we start, let's have a look what we have inside our workshop theme. So what kind of data structure? A T-S. So in order to do this, I will use there at rule called Denmark. This is their sas language feature, and I will debug our workshop theme. And this debug works pretty much similar like JavaScript console log. So you can see that workshop theme was printed into that our console. So let's expand it and copy it. If everything was locked, just hide it and they're below. I'm going to introduce some variable and I paste this output there. Then they say if I were singing in order to format this cold, and here we go. So here is our theme. You can see the key color, and inside this map, you can see their primary color, which is also map of colors. You can see here the whole color baryons also contrasts there also you can see the default lighter, darker variant, also the color of the text contrast for all of them and so on and so forth. And the same for our excellent color, right, also darker, lighter, whereas for they were and we see also the warning color, which has pretty much similar, but then also is direct property which is false. And then we see our foregrounds and backgrounds. I don't understand where these things come from. Just check the previous video where we covered exactly this part. And you can see here one more time their primary color, but this time it is in the root level. You're not under their color keyword. This is because that legacy syntax. And in order to have backwards compatibility and Aguilar material theme function also duplicates these also on the road level. And also you can see the same four, excellent and warm color. So cool. Now we know how it looks, our theme, what the structure of it, right? And what we basically want to do is to add additionally to our primary and warning color we want to add also valid for success, a color and for info, something like this, right, Let's implemented. I will just revert everything and also comment out our debug function. So I'm going to introduce a new variable called workshop success. And the value of this variable will be the output of that ballot function, which will generate the color palette based on the material green variable. You can of course, configure the default darker and lighter variant for the smarter or green car, but I will rely on the default values. Nice. Now we have to duplicate this line and create the workshop info variable and change the color. And instead of green one, I am going to use the blue car. Good. Now, how are we going to provide this colors? The problem is that Angular material doesn't support additional colors officially. And if you jumped to this smart light, the lm function, you will see that it understands only primary excellent and warning color. Yeah, it has nothing to do with any additional things there. So another strategy would be to marriage the output of material life theme. It will be just regular SAS map. And we merge it with another map which contains already our additional colors. So basically we just override our workshop theme with extended workshop theme. And in order to successfully merge those two maps, we have to use the built in model into the SAS called map. This is how we can import this semicolon map. And this model provides you very useful function which called deep merge. And this function takes at the first aggregate demand, our workshop theme song of the mob, that number 1. And the second parameter you provide, and now they're map, you want to merge into this first map. And the second one will have the success key. Also the same for N4. And in order to make it compatible with the new syntax, we have to also introduce the color key and inside the color, we should again provide the success and in four. Okay, done, this is not hard hopefully there. But you might reasonably ask, why do we need exactly this deep marriage? Why we cannot use just regular marriage? And if we go to official documentation for assessment, which and particular to the deep merge function, you can see that if you're going to merge two maps which have the colon key, in our case, it is weights. In case of merge function, they won't be taken only values from the second map. So in our case, only medium and bold. But if you're using the deep merge, it adds the whole battle. So it marriages values from the first map and from the second map and combines them together. And why do we need it? Yes, because of these color keyword, if we used, in this case, just the merge function in the output theme, we would get under the color key only success and inform colors. But our primary accent and warning colors would be dropped as well as foregrounds and backgrounds as well. But using these deep marriage, all colors will be in place. I hope it makes sense. So now let's uncomment our debug information and let's check how it looks. Our theme numb. So I copy again this everything. Then I based the output again for motet. And here we go. And now you can see our success color map, which has also default lighter, darker variants and contrast for all of these variants. The same story for the info. Then goals this color, which indicates this our new modern syntax. And again we see there success color inside, also in four primary color and so on and so forth. Then it goes again, the legacy bars for here is the primary color. Excellent for grounds backgrounds. And yeah, that's it. Alright, so I'm going to remove this every sink. Here we go. And now let me show you some very small d either how material components consumes this. These were generated theme. So these theme goals as an argument for Angular material theme mixing. And this mixin includes another mixins for particular components as example, Material button, theme, and all you dare they using the helper function in order to get the color from this theme and only then they using these colors. There are two config proper colors by ground colors for some certain elements button in this example. But this is something what we're going to learn in next videos. So let's move forward and see you there. 17. Theming - Theming of Custom Components Pt.1: Hello guys, welcome to this lesson. And in this video we're going to create the custom components, some banner, and we're going to apply the theme for this component. So let's get started. First of all, let's generate the component for it. And I'm going to use the Angular CLI. So I will run the command and G generate component with the name banner than I will skip tests. And experiments are more, I say the Angular CLI to automatically include this component into a model declarations. Hit Enter and you can see that my banner component has been generated. And inside the app, more blue, we see the banner component has been added to the declarations array. So here is how it looks. Our banner component, here is also banner components styles. Those are styles which are responsible for pretty much everything except the colors and font styles, because those two belong to the theming styles. And those theming styles, we're going to store in some separate file, which is name of component, but it has the suffix SCSS, their theme, and extension SCSS, you can give any name you like. But I stick to this naming convention because in via scored, your style will be placed next to each other. I find it quite convenient. But before we start to write any theming styles, we have to create some templates, right? So let's jump to Banner component HTML file and create some basic template. So here will be h phi of DAG, which kind of heading, and we'll have the text node and inside the paragraph will render some message, the property which we're going to create in a minute. And those elements will have its own class sold. For paragraph, it's going to be the message class. And for our H5 element, there will be heading. Cool. And now let's go to our ts file and create this input for this message property. So now I will go to our components styles, which are I call it functional styles. And to my host element, I will apply some bedding, yeah, box-sizing, and I want to have some border-radius there. Besides this, I want to add some font size for heading and also for my message. If you remember, I mentioned that they biography doesn't belong to the functional styles. It is true. We will refactor this later in the lesson about their day biography and how to configure it. But for now, let's leave it there. And of course, we have to render this component somewhere, right? So I will go to our app component, HTML, and there's somewhere inside the content. I will render my app banner. And maybe let's add some message. So this component will get their own theme. Now let's go and check. All right, So far so good, our component has been rendered. Let's investigate a little bit the elements and our right, we see that we forgot to make our banner as a block element. By default, it's inline. So let's go back and add the display block property. So now it looks better and we are ready to create the theme for this component. So I'm going to navigate to Banner component, SCSS, theme. And first of all, I have to import all functions, sneak scenes which I will be using here from Angular material theming by using their altruism use. And then I will create a mixin which will generate the theme for these particular component. You can name your mixing whatever you like, but I prefer to follow the convention when your name consist from the name of the component and this suffix theme. And of course, these mixin will take as an argument this theme, which will bath a little bit later. And first of all, I would like to fetch the color config from my theme. So I will be using them. Matt get color config function. And basically this function just checks if the theme has the legacy syntax, it will return the same theme as a DES. Otherwise, it will return everything under the key color. So in the end, inside their theme colors variable, we will get this. Hole colors and it's ballots. After this, you will be able to fetch as exemple their success color palette by using the built in into their Southland which get function. So basically you will get the color which you defined right there inside the styles SCSS file. So this is where this success color comes from. And now from these success color palette, I can already fetched their exact color variant which I need. I hope you remember that every color has its own ballot where you can fetch the darker variant, lighter variant, default variant, and so on. And for these, I will be using their month color helper function, which takes as an argument the color palette. And by default, it returns the default color for this ballot, which has index 500, if you remember this, but if you need another variant of this color, you can define this as a second argument for this function. In my case, it's going to be a lighter variant. Also, this function has the third parameter which is responsible for obesity. But for this particular case, we don't need it. And now we need to write some styles and apply them to our component. And as a selector, I will choose their application. Components selector, which is in my case AB dash banner, this one, right? And I will just add some background color to my application banner component. Cool, our very basic theme is ready, and now we need to somehow include these styles into our obligation. And unfortunately we cannot do this inside their style orals like we did it for banner components, CSS files. Because we will not have access to our configured theme. So we have to import these styles in our styles.css file. So I go there and right next to a material theming import, I'm going to import also my banner component, SCSS theme, and define the namespace as a banner. And they're a little bit below. I will include our banner theme, which we created just few seconds ago and bath our workshop theme as a parameter for this mixin. And now if we go and check our obligation with see that our banner got this nice light gray color and everything works as we expect. You can, of course, change your color. That's example. We can change success color to the N4 and we will get the nice light blue background. Yeah. And do you see but yeah, I will go back and ruminated for now. And the last term mining thing is about this selector, which we used here, app banner. But there is another way how to achieve it. So basically, you could use the host binding in order to apply some class to the host element of your component. So you can do it like this. And then in your theme, already relying not on the banner element, but on the class up banner. And as you can see, it works absolutely the same. So there is our app banner was attached and already to this class was applied some style, some background color. So this is just another way I know annular material library does these approach, but I am prefer to rely on the element name rather than class, because usually you don't change the name of your components so often, so it's quite convenient and safe and you don't need to introduce host binding for every component which has to support theming. But of course in the end everything is up to you. Okay guys, thank you for attention. In next video, we'll proceed with component theming. So see you there. 18. Theming - Theming of Custom Component Pt.2: Hey guys. So let's continue to improve their theme for our awesome banner component. And in this video, we're going to bring a bit more functionality to it. In the end of this video, this component will be configurable. So we will be able to render it in different states like success, state, enforced date and warning state. So let's get started. But first of all, I would like to rename a little bit our variable success color and make it a bit more explicit by adding the pallets suffix. So it will be clear that this variable contains the palette rather than single color. And because I'm not going to reuse the background color anymore, I will remove it and the color I will be fetching directly inside that banner styles. So we are like this. As a next step, I would like to fetch color palettes also for info and warning color. So I duplicate this line and just replace this prefixes. Good. And besides the color palette for the certain state, I want to also fetch backgrounds from our current theme and save it inside the backgrounds variable. And I hope you remember where these big ground comes from. But for the US who skipped the video where I explain this, the background comes from this function MOD create light color config. Over here you can see this big round key and the lighting background HashMap, which contains different colors for different elements like status bar, AB bar, and so on. And only then this might create light color config function is being called by Maglite theme, which actually generates the entire theme. Okay, it was small recap and let's move forward. And now for every of our state's success in four or warning, we have to create an appropriate class. So I'm going to start with the success state. And here keep in mind that this classes, they're not going to be scoped, so they are global. That's why I tried to avoid very generic class names like just success in for whatever, but rather use some prefixes or suffixes. Like in my case, I'm using the component name prefix. So we have a banner success, which is quite unique. And it, and it will be harder unintentionally to override it. So, and then I will just define the background color and I will reuse what I already have. So this is the lighter variant from our success color palette. But for neutral state, I will be used the color which is applied to cart. And it comes from our backgrounds of our theme. So if we go and find their backgrounds map, you can see this card right there. It has the white color. So this is exactly what I need. And then I'm going to create the similar things for infos state and also for warning state. So I got this. Good. Now we're done with theming itself. And now let's go to the Bonner component ts file and write some logic which will be responsible for attaching some appropriate class to the component cost. And first of all, I'm going to create another input called type. And the value of it can be this drink with a value success in four, worn or none. And by default it's going to be not. So Nigel state and they're below. I'm using the host binding annotation, which allow me to build and attach appropriate class name to the host element based on the value of my type input. So here inside the getter, I do really simple check if it's non, so if it's not an NOI idle state, I concatenate their components selector with the valley from the type property. So I will get one of the glasses which we defined in the previous theming file. Now let's go to app component HTML file and define that type for our banner, as, let's say in four. And now let's go and check. And it doesn't work. And it doesn't work because I forgot to define inside the host binding that it's class. Good. Let's go back and now we see that our banner got this nice light blue color. Now let's go back and check if n other states are also working. So success works as well. Now let's try out the warning state, or K. It seems to work as well. And now I remove type input completely, so it will be our Nigel state. And now we see that our x-bar got their white color, which is exactly what we expected. Good. So now I go back and revert this everything back to inform. And this is pretty much it. This is how you can create the theme for your own components and keep the colors consistent with your Angular Material Theme. Okay, that's it for now. There are also many interesting things ahead. So let's move forward and see you in the next video. 19. Theming - Dealing with Typography: Hello guys, welcome. We continue to improve our Angular material theme. And in this tutorial, we're going to talk about typography in animal or material, will have a look how logs there type system in material design. And we will have a look how to configure it. So layover get started. But first, let's try to figure out why should we even care about this. So if you have a look, Our Banner component right now you can see that the font sizes are inconsistent with our Was the rest of our elements. You can see that heading in the cart doesn't this same what we have in our button or heading. And also the text of the main content is different. We want to have everything consistent. So that's why we should be in sync with their bulgur, a few from Angular material config. But before we dive into the cold, Let's have a look how logs dare type system in material design specification. Here's the page which is dedicated exactly to tape over 3 in material design. And you can see it is small application which renders the different levels of typography. Here you can see the headings and also our Subtitles and smaller fonts which might be applied to different elements onto your web page or your application. This constructor also allows you to play around with different forms. And you might notice that sometimes the sizes or some other properties are different from fond to font, but usually they're pretty much similar. Also the same way you can check their body and captions fonts. Because very often the different fonts are being used for your headlines and for your content. And here you can see also the matrix which represents their phone type scale. Here is the whole possible fonts and its values like that, face, weight, size, whatever. Then if you scroll down, you can find the information where to use which fonts and things like that. But usually this is, this information is for designers, not for developers. However, it's always good to know. For now, let's go back to the VS code and let's jump into there, seeing if they're says file and try to find a function Mark de biography config. So here we go. And here you can see they come 50k, which reminds you what you have seen before. So you can see there from family and also different scales like from display 4321 and up to the button captions and input levels. Then this function builds their config map with these default values, predefined values. And then inside there each loop, it marriages ways that config which we're going to provide. And there we can override any of this values like display 4321. And by the way, Don afraid that it has slightly different naming and values. And this is fine because material design system doesn't tell you that you must use their values leg there, of course, you are free to choose your own heirarchy of these fonts. And basically you can also name it differently, like it has been done in Angular material. You can see that they don't have age five, age six headings, but rather they have headline and die. It'll basically those are the same but different name. Alright, I hope it's clear. Now, let's jump into my typography level function and let's have a look what it does. So it just generates the maps based on the values, what we provide it, which you can see in these metrics, right? And it just return this map. So it basically generates the config for certain topography level. Good. Now the question how we can override this config. So I'm going to go back to my styles SCSS file and I'm going to introduce a new variable called workshop topography. And the value of this variable will be the result of mud day biography config function. And as a parameters here we have to provide the font layer walls, which are going to be overridden by us. Let's say I wanted to override the font-family. And let's say instead of default, Robert are formed and wanted to provide their Open Sans and sans serif. It's going to be our fallback font in Case IV, Open Sans is not provided. Good. And then I also want to override the biography for their display for so again, Corp. B, I can copy basically every sink here. Then I have to add the namespace in front of this function, like this. And then I say that I want to replace their current font size with what do we have in this constructor, right? 95. So I want to override it like this. So I replace the value for font size and also for line hate, which is their second argument. Font-weight is 300, which is light. So this is fine. Letter spacing. I think I'll leave it as it D is, the one difference is that in constructor they're using big cells are here it is. E, m is just different units of measurement. But in order to be consistent with material, I'm going to leave also EMs. Also, if you need to override font-family for some certain level, you can provide this as a fourth argument in this month topography level function like robot or in my case, or you can also do it like this. But I'm not going to use another fonts here, so I just remove it. And then we're going to provide this demographic and thick. And we're going to provide this inside the math core function like this. And now if we save everything and go to obligation will see dead, deformed has been changed. And if we debug some of their element, we can see that now the Open Sans font family has been applied. All right, now let's jump into the mud quarter mixin and let's have a look how they biographies being included. So besides the different core vaccines, it also includes Angler material, topography, and already dismissed seen includes their progress. You make scene for every angle, our material component here as example for button component right there. And you can see their styles which are applicable for all type of buttons and good. So this is the first way how you can provide the topography config. But likewise with colors, there is the alternative way how to do it, and you can provide it. Next two colors will have to define that the biography key and provide their demographic on fiqh, which we created. And you can see that nothing has been changed. And if we did bug Matt car, that's example, we can see a dead steal from family. Open Sans is being used. So good. And I'm going to stick to this syntax. Alright, now let's go to our banner theme and create the topography mixin. So here we go. And this makes scene will take only one argument called topography config. And likewise, we did for color. We'll define the app banner scope. And then we have to include our day progresses you may seen, right? So I will go into their banner theme mixin and included right there. For sure we have to provide also come 50k topography config, sorry, and let's fetch it somewhere here. And we're going to use the similar helper function like four colors. But this time for the progress three, which is mud get topography config, which takes a theme as an argument and returns their Typography config. So let's just move it next to our colors. You'll go. So now I can provide this topography config to our typography mixing and this valid I can read already from there. And now let's define styles for our content and heading. So how I called this, okay, heading. So let's copy it. And in order to generate their font styles for our heading, I'm going to use the helper function called map topography level two styles which takes their typographic config. And as a second parameter, we have to define which exactly level we want to apply. So in my case, it's going to be title. So it will apply these styles where the font-size 20 pixels, I inherited 32 and so on. And now let's have a look. What exactly does this mixin. So you can see here that this makes seen used and now the helper function in order to fetch their appropriate font size, weight, and other properties from the config and for certain level. And then it provides these values too much typography, font, shorthand, mixin, which already generates that style. So here you can see it. But of course sometimes you need to override on this some certain things like font-family or letter spacing. So you can use these helper functions separately. As example, I'll let me show you how to override. Let's say I want to override on Lee line hate for some certain specific class. So I can call this function separately and provide also topography config and their level I want to fetch. In my case, this is title you can, I don't know, apply some maybe body one or whatever you like. This is up to your designer, basically enter your design system. But I'm not going to do for these obligations, so I will remove it down fine with this level two styles mixin. And now let's make they're pretty much similar thing for our message class. So I just duplicate this line and put it inside a message. And instead up and instead of Tidal, I will just write body one as example. So this is how you can configure your biography. The only one in mining theme is that we have to remove our hard-coded font size from their banner components CSS file. Here we go, and we are ready to save it and check if it works. And indeed you can see that our header in their banner is consistent with the header or diet or sorry, in current element. And if we try to debug our heading gal, we can see that now correct font was applied. So it's, it has to any big source font size and 32 line hate. And also it overrides the default anymore material typography for h5 element, and the same is for our message as well. Looks awesome. Now let's go back and add some. Check. If we actually provided topography only then we are going to include this Maxine. So it is just for safety reasons. And guys, I completely forgot that we have to also include this Open Sans formed into our web page. So instead of rod or there should be Open Sans. And for me it was working because I have this pond open sounds already installed on my system. But if user doesn't have this form pre-installed, there will be Use the sans serif font, which is completely different. So we have to include this form. So let's go to the Google and find the Google Forms page. You go there, you have to select styles which you are using in your obligation. I will pick all of them. But for production, of course you have to. Yours, you have to be only forms you're going to use in your application. Once you have everything, you can copy this link and just go to your index.html file and replace this line with what you copy it on the Google fonts page. And Yeah, In my case, you can see no changes at all, but we would see they change if I didn't have the open sounds per installed. So this is how you can configure the topography in your Angular material obligation. I hope it was interesting and let's move forward and see you in the next videos. 20. Theming - Implementing Dark Theme: Hi there. In this video we're going to implement the dark theme with Angular material. And it's going to be a bit longer video than usual. So let's get started right now. Basically, if you want to have only one dark theme, you just have to go into the styles.css and find the function MOD light theme and change it to mud, dark theme. And if you do it and save, you'll see that it partly works. So the card component got these dark theme as well as drop-down. But the problem is that background didn't change its color. And the problem is just because we don't have the themes styles for our app route components. So let's go and create it. So here are the separate file where I'm going to import a lot of material theming. And I'm going to create the vaccine app route theme. And they're inside a phage colors. Then I'm going to also phage beg grounds. And then under the approved selector, I'm going to define class for my content class. So I copy it here, based it, and define their color as beg ground from our backgrounds. Yeah. So if we find our backgrounds map in their seeming say SCSS file again, see that this big round has light gray color for the light variant and for direct theme, it will be darker gray. So good. Our approved theme is done, so we have to include it in our styles as CSS file. So I'm just inverting it and they're down. I will include these airports theme as well. Now, if we have a look, it looks way more better. Our background turn black or dark gray or VD. We have this small gap at the very bottom right? And this is because our content doesn't have the minimum hate though it doesn't feel their whole space in our browser. So let's fix it. We can go back and jump to their functional styles for our app component, yeah, not the theming styles, but functional ones. And here I define minimum hate and the value will be the calculation of calculation from the viewport hate and the head of the toolbar or our header. And the cool thing that I can reuse these header Haidt from the theming file with seed here, my toolbar Haidt desktop. So I just copied this variable and I can reuse it in my app components styles. I just need to import material theming, of course. And here's the important thing to mention. By default, SAS language doesn't recognize variables inside the calc function, so it renders basically as it is. So instead the value of the variable we will get 100. We age minors, m dot dollar MOD toolbar head and so on. And in order to trigger their processing of this variable, that compilation of this variable, we have to wrap it into the curly braces. And in front of it, we have to set up the hash sign. Hope it's clear. And now we go back and we see there the garb is gone. And in place of variable, we see there 64 pixels, which is actually the value of this variables. So this is the cool thing because you don't need to guess what the Haidt of these header and you also save if one day the head of my toolbar will be changed, you should not worry about this as well. Gold. So here is our dark theme. However, you might find this not so useful to have only work dark theme. Usually we have the light wherein and dark variant and we want to switch between them. So I would suggest you to use our dropdown and implement some logic which will be switching the theme based on the option we have chosen in our drop-down. So let's go to the cold and. We'll find our HTML file for our app component. And there I just threw place the label and choose a theme. And the first option will be dark with the dark. And the second one will be light and also light. Then we also have to listen for selection change and you selection has been changed to, we have to call the handler, which I call that theme. And inside event will be our new value. And until I remember, let's go to also to app component SCSS file as well. And for dropdown I want to add some margin also from the top and right. So here we go. And now I can go back to app component ts file and create our handler. So this method will take a parameter change which is mud select Change. Yeah, you have to import this from envelope materials select model. Now I remove this title property because we're not going to use it at all. And instead, I will introduce the new property called current theme. And these property can be either stream with available light theme or dark theme. And by default it will be dark theme. And then inside my handler, I will just do the simple check. If there is a dark or biscuit I can destructure source from from mud, select Change in order to make it shorter. So yeah, and I check if it's light theme selected. The current theme will have the class light theme, and otherwise it will be dark theme. And of course, don't forget to decorate the current theme property with the host binding because we need to attach this class to the host element. Now we can save it and check it. Okay, let's try to select, select the light theme, and we see that class has been changed. And now we have to generate our class says or our themes under these two scopes for light theme, we have to generate classes for light where and, and honor the dark theme class. There should be generated dark theme. So I'll, let's go back and jump into styles SCSS file. And here you know what? Let's maybe refactor a little bit things because this file has already a lot of things. And if we add also dark theme or sorry, light theme, it will be mass completely. So let's Our fetch on broad, probably this whole cold, two different files to appropriate files. So I will create separate light theme file and also dark theme file. And then I based here my colors and generated themes. Also don't forget to import material theming. And I prefer to have separate colors, primary and accent colors for light and dark theme. Because very often for dark theme, you want to have darker variants of your primary and excellent colors so you can configure it. But these extra colors, basic Kili, they can be also the same for both themes. Well, in our case it will be the same. So I think it makes sense to extract these two kind of common styles or something like this. And also I think it makes sense to extract these deep Merge logic also to some shared function and reuse it when we generate dark and light theme as well. Yeah, it definitely makes sense to do it. So I will create also the common SCSS file, import material theming as always. And also I cut and paste the extra colors. Also, I copy this whole deep merge Lord cheek and inside the Cotman SCSS file. And we're going to create a function which I'm going to call apply extra colors, which digs their theme as a function argument and returned already merged map, like this. Yeah. And they are, it looks like we have to import also built in map model. So that's copied from statuses, CSS. Here we go. And now I think we can go to dark theme and import our common model. You can define namespace as a common, but in fact, if you don't define a namespace, their default namespace will be the name of the file. So I will drop in this case the namespace because, well the common anyway. So instead these deep merging and we'll be using my function, I agree it before how I called it. Apply extra colors, all right, and as an argument, I provide our workshop theme. Then I just copy everything here and paste it into my life theme. Then I revert my colors so I make them a bit to lighter. Then I rename also the mud dark theme to mart light theme. And I believe that's it. So we have separately light and dark theme, again, clause them right now. And let's go to our styles.css. And you know what, we forgot about day pornography and typography. This is something which is common for both theme. So I will place it inside the common model. And of course I have to adjust now my dark theme and say that they bulgur a fee comes from the common model and the same I have to do also inside the light theme model. Good. Now, now we can go to Styles and import our dark theme. And here below also the live theme. And also I will define the namespaces for these, the dark and light. Besides these, I would like to also create one extra Maxine and which I'm going to call create theme and dismissing will, it will just grow these, our material theme and styles for our custom components. Just like this. Then at the very bottom, I will create the dark theme class. And inside this class, I will generate a theme for, for the dark variant. And then I copy this line and rename dark to light. So there will be styles for light theme. Okay, Let's save and check. Okay. It looks like it's Barkley works. Yeah. We see that the car theme is being switched. And the problem is that our dark light theme is on the same level as our approved element. And that's why it's not being applied, because we apply our themes for every child under their dark or light theme, but our app route is not a child their own the same level, right? And if we go to our app route themes, styles, we can see that we use these rootScope. so it means that these styles would work if the app root element was their child for dark and light theme. But because they're on the same level, this style is being ignored. So we have to remove this app root scope. And already now we see that it's working fine. However, there's something with my excellent car as well. Let's check it. Strange why unlike the a 300 over and let's revert it. Okay, Now, now it works strange, but whatever. But anyway, we have another issue. And if you look at the drop-down options, they don't have any background. And this is because the CDK overlay container where these options are being rendered. It is not a child of Arab rude, it is a child of the body, but with App rude, they're on the same level. So pretty much a similar issue what we had before. So technically this overlay container is out of scope of the theme. So we have to fix it, it, and we have actually two options how to do it. And let's start with the first one. The first option would be to inject their overlaid container. This overlay container has GET container element, which gives you access to that container element basically. And you can use their class least and remove and add classes. So in case if we switch to their light theme, we have to remove. Dark theme class and add the light theme, right? And the same but opposite sink, we have to make for them dark theme. So we have to remove, in this case the light theme and add the dark one. Okay, here we go. And besides these, we have to also define the initial theme, right? So we have to implement, let's say on a neat lifecycle hook and inside the NGO only need. We will define the belt basic dark themes. So we're move this piece of code inside there. Gianni need. And now we can save it. Then we can go to our application and we see that we've fixed the problem I switching themes and everything looks perfect. However, these solution is a little bit cumbersome and I don't like in this solution that you have to care about also switching, adding and removing the class also for your overlay container besides them cost element, of course you can refactor it and make it more nicer. You can excluded into the separate function. But anyway, I prefer another way. And let's first fall. Remove ever sing related to this first solution. So I clean up on a neat and clean up. Also if else statement in my set theme method. And then I inject into my component two things. The first one is a document or just a regular document, you know, and also the Render Service. This is them service, which allows you to work with our DOM elements. So you have to avoid to modify DOM directly, you have to use abstraction layer like this render because Aguilar can be used in different environments, not necessary that it's browser and there's no guarantee that you have their regular dome like in the browser. So these render allows you to abstract from the concrete implementation of the environment and be kind of independent from it. So now having those two injected, we can goal into our set the method. And in case if light theme is being selected, we're and move them dark theme class from our document body, right? And we add glass light theme to our document body. And similar thing we are doing also for Ford case IV, the dark theme has been selected. Good, and now let's copy these logic for dark theme and define these in, inside their injury on the neat. So our dark theme will be default theme in this case. And, yeah, and by the way, we can remove this host binding and current theme because we don't need it anymore. Good, Now let's save it and check if it works. And you can see is working fine. So I switching my themes and everything works as expected. And it works because we add batching now the light or dark theme class to their body and body. It's a Barend also for AP root element and also for CDK overlay container. And this is how you can implement dark light theme and how you can switch between them. You can see also that our primary color becomes darker for a dark theme and lighter for light theme. So it works as expected. I hope you are not so tired and let's move forward and see you in the next videos. 21. Theming - Loading Theme on demand (Lazy Loading): Hi there. So finally we know how to create dark and light theme and how to switch between them. However, our current solution has some drawbacks. Despite we use some certain theme or not. We anyway generates style for these and included into our bundle example if we build our application. And after these, if we open, let's say style CSS file, we can try to find, let's say MET chips styles. And you can see that we have much chip for dark theme and for light theme in the one single bundle. So hours it says bundled become two times bigger than it should be. And this is we have only two themes. If we have three or four themes, our bundle would grow accordingly. And also after previous lesson, I have noticed that I choose a wrong location for our dark theme, light theme, SCSS files. So S, so this is the not the best glaze it looks like and we'll our CLI just copy everything under the Assets folder. And we don't need to copy by scholarly SCSS files, so we have to move it out of assets folder. So let's immediately fix this. I just drawing the styles folder out of assets and bless it under the source folder. And also let fix them bath to this files. Now let's try to restart our angular application or to be sure that we didn't break something. Okay, it looks like it was compiled successfully. So let's move on. So I will remove our dark and like the IM classes, including its content. And then I copy these, create the maxine and move it into common SCSS file. Okay, looks fine. Now I have to remove unnecessary parts. Sas map, model as well. Then I have to remove themes for our custom components. And then I will go to common SCSS file and import some of them here. Because we are using them here inside our creates the mixin. Alright, then I go to the dark theme and I include these grids, the mixin. So basically a generate theme for our worm, dark, dark theme, and do the same for light theme as well. This is fine that we generate two times these themes because those files will be at lazy loaded. Then let's go to and our JSON file. And here we have to find under their architect to build, we have defined styles and we have to add couple of conflicts. So the first one will be for our dark themes. So I say that input will be this dark theme, the bundle name. I will be part of the filename. And then I will use inject, which I set to false. And you may be remember before we were using there a lazy property. So in order to define that these styles should not be included into their index HTML file. But it was deprecated or even removed. I don't remember. And now you have to use inject and inject false means that the style will be lazy, load it. Then I will just copy this week and I will do the same but replace dark theme was the light one inside abundant bundle name as well. And if you're using the angular version ten and below, you have to probably add this extract css to true. This option means that styles will be excluded to their separate file rather than build into HTML file between style stack. But for ankle or 11, it is deprecated so you don't need it anymore. All right. I will build fails. Why? Okay. Most probably because inside they're common. I define the wrong path because their location changed. So I have to go one level down. And the same for app component theme. And now we'll see that was compiled successfully goal. So let's have a look how it looks now or obligation. So it looks train shared. It looks like them structure is fine, but we're missing colors. And this is because we generated themes, but we didn't include them into our index.HTML. So there I have to create the link tag. And as an H Rap, I have to define their path to my theme. In my, in my case, now we have the light theme. And also I will create their ID for this DAG, because I will be using this in order to get access to these deck and replace a trap. So now if we reload the page, we can see that the theme is working. Yeah, they're light on. Let's try to switch, switch it to the dark one. So dark one also works fine. However, this switching will not be working because we have to slightly changed their logic of this everything. So I go back and revert back to the light. So light theme will be our default one. And inside my app component, first of all, I have to remove everything inside engine on an IEP because we have already default theme set up. So I removed there every sink then introduced they're read-only property for my class. And via document, I get reference to this link deck which I created before, who I had this get element by ID. And then inside the set, the method, I do the next thing. So if the Equus switch to the light theme, I set attribute for our theme and color. So I will change the HREF tag. So this one, right, I will change it and replace with the light theme as a CSS file because we selected lived, right? So obviously, and the same, pretty much the same I do for dark theme, but we switched definitely to the dark theme. And this is pretty much every sink. If we go back and try to switch that theme, you'll see that everything works fine. So our dark theme has been successfully, Lord had n, if I switch back to their light, we see that everything works correctly. Now let's try to build one more time our application and you can open light theme. So we see that there will be only styles related to lighting generated. And the same is for darks or we're not duplicating themes. And inside the styles CSS file we see some basic style for material, CDK and so on, so on. However, you can see we have some back. We again have their Roboto font, but if you remember, we changed it to Open Sans. And the problem is that after this refactoring our mat or knows nothing about our configuration. So yeah, we separate this everything you can consider it like three different independent streams. So our common styles knows nothing about dark theme configuration like theme configuration. And also the same for typography. We don't know which they biographies being used. But if we have a look inside the mud core, if we find it, you can see that by default typography config is now. So if we provide nothing, there will be null. And inside and low material topography. They have such a check so they trying to fetch the typographic config. And obviously it will be now because we don't know about that config, which we configure it for dark and light theme. So our config will be now, and we see that if it's null then will be used. The basic config, which you can see has the font family Roboto. So the one way to fix it is to import a worm common SCSS file in to our styles and provide that they biography from this common. And now if we save it and build the application one more time inside their style CSS file, we see that open sounds formed is being used, which is exactly what we needed. And we cannot find any robot or phones anymore. Okay, that's it. This is how you can optimize bundle size for your styles. And in this lesson, we could drastically decrease the size of our style CSS file and it is due times smaller now and everything, thanks, too lazy loading and we're moving forward and see you in the next video. 22. Theming - Elimination of unused CSS: Hi there. In this video we'll continue to reduce bundle size for our styles. And so let's get started and let's have a look what else we can do for it. So let's remember our current size for our theme. So we can see the dark and light theme pretty much equal and it is 76 kilobytes. And our style CSS, which is like core or common styles, is 15.67 kilobytes. And let's investigate are where, let's say dark theme and see what, what is included in the 76 kilobytes. We can see that we're using styles for batch component. And if we scroll down also, we see the styles for calendar. And we're not using these components at all. So we have to somehow Tree shaken them or somehow removed, right? And if we have a look inside the Angular Material Theme mixin, you can see there this mixin includes mixins for every possible component, regardless we're using them or not. So the first solution towards to optimization would be including their mics scenes for component which we are actually using. So we have to include only math core theme mixin, which bring some very, very basic styles for all off components. And then we can include only yes on LQ seen for some sort of component like for select for toolbar, for bargains, for guard and also for form field. This is only components we're using and they're below. We have stars for our custom components. So now if we tried to rebuild our application, we see that our theme has been decreased almost three times. So now it's 25 kilobytes and before it was 76. So this is quite descent result. And you can see that our application still working and steaming is being switched as well. However, let's investigate our bundles a bit more. So I open as example, dark theme and also style CSS. Let's try to copy the styles format, form, field topography, and find it inside the dark theme. And we can see identical styles for all support. It seems though we are loading same styles two times. And the problem is in this function, if you open these Maxine, you will see that it has angularjs, material topography mixin, which includes all of their biographies for all of components. Also, regardless if we're using or not. And also if you have a look at example might form field theme that jump inside, you will see that this mixin also includes the state biography in case if it has there, they biography come Fiqh. And in our particular case, they biography will not be now because we provided inside our light theme or a dark theme right here. So this while we have duplication of styles, and unfortunately, you cannot configure somehow mart core Maxine in order to not render the biography or render on the typography for component you are using the new obligation. So instead we have to hack it a little bit. And we can, instead of mud core, we can copy all these thing except their material, they biography and accept this month MDC core, this is four, this is experimental feature. You don't really need it and that's why it has underscore, which means this. This is the private one. And you can call the these everything inside and based it inside our styles.css, don't forget, also attach the namespace to it. And then, or, and then also we have to import Material base they biography. This is only think we have to import. And also don't forget to provide our typography, config these, base a biography, generate styles for basic styles for my H1, H2. So for different headings, for captions and things like that, this is every sink. What does this mixin? And already components specific styles will be generated by appropriate component mixing. And now if we try to build our application one more time, and we can see that our work style CSS file now only 4.8 kilobytes, which is almost three times smaller as well, which is pretty good results. So and steal, our application is working. You can see I can easily switch the theme and everything seems to be fine. So this is how you can get read from an unused CSS and to reduce their bundle size for your application. 23. Theming - Fixing bugs after refactoring: Hi there, welcome bye. During the last two effect when we introduced 21 bug and mainly we broke. There were a few for our binary component. So let me show you what the issue is. And the issue is that they had a pool graphy from our core styles override styles defined in component theme. To understand why it happened, we have to recall how actually CSS works. So in CSS, every selector has its own weights or class has 10 and tech select or has one, ID, has barely 100, and so on and so forth. And CSS just summarize the value of the selectors and the higher value wins. So it has high abroad warranty. So in our case, we have the class plus selector h5. So the summary is 114 seconds selector is pretty much the same because at banner has Von at one and class heading has a dance or its element. And in this case, when this style which defines later. So in our case, if we have a vote, the light theme, the styles which provide the component themes comes before the core styles. So you can see here style CSS. And that's why, or that biography has priority over that biography defined in component themes, styles. So let's go back to the court and I'm going to show the three which will allow us to solve this issue. And the trick is inside there, mart base topography music scene. If you have a little besides the config, it has the second parameter which called selector. And by default, this is the class mark they biography, which is defined in our body class right here. So we can go to styles of CSS and we can say that this use selector, which is body. And in this case, if we save it and then we're, reload the page, we will see that our typography was fixed. And this is because now the banner of court I pornography equal to 2 because has one and H5 has also won. So the summary will be two and comparing to add banner selector and heading class, which is allowing it has lower priority, It's all selector from theming styles has priority over the court typography. So it means that we don't need anymore the mot de Beauvoir if he's so we can go inside index.HTML and just remove this class from here. And as you can see, application still works fine. And the issue was solved. 24. Theming - Density or how to shrink Component Size: Hi there. In this video we're going to talk about density in Angular material theme. And the best way to explain what density is is to go to the official and a lot of material design specs. And there they have the nice example which shows that this is mostly about Haidt of elements. So the higher density, the more elements you can render on the page. And if you scroll down, they have different recommendations to which element you should apply density where you had to avoid. So as you can see that four elements and messaging, we should avoid to use this density. But in our particular case, I will violate this rule because I don't want to create a separate element just for this case. So I will apply it to our banner, which is exactly a messaging component. So sorry about that, but yeah, usually follow their specific locations. Okay, so let's go back and let's try to sit down their density for now. And let's see how it works right now. So I'll go to the light theme and next to typography, I define the death density property. And this density property can have sweep possible barriers to system maximum, then it could be default and also a minimum. So I will leave minimum for now and save it. So now you can see that our heterozygote lower hate. But I don't know if you've noticed this. Let's try to river to default. And yeah, you can see that was default. They're hate of header wave or bigger rather than we as minimum. But our banner components steel doesn't react on the changing in our density config. So in this video I will show you also how to adjust your Augustan components in order to work with density. So let's go to our banner component theme. And we have to first fall introduced the density config. And let's go to the theming can CSS and try to find one. And as example, I will take the density conflict for the toolbar component. So I can copy this config and just paste it to my banner component theme. I remove default because I'm going to override this. And of course I have to change their name. But basically you can see that it has key hate which indicates which parameter we're going to change. And then we have to define for default maximum and minimum value exact number. So for my case, for my component, for default one, I will define the 120 pixels head for maximum it will be 150 big source and minimum is going to be a 90 pixels. And of course I have to create the additional mic scene. And we're going to call it like at Boehner density. And this week's intakes as an oracle man density config. And first of all, I want to fetch the density scale which we defined in our theme. So I'm going to use them might get density config, helper function. And then we also have to fetch the concrete head four D's concrete, a dense disk scale. And I'm going to use the helper function month, Graham and density brought them there. And this function takes three arguments. The first one is basically the density config. Then we have to define the density scale, which we defined for our theme. And we have to define which valid for which property we're going to fetch. And for my case, this is the hate, so I copied here and inside my head I will get one of those values depend on the scale. So here below, likewise for other vaccines, and if find the banner selector and for my banner element, I define minimum hate to their value, which returns this Rayleigh density probe valid function. So it leads us to adjust slightly our, our functional styles. Because if the height of the element will be too big, hole content will stick to the top and will not be aligned by center. This is behavior and want to avoid, so I have to adjust it a little bit and we'll replace their display block with the flags. And then I will apply the justify-content center in order to make them vertical alignment of my elements. And also by default, flags align all elements in one role. I don't want to, There's behavior. I want them to be laced one by one. So I will apply flex direction column in order to help them one by one. And the last step would be to include our app banner and density mixin, right? So we go to their banner theme. And first of all, we have to get the density config using appropriate function, right? And after D is somewhere, before they book or if we will do this similar check, like if density exists or not. Now we just cold these, we've seen we created. Now it can't save it. And who a look and looks like our density works because if we check their hate, we can see it nanny big source. And this is the offeror for our minimum density config. And we see that we define exactly the scale. So let's try to maybe change it to the maximum and boom. Yeah, Our Banner became a really thick. However, it shows that it works properly. The only problem is with the dark theme, because if we switch to dark theme, our density is gone. And this is because we define the density scale only for our life theme and forgot for dark one because dark one has default where layer. So let's align it. I will define the density to minimum for a lion theme. And they all saw goal to the dark and apply the same density for the direct theme. And now we can see that if I switch theme, our density stays consistent. However, it works to mention that All and Glossy Material Components react on the density as example, buttons and inputs. They're not changing. I don't know if it stay like this. Maybe in next major releases of Angular material, it will be fixed at least until now if you know how to work with density and to know how to make your own components compatible with the setting. So this is pretty much everything I wanted to show you about density. So let's move forward and see you in the next video. 25. Theming - Elevations (Shadows): Hi there. In this video we're going to talk about shadows or how it is called an envelope material elevations. As you may already notice, some surfaces like boutons or cards have its own elevations and our application banner somehow stands out. So let's try to fix it and apply some shadows to it. And we're going to show you different ways how you can achieve it. And cool star with low-level mixins and functions. And we'll end up with high level 1. And the first mixing I'm going to show you is Maxine called marked elevation. Let's try to find it inside the theming and lets her look which parameters it takes. So as you can see, you have to provide the z value, which is Bella, from 0 to 24. Then you can provide the color, which is by default the material elevation color black, and also their opacity, which is by default one. So let's try to provide for now just elevation level. And they said it to two. And let's have a look how it works. So you can see now that our banner got some shadow. And let's play around a little bit more so I can provide also some specific color, like warning color. And you can see that we have instead of black shadow, some red one. And also I can go back and apply some basic deal lag 0.3. And I don't know if you can see it. Our shadow became almost transparent. Okay, so let's try to remove this too. And now I'm going to show you another way how you can apply the elevation. And you can achieve this by using the redefined CSS classes, which are generated by an raw material core theme. And these classes called mart dash elevation there should that, and then the level of this elevation. So the bigger number than bigger shadow, and you can see it right now on your screen. So if we investigate, we can see that styles from mild elevations at six class who are applied. However, very often you have the situation when you want to have some default, shadow or an elevation, right? And you want to allow the end-user easily override the shadow by using these predefined classes in order to simplify this task for the developer which will be consuming your component, you can use another mix seem called mart over ionizable elevation. And these mix-in just add silver, select or not to the basic class and apply these shadow if there is no such a marked elevation prefix. And it's better to see by using examples. So I will replace it with override double elevation. Then we have some example, reload the page and you're going to see that steel mild elevations that six applied. But there is no any styles related to elevations that to which we apply to our host element. But if we go to app component HTML and return this mud elevation class, then we reload the page and we can see that now shadow comes from our themes styles. You see right here. This is because we removed that predefined elevation class. And I would recommend you to follow this strategy it using their own writable elevation. However, before you start to use exactly this function, let me show you another more higher level Maxine, which includes this operator will elevation. If you try to search for use case for edible elevation Maxine, you will encounter month prior theme or a double elevation. And there is a similar basically month prior at same elevation which uses just the mud elevation mixin. The difference is that these privacy or rideable elevation, it takes not a color, but color config, and then it fetches foreground elevations from the config and uses these colors in order to generate your shadow. So let's try to replace it. Then the xhat level, we leave as it is. And the second parameter, as I said, it's going to be the color config. And the third is a Bassett D, which is by default might elevation opacity. So then here as a second argument to provide the theme colors config like this. And you can also add some opacity, but I don't need in this particular case. But we can save, and you can see that nothing has been changed, which means that private thing or I double innovation is working. And let me just put few words about where to use which elevation the mixin. So as I said earlier, I would recommend to you to stick to override the bull strategy. And when do you choose between the private theme over rideable elevation and just month over editable elevation. In 98% of cases you need this last one much Brian, what theme or rideable elevation function, because it uses the colors from the theme. However, if you need for some certain element to use very early color, like iron or shadow should be green only for one element on your page. Then you should use the mock or a double elevation because it allows you to define some specific color. And yeah, that's it about elevations. And let's move forward. 26. Theming - Overriding default Material component sizes : Hi, very often Angular Material components have inconsistency with your design system. As example, we can take a header and your designer might think that default size of Angular material header is too big and he would like to have it way more smaller. And how do we usually solve these kind of issues? Usually we create custom class, then attach to the toolbar, It's example, and then we override properties we need. However, this solution very often breaks our view because we forget about child content, which might have this toolbar. And these child content can depend on the state of the toolbar. So we have to scale it proportionally, which would be really hard to achieve by using this first approach, because you manually have to override whole possible child's for this element. Just it's hate. And envelope material allows you to override some of properties. And if you go to thinning SCSS file, you will see a lot of variables which has at the end default keyword and all those variables over rideable. And you can also search for all these variables and find every property you can override. You can see that expansion header can be overridden. And here we can also see our material toolbar. And in particular you can see this toolbar minimum hate. And because we have density at set up to their minimum, this is exactly the HAPE which we're using right now in our theme. So let's try to copy it and override in our light theme. And as you may remember from less some about SaaS mourners, we can override it by using key work with and then between braces you can define the variable and override the value. So let's try to define 24 pixels in this case. And then if we go back to the browser, you can see that what header has now only 24 pixels, so it's very, very small now and pretty much similar you can do for every variable which has this default keyword, just find which you need an override. However, I have to say that not all of them are over rideable. As example, this mat toggle bedding, actually it's not being cubed. So there is a variable but it's been used and that's why you will not see any effect on your toggle LMS. So that's unfortunately not possible. However, we can override as example, CDK set indexes for a container or for the backdrop, which is which we need quite often. And let's try to do it and keep in mind that we splitted our theme from the core styles. So we should not override this here, but we have to go inside the styles where we render our CDK overlie overlay and another core styles and override it there. Because if we would override this inside the light theme style, we would not see any changes. And here I can define this index and set it to 950. And if you're a load application and open select or in order to render something inside our overlay container. You can see that overlay backdrop. It would go, it has an index 950, exactly what we defined in our core styles. And the same way you can override also backdrop, background. This background is applicable whenever you call us example dialog window. And we can change this background to, let's say a red or is 50 percent of opacity. And let's just try to emulate our dark bag job because select the option to enable dark backdrop, unlike dialog windows here. So we manually replace transparent with DEC dark backdrop just in order to see that color was changed. So if we used dialog window in this application, it would have this red backdrop. And the last thing I wanted to mention that you cannot unfortunately creates defaults map and provided like here. Unfortunately you have to define it 11 by one. Maybe in the future it will change somehow made maybe Angular material library will be able to provide some comfy can exceed or function which would allow us to define or override set of variables. But unfortunately we have to do it like this. And also don't forget that because we have dark and light theme separated, you have to also override defaults in dark theme to have stars consistent. And this is how you can override some default fellows in envelope material theme. I hope you will find a lot of places in your application where it could be applicable. And thank you for your attention and let's move forward.