More custom theme ability

[ratatoeskr666]

🗣️ Foreword

I really like this package but I think it's functionality is a little bit narrow. Therefore I'd like to ask if my following feature requests would find some advocation. I'm also ready to implement those (already did in a fork) but I'm not sure if they fit into this package's vision / concept.

❕ Problem Statement

I'd like to have the ability to load themes from a theme config. Those config files can be loaded from file or from a server, doesn't matter (would not be part of the package). These configs may have a structure like this:

export interface Theme {
  name?: string;
  mode: 'dark' | 'light'; // or a boolean
  palette: {
    primary: string;
    accent: string;
    warn: string;
  }; // material palette colors
  typography: {
    body: string;
    ...
  }; // font-families for various tags - maybe dynamic and optional properties
  background: string; // Background color
  assets: {
    [key: string]: string
  }; // dynamic map for custom assets (e.g. a company logo for dark or light backgrounds)
  customVars: {
    var: string;
    value: any;
  }[]; // custom variables for custom styling
}

There is one problem though: currently there is no way to set the background color. But I've already solved this issue in my fork. Unfortunately angular material is chaos regarding this. There are these variables:

  --palette-background-status-bar
  --palette-background-app-bar
  --palette-background-background
  --palette-background-hover
  --palette-background-hover-alpha
  --palette-background-card
  --palette-background-card-outline
  --palette-background-dialog
  --palette-background-disabled-button
  --palette-background-disabled-button-alpha
  --palette-background-raised-button
  --palette-background-focused-button
  --palette-background-focused-button-alpha
  --palette-background-selected-button
  --palette-background-selected-disabled-button
  --palette-background-disabled-button-toggle
  --palette-background-unselected-chip
  --palette-background-disabled-list-option
  --palette-background-tooltip

And than there is MDC which brings it's own wonderfull variables like:

--mdc-elevated-card-container-color
--mdc-outlined-card-outline-color
...

So making setting background color a thing, A LOT of changes needs to be done.

❔ Possible Solution

I don't want to talk about a solution because first I want to find out if there is a need for the following features:

• Being able to load a theme by a theme config
• Being able to set a background color
• Being able to retrieve asset urls (as Observable<string>) for each theme. E.g. <img [src]="logoUrl$ | async" alt="My company logo"> readonly logoUrl$ = this.themeService.getAssetUrl('logo');

⤴️ Describe alternatives you've considered

Alternativley I would create a new package for this purpose. I don't want to change material-css-vars too much but if you also think these feature fit here perfectly then I'd rather contribute here!

[json-derulo]

With v5, the variables for foreground and background colors have been removed. There were major issues with it using the MDC-based components, especially filling the variables with the correct values. Otherwise it can easily happen that an application using angular-material-css-vars uses different background and foreground colors than an Angular Material application with a prebuilt theme, which I want to avoid if possible. I didn't find a way yet how to fill those variables with the correct values without a lot of manual effort. However, Angular Material announced that they will soon add a token-based theming API, which could make this possible in a good way.

I'm open to suggestions and pull requests which consider the points I mentioned. I agree, in general it seems to be a feature which fits quite well to this library.

[ratatoeskr666]

I'd say, let's wait for the token-based theming API, because currently, Angular Material is a mess... Some components use mdc-variables and others don't. Also material scss uses global variables which are being overwritten before mixins and reset afterswards... it's really scary what they are doing under the hood.

[json-derulo]

Update: The token-based theming API didn't make it to Angular v17, so we need to wait a bit more. But apparently they are actively working on it.

[mudassirkhanShipthis]

Have you managed to find a solution for applying customized background colors in your Angular application, especially considering the challenges mentioned with the removal of background color variables in version 5 of Angular Material CSS Vars? If so, how did you approach this issue, and what were the key considerations in ensuring consistency with prebuilt themes and MDC-based components?

With v5, the variables for foreground and background colors have been removed. There were major issues with it using the MDC-based components, especially filling the variables with the correct values. Otherwise it can easily happen that an application using angular-material-css-vars uses different background and foreground colors than an Angular Material application with a prebuilt theme, which I want to avoid if possible. I didn't find a way yet how to fill those variables with the correct values without a lot of manual effort. However, Angular Material announced that they will soon add a token-based theming API, which could make this possible in a good way.

I'm open to suggestions and pull requests which consider the points I mentioned. I agree, in general it seems to be a feature which fits quite well to this library.