Dark theme switching with Angular Material (2020)

📣 Check out my full Angular Material Theming Workshop 📣
✅ Use 10%-off coupon code: YOUTUBE_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:

✅ And there are some topics about Angular Material CDK:

🔗 Links:

[alexanderleonardo]

as someone who recently dive and started in angular, your channel will be helpful to me . subscribed!

[pazzuto]

Hey Dmytro, looks like you really know Angular. Looking forward to watching more of your videos.

[vishwadinupriya]

Damn! You absolutely genius. please keep it up brother!

[mehrtashsouri]

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

[tanujsingh]

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.

[gangareddy]

Yes, it's a very useful video. Keep doing like this.

[nixonnelson]

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

[krishnapanigrahi]

Awesome content. Learnt something new.

[jeffersongil]

Great video, just that i needed, thank U' so much!!

[kushalbaldev]

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

[hamidhassani]

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?

[elnicopons]

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.

[syedhannan]

how can I achieve the same using styles.css instead of styles.scss?

[mehedihasansony]

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

[pradeeppathak]

Thanks for the video. How can I add my custom theme with my custom colors??

[tekforge]

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?

[tumpudimuralisaikamalsrika]

Try to zoom the editor Hard to Read things from there

[kennyisaboy]

Hi, I am using css for my project. How to adapt to this?

[kushalbaldev]

@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...!!

[pedrinhofernandes]

Hello, according to the angular material team this not the best approach, it prompts a warning on the console.
The change is very simple and it seems to work fine.
Thanks for the video!