Dark theme switching with Angular Material (2020)
Вставка
- Опубліковано 29 лют 2020
- 📣 Check out my full Angular Material Theming Workshop 📣
bit.ly/angular-material-themi...
✅ Use 10%-off coupon code: UA-cam_DISCOUNT (Only 2 coupons left)
In this video we will learn how to implement dark theme and dark mode switching in your web application by using angular material theming capabilities. In next videos we will continue to explore more and more powerful features from Angular Material library.
Please leave you feedback in comments so I would be able to improve content quality :)
Time code:
00:01:19 - Here ends my talking ;)
Explore more on my channel:
✅ Check out my other videos about Angular Material Library: • Angular Material
✅ And there are some topics about Angular Material CDK:
• Angular Material CDK
✅ Quick subscribe: / @decodedfrontend
🔗 Links:
Link to GitHub repo: github.com/mezhik91/angular-t...
Angular: angular.io
Angular Material: material.angular.io
Contact me: dmytro.mezhenskyi@gmail.com - Наука та технологія
![Angular Material - Custom Component Theme [Basics, 2020]](http://i.ytimg.com/vi/A4qp8RfQc54/mqdefault.jpg)
🔥🔥🔥Do you want to master *Angular Material Themes* like a PRO? Check out my new Workshop where you will find a lot of advanced tips & tricks which will help you to make your themes maintainable, lean & consistent! Limited 50%-off discount is about to expire very soon: 🔗 bit.ly/angular-material-theming-workshop 🔥🔥🔥
as someone who recently dive and started in angular, your channel will be helpful to me . subscribed!
Thank for your warm feedback! It motivates me a lot :)
Very good video. Helped me a lot!
Hey Dmytro, looks like you really know Angular. Looking forward to watching more of your videos.
Thank you, Eddie! I appreciate your feedback ;)
You can find even more advanced things in my other videos. Hope those will be also useful for you.
Simple and effective. Thank a lot.
Very Nice and useful. specially in part that you add class to the document body for overlays. you save me a lot of time. BIG LIKE
Big thanks ;)
Great video, just that i needed, thank U' so much!!
Welcome! I am happy to know that the tutorial helped you :) I hope my other videos you will find useful as well!
Wow, exactly what I was looking for
Thank you! I am happy to hear it :)
Thank you for the info!
Thanks . You made my day
Great job, that was really useful
Thank you, Hicham! 😊
Yes, it's a very useful video. Keep doing like this.
Thank you! I will be keeping it up 😉
Very nice and useful
Damn! You absolutely genius. please keep it up brother!
Thank you! I will ;)
@@DecodedFrontend Hey bro please help me! there is a reactive form in my project and when i active the dark mode that form's height increase and because of that it's look weird.
its really helpful
thank you
Awesome content. Learnt something new.
Glad to hear it! Thank you ;)
THANK YOU!! Goldmine!
Thank you for your feedback ;)
Thanks for your help.
Welcome! :)
Congratulations for your video 👏🏻👏🏻👏🏻
Many many thanks!
Great
Hi Dymtro , Can you pls make a video on responsive designing and the best practices , I have always worked on web but starting responsive for the first time , but its difficult to chose between angular flex-layout , angular material itself , media queries or other 3rd party . what to use where to use as in at a global level rather than importing at all components and all . It will be really helpful . thanks
Hi Nixon,
Great suggestion! I will take it into consideration. Thanks for an idea.
As quick response I can say that you usually need all of them. As example flex-layout it is great declarative way to manage different grids and layouts for different viewport sizes but it isn't applicable to ... as example fonts which may also be differ for different screen sizes and there you will need to go with media queries. Also you may need to change feature logic depending on screen size and there could be a great choice BreakpointObserver module which I covered in on of my video: ua-cam.com/video/1Z4QlRYXINc/v-deo.html
So... this is quite hard to unify it because very often it depends on concrete project/component requirements which are different from project to project :)
I don't have those Angular material schematics I mean ANgular/material dashboard, table and so on when I installed the NxConsole
how can I add those items to my IDE?
Thanks very much! 🤣
Excelente video. It helps me a lot. But i have to apply the theme class to the body, not the app-root because if not, the matDialog crash.
Hi Nico! Thanks for your feedback.
Exactly! I actually covered this case and explained the reason in exactly this video :) Click on this time code: 00:10:35
@@DecodedFrontend Oh! My bad. I realize i didn't finish the video. Sorry! I also added a service that persists the value selected on localStorage. And it looks great. Thanks again! and sorry
great video bro. one question though; how to set conditional color as per theme in lazy loading module's style file. don't want to put all my style in the root style file
Hi Mehedi! Thanks for feedback! :) If I understood you right this discussion should help: github.com/angular/angular-cli/issues/5880#issuecomment-499876894
So you configure and generate different themes separately, so you get separate css file per theme and then programatically you load it when it is needed. I hope it will help
@@DecodedFrontend exactly what I was looking for.. thank you a lot.
Hi Dmytro, do you recommend using yarn over npm in 2022 (since npm has also improved in the last years), and which versions of them do you like?
Hi Rakia! I didn't investigate this question last time but in most cases, I don't see any dramatic difference between those 2 in 2022. I like Yarn more because I got used to it many years ago and I think it is still faster than NPM. Also, Yarn has some features like Plug’n’Play and Zero-Install which npm doesn't support.
I like yarn as well but although I'm still using its version 1.22 and haven't tried its version 2 yet.
@@tekforge I tried yarn 2 just for testing purposes but mostly I use Yarn 1 too :)
Thanks for the video. How can I add my custom theme with my custom colors??
Hi! Thanks for your feedback. I am sure you will find an answer in this video: ua-cam.com/video/99T-zQLcluM/v-deo.html 😉
4:37 I did ng add @angular/material but instead of getting all that scss I only get @import "@angular/material/prebuilt-themes/deeppurple-amber.css"; help pls
you most probably have picked some pre-build scheme rather to chose "custom"
how to do preserve the last theme whatever I toggle (dark/light) in my project. If I toggle in dark mode so day after whenever I will open my project I want to see this dark mode again. May you explain this in another video.
Hello! thanks for suggestion. It is quite small topic for a separate video but I implemented this functionality in tutorial's project for you. See this commit: github.com/mezhik91/angular-theming/commit/1b4633a619b81e3903fcce4b161384ad0f513090
Short explanation: I use local storage in order to store active theme and then in app components inside OnInit I try to read which theme was active last time. If nothing was found in localStorage I use light theme by default.
You can use LocalStorage and take the value from there
@@DecodedFrontend thanks!
How did you manage to get the scss file like this and app navigation directory by default? Currently generating new projects didnt have all these stuffs instead they point to specific style.scss file in the styles array inside angular.json
Which Angular CLI version do you have?
@@DecodedFrontend 10.1.2 the latest version actually I am trying on the latest version by creating new project to look into this stuff
@@kushalbaldev8490 Ah, I think I know what is your problem. The scss file like I have generates not CLI but Angular Material Schematic which is being involved when you run `yarn ng add @angular/material`. Just run `yarn ng add @angular/material` in your root application folder and you will see the dialog which I had and you can pick custom theme
@@DecodedFrontend okk thanks will get back to you after trying..!!🙂
@@kushalbaldev8490 and navigation folder is just a new component which I created separately in the video. You can use NX extention which I used or run `ng g c navigation` it root folder of your component
how can I achieve the same using styles.css instead of styles.scss?
I am afraid it won’t be possible. You have to use scss to use the mixins shown in the video.
Try to zoom the editor Hard to Read things from there
Thanks for your feedback and sorry for inconvenience! I fixed this in my next videos.
Hi, I am using css for my project. How to adapt to this?
Hi! Well, I do not see an easy way to do it. You have actually 2 options:
1. Very unmaintainable and cumbersome. You can create separately theme.scss file where you configure theme as it was done in the video and then create some script which would build it and put output (css file) in dist folder after application was build. Then you can include this file in index.html.
2. That's what I would recommend - migration to scss. It is actually easier then it sounds. Actually CSS is a valid scss code. You just have to change file .css extensions to .scss (also inside ts files in Component decorator) and in angular.json file change property style from "css" to "scss" and then you can config your theme as in video. I would say that it would be the best way for you.
if you want to extent Angular Material Theme you have to always use SCSS because it was written with SCSS and it relays on different functions/mixins which in other pre-processors and plain CSS just do not work.
@@DecodedFrontend wow, what a great explanation! I think I will go with switching to scss like you recommended. Thanks!
use this:
ua-cam.com/video/2Nmi1sXu12U/v-deo.html
Hello, according to the angular material team this not the best approach, it prompts a warning on the console.
github.com/angular/components/blob/master/guides/duplicate-theming-styles.md
The change is very simple and it seems to work fine.
Thanks for the video!
Hi Pedro! You are absolutely right!👍 The way you mentioned is preferable since Angular 10 but this video was published when v10 wasn't even in beta and the latest version was 9.1 :) But it is good that you mentioned about it, so people can see a better way of how to handle this 😉 I am also planning to make remastering for this video when v11 will be out.
@@DecodedFrontend waiting for version 11 of this :)
especially the color theming :D
Братюнь, наши в Галівудє?
ага 😂
@@DecodedFrontend контент якісний - то що треба.
@Dev Plus Plus I have some other topics which are required in IT industries to take some concrete decisions before building applications in angular is.
1. Why to use angular material for building apps?
2. Difference between angular material and bootstrap.
3. What bootstrap misses which angular material don't have and what angular material misses that bootstrap don't have?
4. Can we use bootstrap and angular together?
5. Nx extension that I told in earlier comments like we have schematics in angular material we can generate the same component by angular cli command for material then why to use nx extension?
6. Some best practises for building angular apps like to unsubscribe behavior subjects after leaving particular scope etc etc.
7. Difference between subjects and behaviour subjects.
8. Change in locles that is app supporting two different languages and can change on a switch.
9. How some common components like we need a window in which the contents are dynamic like there must be only common header else we might be able to set the different components run time.
10. How to allow to access the child routes to only some person having specific roles. Like from the side nav one can only see some views having guest role and more views having admin role etc etc.somewhat like role based authentication.
Its up to you how you organise but I have already subscribed it and waiting for these amazing stuffs...!!
1080p
very helpful video , thanks a lot bro
Hey! Thank you for your feedback! Sorry, that was my first video and I didn’t have any 1080p web camera at that time... but in my latest videos you can enjoy fullHD 😉