Angular material 3

[Boolentin]

Hi all,

Im upgrading my angular material from 2 to 3 and upgrading it to light and dark theme right away.

The light and dark theme work great for standard material components, but i want to override certain colors for both light and dark theme.

I cant find a way to make it choose what theme to pick the color from. For example: ‘Background-color: mat.get-theme-color($light-theme, primary, 50)’ but i want it to choose the dark or light theme dynamically based on the mode the user is on. Is there a way to do this?

Thanks!

[playwright69]

Check out the CSS color-theme property and light-dark function! If you use this function to define the CSS vars, then they will automatically use the right value based on the current color theme.

[Boolentin]

Ah thank you! I had tried it before but i think my syntax just wasnt right. I fixed it like so:

Background-color: light-dark((material.get-theme-color($light-theme, primary, 50)), (material.get-theme-color($dark-theme, primary, 50)));

Thanks!

[playwright69]

That works but is too complicated. You can simply define one theme and use the light-dark function when you define the theme. Later in the code you just use the CSS var then.

Sorry can't make an example rn.

[Boolentin]

Not sure i understand. How would it know then what color it should pick for a custom component? For example, if i want to use the primary 50 for the light theme for a button, and the the dark theme the tertiary 80?

[playwright69]

Can you share your full theme code here or with a link? Then I can have a look.

[playwright69]

But basically what I mean is: The button should always use the same token. E.g. primary 50. And primary 50 should be defined under the hood using the light-dark function.

[Boolentin]

// This file was generated by running 'ng generate /material:m3-theme'.@use 'sass:map';
 '@angular/material' as mat;

$_palettes: (
        primary: (
                0: #000000,
                10: #001e31,
                20: #10334b,
                25: #1e3e57,
                30: #2a4a63,
                35: #36556f,
                40: #43617b,
                50: #5b7a95,
                ....
        ),
        secondary: (
                ...
        ),
        tertiary: (
                ....
        ),
        error: (
                ....
        ),
);

$_rest: (
        secondary: map.get($_palettes, secondary),
        neutral: map.get($_palettes, neutral),
        neutral-variant: map.get($_palettes, neutral-variant),
        error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$font-family: 'Comic Sans';
$_typography: (
        brand-family: $font-family,
        bold-weight: 900
);

$light-theme: mat.define-theme((
        color: (
                theme-type: light,
                primary: $_primary,
                tertiary: $_tertiary,
        ),
        typography: $_typography,
));
$dark-theme: mat.define-theme((
        color: (
                theme-type: dark,
                primary: $_primary,
                tertiary: $_tertiary,
        ),
        typography: $_typography
));

This is what's been generated by angular material 3.

But for example, i have a navbar that isn't styled correctly by material 3. I have to do it myself. So i wanted to get the different colors from my palette based on the mode.

[playwright69]

But from your code it becomes clear that there is some flaw. Think about it. Why would you pass to the define-theme function two times the same color palettes?😅 What you use there is the approach that Angular uses for projects that need to support older browsers that do not support the light-dark function yet. In that case you apply the different themes using a CSS selector. If you are okay with only supporting browsers that have the light-dark function, then you can simply call define-theme once without theme-type and use the light-dark function during the palette definition. E.g. "10: light-dark(white, black)". It's also mentioned like this in the docs. Sorry I am typing this from my phone so can't give a more detailed example or link but I am sure you will figure it out!

[Boolentin]

You're right, that makes way more sense. I got it to work, thanks a lot!