Modify Angular Material (v18) themes with CSS Variables using Theme Builder

Theme builder is a tool for Angular developers who are using Angular Material 18 in their project. This tool allows you to build, preview and export themes for Angular Material. You can also share themes simply by using a unique link with your team of developers or designers.

In this video, I am going to explain how to use CSS variables (or CSS Custom Properties) to modify Angular Material themes. Then, I will show how to use Theme Builder to create/modify light/dark themes. And lastly, I will also give you the preview of the source code of theme builder.

#angular #angularmaterial #materialdesign #materialtheme #angularmaterialtheme #webdevelopment #typescript #scss #cssvariables #themebuilder #angular18 #themebuilderforangularmaterial

[jetonpeche]

oh god, thank you !
I don't understand why Google and Angular di'nt create that builder !
it's amazing !

[lorenzogomezmolina]

This is extremely useful, thank you very much sir! 😎

[franciscofdez]

Simply...amazing! I don't understand why Google did not create that builder for its own library😱

[nithinjadhav]

Good job🎉 wishing you all the best for your future endeavours. 😊

[khalloukhafqa]

Really thank you, I didn't try yet but thank you for this useful resources

[uzayrsyed]

Hi Dharmen, Nice video! I was looking into material custom theming before I stumbled across your video. I was comparing bootstrap and material and I would appreciate your input on this. Thnaks!

[ghorpadesomnath]

Nice article. I have added system variables but I can see two :root{} in dev tools. one is my defined system variable and another one is a default one & that default one is not using system variables I have defined. what would be the reason?

[informer]

sir i have project already created with css how to change to scss for cutomizing theme

[voidchannelcontent]

- The qr-code is blocked by your face/camera
- the git repo is not the same as the one you show in the video (not event the branches)
- there are files and configs in the repo you use that you dont explain how you did it
- there is no layout.component.theme in the repo (imported in @use as layout-theme)
- since there is no layout.component.theme, the import gives error and the use of "layout-theme" later causes error as well
- you dont show what you have in the file layout.component.theme

[DirtySouthT]

awesome video and good information, i think material and angular is a bit lacking on things like documentation. i just got the course an almost done i have some questions and clarifications and siggestions that might have confused me a bit.where can i ask or send you a message? thanks again

[claudioandrade]

(if you are running Nx with esbuild, this wont work out of the box)

The course and your project does not work for esbuild. I'm using esbuild with Nx and obvisly angular (very common practice) and one issue is hashing, but even if I consult for dark-theme- (regardless of the hash) still not working, I'm still trying to figure it out but it would be great if u add Nx with esbuild to the course, or a free video explaining it (which helps for maketing the course), so far I paid and can't make it work with the information you provided.

Still, it's a great idea.