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.
Buy theme builder with discount: angular-materi...
Theme Builder: themes.angular...
GitHub Repo: github.com/shh...
Using Material Color Utilities with Angular Material: angular-materi...
All links: linktr.ee/shhd...
#angular #angularmaterial #materialdesign #materialtheme #angularmaterialtheme #webdevelopment #typescript #scss #cssvariables #themebuilder #angular18 #themebuilderforangularmaterial

[@Garimpador-yd6rd]

Nice, thank you

[@nithinjadhav]

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

[@shahdharmen]

Thank you 👍

[@khalloukhafqa]

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

[@shahdharmen]

Do try it out and let me know if you have any feedback.

[@zakariaebarik4295]

This was really helpful, Thank youu

[@shahdharmen]

Glad it was helpful!

[@uzayrsyed6293]

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!

[@shahdharmen]

They both serve different purposes. I don't think it's right to compare them.
I mostly use bootstrap and angular material together. Bootstrap for layouts, etc and angular material for components.

[@davebudah]

impressive

[@informer9261]

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

[@shahdharmen]

For scss customisations, you can simply do it with Angular Material scss mixins and functions. I have created a new course for it, checkout angular-material.dev/courses/overview/m3-ng-components

[@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 ./app/core/layout/layout.component.theme 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

[@shahdharmen]

- QR code covered, but upon scanning opens the correct repo. I think you already landed on the correct repo, otherwise you would not have mentioned about code mismatch
- initial code is the same, branch is changed due to other updates after uploading the video. But as you could not figure out, I will tell you, it's main-for-tilconf
- layout component theme file is at github.com/shhdharmen/tilconf-m3-angular/blob/main-for-tilconf/src%2Fapp%2Fcore%2Flayout%2F_layout.component.theme.scss, simply clone the repo, it should run fine
- the changes mentioned in the video are not pushed anywhere, they are easy changes and can be done easily by watching this video
Let me know if you need any more help