🎈🎂 We're Turning 5 🎂🎈

Celebrate with us! Click to apply 20%-off discount!

  • 00 Days
  • 00 Hours
  • 00 Minutes
  • 00 Seconds
Apply Discount 🚀

This Is What You Get

  • Always Actual Info

    The information in the course is being constantly updated, so new Angular Material features will be always covered

  • In-Depth Knowledge

    From this course, you will know how theming works under the hood, explore its source code and structure

  • Access to Source Code

    You will get exclusive access to the private repository which contains source code from this Course

Topics Which Are Covered

We will start from basics and gradually dive into source code understanding how things actually work

  • Basic SCSS language syntax and features like: Variables, Modules, Loops, Hash-Maps, Functions etc

  • Understanding of a color system in Material Design and Angular Material and how to configure and extend your own color palette

  • Different strategies of migration to SCSS from Less or CSS3

  • Proper custom component theming

  • How to work and configure Typography in Angular Material

  • How to implement Dark Theme for your Application

  • How to lazy-load Themes and decrease bundle size for your styles

  • How to configure density of your Angular Material Theme

  • How to work with Elevations ( Shadows )

Students About the Workshop

🌟🌟🌟🌟🌟

5 star rating

It was amazing!

Radek Pikhart

Absolutely amazing training. Now I have much better understanding how Angular Material theming works under the hood. It will help me in my projects. Thank yo...

Read More

Absolutely amazing training. Now I have much better understanding how Angular Material theming works under the hood. It will help me in my projects. Thank you very much!

Read Less
5 star rating

Dmytro is a very talented tutor

shah zaman

Dmytro is a very talented tutor! He explained each topic very thoroughly. I would defiantly recommend this course. Really Thanks, Dmytro!

Dmytro is a very talented tutor! He explained each topic very thoroughly. I would defiantly recommend this course. Really Thanks, Dmytro!

Read Less
5 star rating

This was really Advanced course

Giga Sagrishvili

Thanks for nice explanation, I recommend everyone to watch this course.

Thanks for nice explanation, I recommend everyone to watch this course.

Read Less
5 star rating

Excellent Course

Marco Rinaldi

This course is a "godsend" for everyone that wanna know how Angular Material work and deepen further the knowledge of Sass.

This course is a "godsend" for everyone that wanna know how Angular Material work and deepen further the knowledge of Sass.

Read Less
5 star rating

Great work as always

George Zouros - Elenidis

I liked the SCSS refresher. To be honest there isn’t any course or even tutorial for angular material theming and customisation. I’m really glad you decided ...

Read More

I liked the SCSS refresher. To be honest there isn’t any course or even tutorial for angular material theming and customisation. I’m really glad you decided to spent the time and effort to create one. I’m also a YouTube subscriber so keep up the great work there as well. Thanks for everything.

Read Less
5 star rating

Recommended for all Angular developers

Giorgi Merabishvili

Absolutely brilliant workshop. Gives you a solid understanding of SCSS and helps you to understand how Angular material theming works under the hood to exten...

Read More

Absolutely brilliant workshop. Gives you a solid understanding of SCSS and helps you to understand how Angular material theming works under the hood to extend the functionality smoothly and to create your own custom theming in your application. Helped me a lot in my current project. Thank you very much!

Read Less
5 star rating

Amazing!

Alexander Panchuk

The marvelous course gives you a solid understanding of SCSS and Angular Material theming. It doesn't matter if you are new in Angular or you are experienced...

Read More

The marvelous course gives you a solid understanding of SCSS and Angular Material theming. It doesn't matter if you are new in Angular or you are experienced, everyone would understand and bring something new into daily coding after finishing the course! Looking forward to turning my new knowledge of Angular Material into action.

Read Less
5 star rating

Great workshop!

Sam Velych

Thank you for this course, Dmytro! I wish I found it earlier when my team just started the greenfield project and we could avoid many problems hacking Angula...

Read More

Thank you for this course, Dmytro! I wish I found it earlier when my team just started the greenfield project and we could avoid many problems hacking Angular Material. The workshop is relatively short but pragmatic.

Read Less
star rating

Read Less

