[Request] Theming

[jimmyff]

Would be great to include a way of themeing material angular projects using the material color guidelines.

At the moment I'm polyfilling with a load of stripped down sass files from the JS material components (palette, theming, typography etc): https://github.com/angular/material/tree/master/src/core/style https://github.com/angular/material2/blob/master/guides/theming.md

It's working for me for now, I can specify an overall theme, light / dark, and base palette and an accent color. I would prefer if Angular Dart had a way of doing this so I don't need to add a sass hack for each component I use.

[cedx]

A first step would be to allow variables overrides by using !default modifier.

[TedSander]

The build system doesn't really allow using the !default modifier. Our build system is designed to work with really large projects which means we have the restriction of compiling at the leaf level. Currently the Sass -> Css -> Dart Component are each compiled at the leaf component itself (for open source it is at the angular_components package level but the point still stands.) Thus there is no opportunity to override the variables to a different value higher up in the tree such as at your app. We have thought about possible ways to allow the delaying the compilation, but it isn't quite as simple as adding the !default modifier everywhere at the moment.

[cedx]

@TedSander Thanks for the clarification.

[jifalops]

Any development on this? I think I'm close to a workaround by compiling the sass to css before webdev serve or pub run build_runner serve (what the difference is, I don't know), but those commands try to compile the sass themselves. This is proving quite difficult for something that seems essential but I am not finding any guidance anywhere.

[nshahan]

@jifalops

webdev serve is simply an opinionated wrapper around pub run build_runner that defaults some options where it should be helpful for most use cases.

This package includes a builder to perform the CSS compilation that will happen when you run the build. We have done work to make the default path simple to use, so it happens automatically based on the options in the build.yaml file.

The supported method of customizing the appearance of these components in your application is to apply the Sass mixins we provide. Are you having trouble getting those mixins to work in your application?

[jifalops]

@nshahan Yes I'm having some trouble importing the mixins. My theme.scss imports <angular_components>/css/material/material.scss and <angular_components>/css/mdc_web/theme/mixins.scss but webdev serve had trouble importing them so I have a script that I run before webdev serve that compiles all the .scss files in the project to .scss.css. The problem is the .scss files are still there and the serve process tries to compile them.

I'm probably way off the rails but documentation is hard to find and often outdated (blog posts etc).

[nshahan]

@jifalops Make sure you add a dev_dependency on sass_builder in your package. Then when you run webdev serve your .scss files should get compiled to .css before the angular builder runs on them.

https://github.com/dart-lang/angular_components/blob/master/README.md#custom-component-styles

[CarreraPHP]

I was able to make SCSS to CSS compile work by adding below.

If struck with SASS Issue with the Stagehand generated Code. add below code to your build.yaml file

targets:
  $default:
    builders:      
      sass_builder:
        options:
          outputStyle: compressed
      angular_components|scss_builder:
        enabled: true

[nshahan]

@CarreraPHP Take a look at the output you are getting for your project. From this configuration it looks like you might be getting every .scss file compiled to two .css files.

foo.scss --> foo.css by sass_builder foo.scss --> foo.scss.css by angular_components|scss_builder

We use a custom file extension in the css output for angular_components but that should be an implementation detail and you shouldn't need to do that in your project.

[CarreraPHP]

@nshahan, thanks for your clarification. Will check the same in the weekend and come back to you. However the reason for doing so: The application was not building scss file until i added config angular_components|scss_builder. Especially, Not found issue was thrown when i included the package:angular_components/app_layout/layout.scss.css

[aspantel]

@CarreraPHP what did you end up with? Thanks

[aspantel]

So is there a way to globally update theme parameters (i.e. primary/secondary colors) for all components at once? Or even use a custom material theme generated from the material website?

Thanks