Angular Material Custom Theme Tutorial

[@QuickZ_]

This video is outdated today. Follow the official guide and it will work. I got a bit confused by their step by step. But combining it with what Max said here it actually made more sense even though the implmentation API is obsolete.

[@josemanuico5613]

is there any good tutorial? i need to change the default colors . Angular 15

[@pebito]

A short, concise and easy-to-follow tutorial. Gotta admit, this one saved me at work, again :) Thank you for posting these!

[@academind]

Very happy to read that, thanks so much for sharing this!

[@davidmcdougald6695]

Thanks for the quality MATERIAL. I'll see myself out

[@abhishekholani9234]

Simply great introduction to theming in Angular Material

[@haraldo007]

Yes but what happens if i don't want to use those palettes ? How should i include my own palette ?

[@andyhaas8984]

Is there an upgraded video? What you are showing is what is different in the Angular Material documentation.

[@marcosauzier328]

Greetings from Brazil, just want to say thank you for this content and good luck on doing the great job!

[@academind]

Thank YOU for your comment Marcos, greetings from Germany :)

[@HaakonHestness]

Max - You are the man. Once again you have taken that crappy online documentation and made it actually make sense to me. Thank YOU! :)

[@academind]

Awesome to read that Haakon, thanks a lot!

[@SwapnilSoni]

Hi sir, can you please upload one tutorial for creating a dark theme switcher with angular material? :3 will be so helpful

[@thales-barbosa-bento]

Thanks for your help. Here in Brazil, the videos is very old, and theach in angularJS, old versions...

[@Dylseat1]

This work too if a choose costum for the prebuild theme?

[@alankrug3993]

This tutorial is PERFECT! Thanks

[@bl8nc]

You are very very good at explaining tech; respect good sir!

[@niranjanadhyapak883]

Couldn't have been explained any better. Thanks a lot for all your wonderful tutorials on MEAN stack technologies. Keep it going, help us learn. Danke ;)

[@academind]

Thank you for your absolutely fantastic feedback, I'll try my best to keep it going :)

[@jaimebula2061]

Thank you, your explanation was way better that the one available in the documentation. I will subscribe.

[@academind]

Awesome to read that Jaime, thank you for your support and welcome on board :)

[@katdobermann]

Hi sir max. Can you add server side pagination to the table using firebase?

[@OnreinKalfje]

you still have the styles.css file. Is it empty? Do you use that alongside this theme?

[@dayvidkelly7683]

Is it possible to make another video? Because I think they updated the documentation and this video is kind of obsolete.

[@Mik3aglin]

Very well explained. Thanks for sharing.

[@elevatetechai2024]

How is the configuration when we want the theme to be dark how to change the background and foreground ?

[@DecodedFrontend]

Cesar Vega you should use mat-dark-theme function instead of mat-light-theme

[@leonrokic3113]

Great material, once again. Than you Max.

[@MZ-uv3sr]

This is really useful. Is there a way I could make another category other than primary accent or warn, that I'd use just for a specific kind of element? I want to turn a slider green when enabled and red when not.

[@LeslieSolorzanov]

Can someone help me? I want to adhere to a theme in scss. Is it possible to just assign a background color referencing the theme?

[@mayurisapkal3092]

Well explained 👏 Thank you😊

[@fieryscorpion]

Great video. Thank you!

[@marvin_e]

hey.thanks you for your tutorials..can you make a dynamic slider that gets images from the database ..using php

[@marcusviniciuspratamarinho5556]

Very good material to learn material =D Thanks man

[@academind]

Awesome to read that Marcus, thank you!

[@kushalbaldev8490]

Sir how to laod .scss file dynamically I am looking for toggle type thing for styles by just toggling I must be able to change scss file refrence

[@sanyamchaurasia1542]

How to change the theme? How to make it interactive with the UI?

[@SuperToughnut]

Thank you so much! The documentation was confusing to me.

