Angular Material 18 Dark Theming with System Color Variables!

#angular #dashboard #material

🔗 Official Material Foundation Theme Builder

In this video, we'll add a dark mode to our Angular Material Dashboard using Material Design System Color Variables!

📽️ Video tutorial on design tokens in Angular Material v18

📽️ My courses:

✍️My blog for more free Angular posts:

Socials:

Sections:
00:00 Introduction and Overview
00:02 Setting Up Dark Mode in Angular Material
01:08 Using CSS Variables for Dynamic Theming
02:14 Enabling CSS Variables in Angular Material
05:48 Generating Color System Variables
08:13 Implementing Color System Variables in Angular
12:06 Switching Between Light and Dark Modes
13:58 Migrating to Lemon Squeezy
15:49 Customizing Widgets with CSS Variables
23:25 Conclusion and Future Updates

[becomng]

Thanks for the excellent video!

@9:20 A useful detail I discovered while implementing your technique is that a new configuration option has been added for both color and typography! system-variables-prefix

This lets us use those Material Theme Builder generated CSS variables by simply adding
color: (
use-system-variables: true,
system-variables-prefix: md-sys-color,
),

It's nothing major, but still nice to have.

[DirtySouthT]

hey buddy, do i need to cancel on the buy coffee one? and move to the new one? this is a great video I actually went down the same route but im actually using the material-color-utilities to let the user dynamically change the primary color and saving it to local storage. super cool man. I am trying to figure out how to make this work with tailwind now so these colors can be available and used with tailwind as the default. Thanks for all the videos brother!

[farhankhamran]

First comment. Thanks again for this one.

[birgulkantarci]

Hello, you've done a great job, congratulations!

For the next section, it might be beneficial to include features that would be helpful for many developers, such as

Multi-language support using Angular i18 and (LTR - RTL)
Accessibility with correct language tags (lang), dir), and ARIA
Automatic language support based on the browser's
Thank you for considering these suggestions!

[LarsRyeJeppesen]

Can we still get to some form of "palette" values, for use with TailwindCSS and stuff like that? Those still require to set a palette.

[JianhuaWong]

For those who previously purchased this dashboard, how do we retrieve the new repo with the dark mode added to the dashboard? Thanks

[akhilmanikandan]

Hai you clear me out on something....so the situation is I'm trying to catch and store any and every errors that may pottentially occur in an application and the set a limit for the errors fetched let's say 100....i want all these 100 entries to be sent to the db or somewhere for regular monitoring by my architects....so what the feasibility of writing such a business logic for a long term application....

[davebudah]

How does one use this in css, considering that part of your code is entirely SCSS. Any hints?. I know there is a compiler but it doesn't work for the code on line 79 of your code.

[chickenjoy]

The labels on the charts though didn't change.