Exclude dark theme styles about angular-material-css-vars HOT 8 CLOSED

I was able to get pretty far dynamically switching between dark and light mode by reassigning the variables inside a .dark-theme class block:

.dark-theme {
  --palette-background-background: $dark-background; 
  ...
}

This got me very far without doubling the bundle size. Pretty much everything worked as needed, but a few components had colors slightly off. It turned out, the problems are all in places where Material components use is-dark from the theme to pick different colors. There are over 10 different colors in around 5 different mixins that they use it for.

I think we could still make this approach work if we selectively call the 5ish component mixins that do special things based on the state of is-dark, and still use the approach above for background/foreground palettes.

I would have to try this out to see what the actual size savings are, or if it's worth the extra work. Do you have thoughts on whether this would work?

from angular-material-css-vars.

@johannesjo could you explain the need for light/dark being built in? Wouldn't you just want to generate the vars, and then swap CSS variables out at runtime with the appropriate values?
...

Wait I think I understand. The light/dark theme mixins produce different backgrounds OUTSIDE of the accent. So as an admin theming your app, you would either specify if your theme was light or dark (swapping out appropriate backgrounds). Primary/accent/warn are still driven from defined color vars.

from angular-material-css-vars.

There is no "need" for it to be build in, but it is a core distinction for the angular material library and as this package is all about enabling custom user themes, it made sense to me, to include one as default. It should be pretty easy to deactivate during initialization though:

@mixin initMaterialCssVars(
  $dark-theme-selector: false,
) 

There is no super accessible mechanism yet to just use a dark theme though. I am open for suggestions how to handle this in a better manner.

from angular-material-css-vars.

I am closing this, but feel free to reopen this, if you were unable to come up with a solution.

from angular-material-css-vars.

from angular-material-css-vars.

Not sure to be honest. In theory this should work pretty well without setting --palette-background-background as described above, if angular materials underlying color variable concepts would be used super strictly everywhere, but unfortunately they are not. They are conditional styles in addition to the color variables being applied. You can get an overview over those by search for is-dark insidenode_modules/@angular/material/_theming.scss.

All those places (and there are definitely some) would need to be patched out. Another approach might be not to use angular-material-theme at all, but a custom implementation with just those places with conditional styles while always using the light theme as a default.

from angular-material-css-vars.

@henke-d please don't borrow threads. İt gets messy...

from angular-material-css-vars.

Not sure if this is helpful, but what we could do is making both light and dark optional like so:

  @at-root {
    @if $light-theme-selector {
      @include angular-material-theme($theme);
     }

    @if $dark-theme-selector {
      $mat-css-theme: $dark-theme !global;
      #{$dark-theme-selector} {
        @include angular-material-theme($dark-theme);
      }
    }
  }

This would give you the option to half the size in case you only need one of the two. This should already work if only using the light theme but not for when you only want to use the dark theme.

from angular-material-css-vars.