[@stannone7272]

Hey Max, this tutorial is useful as always.Thx!

[@academind]

Thanks a lot for your wonderful feedback Stan!

[@ljekidexkg]

Thanks Max, Great tutorial - cheers !!!

[@daiokaio]

Excellent introduction. Thanks a bunch.

[@abenjamin13]

This is fantastic thank you 🙏 Max.

[@javadziaebrahimi3568]

why you are so awesome in teaching??????????//////

[@santoshkumarsahoo8358]

As always this guy rocks !!!!

[@josephjabbour]

Hi Max, is it possible to have bootstrap theming which changes depending on the material theming? in other words, I need the bootstrap colors to change dynamically whenever i change the material theme.

[@Niconelli12]

How do i find typographies (fonts) in _theming.scss?

[@mohamedelmdary8106]

hey max , can you explain fxLayout with fully Custom

[@josemanuico5613]

an update for material 15?

[@christian.a2928]

for some reason, angular is still using the deeppurple-amber theme from before even though i don't have it specified in my document. any suggestions?

[@adamhilali806]

can we do it with css?

[@madtin]

what if I don't want a material color? I just want a different color but It just fails to compile..

[@arpitmeena4818]

Hi Max, is it possible to maintain margin and padding or custom classes based on a particular theme?

[@paulkelele2786]

For backgroung and foreground it's not working

[@danielbordeleau]

Thanks! Really clear explanations!

[@academind]

Really great to read that Daniel, thanks so much!

[@jyothikrishn1202]

Hi Max, I've a doubt in adding $my-theme-accesnt, Why we need to add A200, A100 and A400 ? Is there any specific order to specify these ? Thanks

[@khalilrezgui6988]

Default, light, dark

[@1974bugaboo]

Hi Max, thanks for the tutorial. I got this failed to compile error. Can you help me troubleshoot? Also how do I add custom hex code that are not part of the material color palette? ERROR in ./src/eors-theme.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/eors-theme.scss) Module build failed: $color: map-get($palette, $hue); ^ Argument `$map` of `map-get($map, $key)` must be a map in /Users/tadineemarsili/Documents/WO24-EORs/Prototype UI/EORS/node_modules/@angular/material/_theming.scss (line 1271, column 11)

[@moulanamadani5872]

Can you please make a video on material data table fetching Data from HTTP POST method , I'm using Material 11.2.4. Would be a great help and I can finish my project if I got this clear.❤️ Waiting for ur reply..

[@danilocecilia7831]

awesome tutorial, let me ask you a question, is there any simpler way to get a sass value from typescript ?

[@academind]

You can't really access your sass variables from within typescript, that's not possible to my knowledge

[@danilocecilia7831]

thanks!

[@vladmartian]

Hi Max, thanks for these tutorials. Are awesome. I have an issue with VS code and material in the way that the VS code doesn't recognize the mat- tags. All my mat tags are underlined in red. Compiling the app is ok and it works. The app was generated using dotnet 2.1 template and updated to angular 6. Do you have any ideea how can I make VS Code recognize the mat- tags? Thanks

[@brendanmoriarity8714]

Hey Max, Angular CLI won't compile my scss file and won't recognize it. What could I be doing wrong? I can share files and such if needed.

[@tomcatbuzz]

Great! Just what I was looking at learning for my Angular projects. Looking forward to your Angular Udemy courses after I finish with the VueJs ofcourse. Thank you!

[@academind]

Thanks a lot for your comment and for your support here and on Udemy! Happy to read that you enjoy my videos :)

[@MrLeetkrew]

Hey, Maxx. Can you show how to do a gloxal themes scss file? I need a reference to the color variables in my components. :/

[@mza1409]

Herr Max, do you plan on making any React tutorials with Material-UI compononents? Thanks.

[@academind]

Not at the moment to be honest, but I'll put it on the "potential topics" list, so thanks a lot for the suggestion!