All Lessons From the Course

  • 1

    Intro

  • 2

    Legacy: Theming App with Angular Material

    • Create an Angular App for the Workshop

      FREE PREVIEW

    • Adding some Layout to the App

      FREE PREVIEW

    • Migration from CSS to SCSS

    • Migration from LESS to SCSS

    • About Style Encapsulation in Angular

      FREE PREVIEW

    • Let's initialise a custom Theme

      FREE PREVIEW

    • About Color System in Material Design

    • How to add additional colors to Angular Material (success & info color)

    • Theming our own component

    • Improve Theme for our Custom Component

    • Typography in Angular Material & how to configure it

    • Light off - Dark Theme Implementation

    • How to load our Themes lazily

    • Reduce Bundle Size for our Styles

    • Fix Typography Bug - changing of global Typography Selector

    • Density in Angular Material & How to adjust it for custom Components

    • How to override default properties in Angular Material

    • How to work with Elevations (Shadows)

    • Migration to Angular 12 but keeping old Theming API

    • Angular Material 12 and overriding of "defaults"

    • Overview of the new Angular 12 Material Theme API

    • Improving UX by implementing Strong Focus Indicator

    • Migration to Angular 12 Material Theme API

    • Switching Graphic Elements (aka images, logos) between Themes

    • UPD 1: How to override Background/Foreground colors

    • Migration To Angular Material 13

    • Migration of the project to Angular 15

    • Migration To Angular Material 14
  • 3

    SASS Language Essentials

  • 4

    Remastered: Theming with Angular Material 15

    • Initial Project State Setup

    • Project Layout & Angular Material Installation

    • About Style Encapsulation in Angular

    • Custom Theme Initialization

    • Overview of Angular Material Theming API

    • Anatomy of Material Theme Config

    • Understanding the Theme Color System

    • Configuring Primary, Accent & Warn Colors

    • Configuration of Foreground and Background colors

    • Creating a Custom Color Palette

    • How to work with Elevations (Shadows)

    • How to Configure Typography for the Theme

    • What is Typography Hierarchy

    • How to configure Density in Angular Material Theme

    • Theming Custom Components (Colors)

    • Theming Custom Components (Typography)

    • Theming Custom Components (Density)

    • Theming Custom Components (Multiple Component Color Variants)

    • Theming Custom Components (Elevations)

    • Reducing the Theme bundle Size

    • Refactoring and Splitting Theme Structure

    • Implementing the Dark Theme

    • Splitting Themes Into Separate File Chunks

    • Conditionally Switching Between Dark/Light Theme Without JavaScript

    • Lazy-Loading the Themes

    • Loading Theme on Demand

    • How Keep Selected Theme Persistently

    • Removing Warning About "Missed Angular Material Core Theme" (which is not)

    • How To Apply Additional Colors To the Theme

    • Scoped Styles (Sub-Theming) in Angular Material Theme

Meet your Instructor

Google Developer Expert in Angular | Microsoft MVP | Author of Decoded Frontend

Dmytro Mezhenskyi

My name is Dmytro Mezhenskyi. I have been working as a Frontend Developer since 2012 and I have experience with different projects, different scales, and frameworks. In 2020 I decided to run my YouTube channel "Decoded Frontend" about Web Development where I share my knowledge. Teaching has inspired me a lot and I decided to continue with it also on other platforms in order to help hundreds of people to be better developers.

Developers About the Instructor

If you need help, this is your guy!

by Markus Hatvan (markushatvan.com)

Dmytro is a specialist when it comes to JavaScript frameworks, and I am amazed by the speed at which he can output high-quality code. I have worked with him on two projects in the past and always appreciated his constructive feedback in code reviews. Apart from coding, he can also teach advanced technical concepts, so if you need help, this is your guy!

Money Back Guarantee

If the course doesn't meet your expectation, you can request money back within 14 Days after you purchased the course
Ok, l want to try
14-Days Money Back Guarantee

Still not sure?

Then check out the first course sections for FREE

Try Free Version

FAQ

  • How I can book 1-on-1 Personal Training?

    If you purchased the course with an option that includes "1 Hour Personal training" you can schedule a call following the link you got in the "Welcome" email.

  • How I Can Get Access to Private Github Repo

    After purchase, you will get an invitation link within 48 Hours. If it didn't happen, please contact me via [email protected]

  • Does This Workshop Cover Angular CDK and Material Components?

    No, this workshop is focused only on Angular Material Theming capabilities.

  • If I am a new to Angular will this course help me?

    This course is designed for developers who has already at least some very little experience with Angular & Angular Material. If you just started with Angular I would recommend you to get back to this workshop later :)

  • Is the Workshop updated to Angular 15/16?

    At this time the course was migrated to Angular 14. Currently, this course was re-recorded with Angular 15 and the new version is represented as a separate course section

  • Which Angular version is being used in the Workshop?

    The Workshop is focused only on the latest Angular versions (11 and higher) though it might work also for Angular 9/10.

  • What if I Have Any Problem With Purchases?

    If you experience any issues or have any questions you can always reach me via: [email protected]

  • What Is Included in the Most Expensive Course Variant?

    This option means that besides the course you have 5 hours of consulting service from the instructor regarding Angular Material Theming. It can be code analysis, advice, training, mentoring, coding, etc. It works the best for small teams or startups. Before purchasing this option it is better to clarify it via [email protected]

🔥 Get All Courses with Discounted Price 🔥

Made with ❤️

by Google Developer Expert in Angular