Is there a way to make custom cards' colors responsive to Material You theme?

[davidsmonteiro]

I apologize in advance if the question is dumb or explained somewhere I missed, but I wanted to ask if there's a way we can call the accent colors to customize custom-made cards and react when the colors change. I'm following My Smart Home's YouTube tutorials to create some elements for my dashboard (here, for reference), but I would love that the different accent colors dynamically updated based on the color set for the Material You theme.

This way, the dashboard would stay consistent regardless of the base color. I know that the Material You Utitilities create a helper for the base color, but what about all the other colors of the theme?

As an example from my current WIP dashboard:

I would want to dynamically change the accent colors for the vertical line for the calendar, and the room card highlights.

[davidsmonteiro]

Just found your answer to this question here, thanks. Leaving it here for future people that may have he same question:

The theme files have all of the palette colors in a default list, even if they aren’t used. There aren’t hundreds of colors, but there are about 100 between the light and dark palettes. You can reference them like so:

ha-card {
background: var(--md-sys-color-tertiary-container);
}

[Nerwyn]

That default list is out of date FYI, I've linked to the updated one below.

[Nerwyn]

Absolutely! Take a look here at the theme source file. Every variable in that is a CSS custom property that can be accessed using the var function and by adding -- to the beginning. So primary-color can be accessed using var(--primary-color). You can use either Home Assistant custom properties or the material design system tokens (the latter would only work with this theme, and the light and dark mode custom properties are the same).

The base color is just the initial source color provided to material color utilities for theme generation and usually isn't actually present in the generated theme color palette itself. I also don't think you'd be able to access the base color in CSS from the input helper. The closest within the theme would be --md-sys-color-primary/primary-color.

As for material design system tokens and their roles:

• primary/secondary/tertiary/surface are used for backgrounds or things you want to stand out.
• -on primary/secondary/tertiary/surface are used for text/icons on top of their corresponding backgrounds.
• -container are used for containers (like cards) on top of backgrounds.
• -on-container are used for text/icons on containers.
• outline and outline variant are used for dividers.

[davidsmonteiro]

Brilliant, this is everything I needed and more! Thanks so much for the support.