[@pikaijzer]

Thank you very much, this made it clear to me.

[@academind]

That's really great to read, thank you very much for sharing this!

[@GlobalCompilations]

Can I customize more than just colors? What about font? ;)

[@nielskersic328]

Those are not specific to the Material themes. I would just add it in the component's styles or maybe the root styles.(s)css file if you need it application-wide

[@ybenjamin]

Man I love this guy!

[@academind]

Thanks so much Yusuf!

[@julioagustinmayorga2084]

is there one like this for React?

[@sandum150]

Hey Max! Thank you for this course. Are you going to continue lessons with angular material, or this is the last one?

[@academind]

Thank you for your comment! At the moment, this is the last video of this series but I might create more Angular Material videos in the future. In case you want to dive deeper, I also got an entire Angular Material course on Udemy: www.udemy.com/angular-full-app-with-angular-material-angularfire-ngrx/?couponCode=ACAD_M

[@emmanueldadem760]

Danke für das tolle Tuto

[@academind]

Danke DIR für deinen super Kommentar Emmanuel!

[@sidhanthprabhudesai7834]

what is that " M " warning shown?

[@mgerry1992]

You mean in the explorer window in Visual Studio Code? M = the file has been modified, U = the file is untracked (i.e. it has no version tracking).

[@sidhanthprabhudesai7834]

@@mgerry1992 Yes . Got it Thanks a lot ☺️

[@gerardsk8ordie]

what is the accent color?

[@Fullstackdev18]

Thanks, man. You are the best :)

[@academind]

YOU are the best, thanks a lot for your support!

[@anastasijad4830]

i love you and thank you!

[@betToWin111]

Hey Max, I really like the videos so far. But generalizing that Boostrap basically just provides classes for styling is incorrect. Boostrap provides an amazing scaffolding frame-work, screen-reader, mobile-first, and styling. But, thanks again you've helped me better understand and how implement a Custom Theme.

[@Velaystar]

youre using the same d#mned colors!

[@rahulkumar7289]

Thanks man!!!!!!!!

[@javascript_developer]

Awesome thanks

[@AbdullahAlSalem_abood]

Thanks a lot

[@codewithsub5083]

Nice video sir Please make a video on Angular Universal. Thanks

[@academind]

I got a section in my "Angular - The Complete Guide" on Udemy. I won't rule out covering it here on KZbin, too but I got too many ideas and too little time ;). I'll try my best though

[@rajnish1002]

Thanks

[@musoverda5500]

Hi, Max! I've always wanted to ask you, where did you get such good English? You're German, right?

[@academind]

Thanks a lot for your great feedback Moe! I'm German yes, but I think during school/university and also by creating all these tutorial videos you kind of get used to speaking English :)

[@musoverda5500]

Cool! From myself I want to say that you are great at teaching! This is a talent that not everyone has. ) I wish you success in the continuation of your business!

[@belmiris1371]

Thank you!

[@wolfroad]

I really appreciate your video tutorials. It would be great if you could do one on angular portals and portal hosts. I am stuck with an implementation of them 🙏🏽

[@delclecianojunior6235]

Muito bom!!! Great man.

[@andreasrainer4701]

Great tutorial! Yery helpful! Could you maybe also do a video on angular theming with the less style-framework? This would be awesome

[@SkoomaIceCoffee]

psst... where you find all these info, you seems to know more then google themselves.

[@zippix1987]

I would run an even longer advertisement at the beginning ...

[@ilyaLopatin]

Большое спасибо

[@gunjanshrimali2674]

Great

[@uppubhai]

Just noticed after royal wedding that you look like Prince

[@academind]

Yeah, after being married now I felt like it's the right time to release the next video of this playlist :D

[@MaverickYurii]

grait, thnx))

[@TalesAugusto0117]

for more recent versions of angular, is it still possible to do it with Scss or we need to use sass?

[@nileshkumbhar1406]

Thanks