Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update theming docs to be more clear about how to structure your theme file to be usable across custom components #1786

Closed
fxck opened this issue Nov 9, 2016 · 29 comments
Closed

update theming docs to be more clear about how to structure your theme file to be usable across custom components #1786

fxck opened this issue Nov 9, 2016 · 29 comments

Comments

@fxck
Copy link
Contributor

fxck commented Nov 9, 2016 •
edited
Loading

If I took this code https://github.com/angular/material2/blob/master/docs/theming.md#defining-a-custom-theme and put it into _custom-theme.scss and included it in my main styles file and then imported it into my components like as shown here https://github.com/angular/material2/blob/master/docs/theming-your-components.md#using-colors-from-a-pallete

it would generate unnecessary(since they are already in the main file) classes, like elevation, inside my components's encapsulated css.. which is bad.

The way I see it, your _custom-theme.scss should import and contain something along these lines

@import '@angular/material/core/theming/theming';

$custom-color-primary: md-palette($md-blue);
$custom-color-accent:  md-palette($md-pink, A200, A100, A400);
$custom-color-warn:    md-palette($md-red);

$custom-theme: md-light-theme($color-primary, $color-accent, $color-warn);

the main style file should have

@import '@angular/material/core/theming/all-theme';

@include md-core();

@import './custom-theme';

@include angular-material-theme($custom-theme);

thanks to this, you'd be able to import _custom-theme.scss anywhere and be able to use palette functions as well as your variables without it generating any duplicated material classes
@wbhob
Copy link

wbhob commented Dec 23, 2016

This is fixed here: https://material.angular.io/guide/theming. This guide is really easy and I got started in 60 seconds.

Happy holidays!

@dehypnosis
Copy link

why builder say 'No mixin named md-core'?

@wbhob
Copy link

wbhob commented Feb 9, 2017 via email

@dehypnosis
Copy link

dehypnosis commented Feb 9, 2017 •
edited
Loading

i am on latest of master branch, and it seemes that the prefix of names are changed from 'md' to 'mat'.
is it right?

@dehypnosis
Copy link 

/* angular material theming */
@import '~@angular/material/core/theming/all-theme';
@include mat-core();

$app-primary: mat-palette($mat-blue, A400, A100, A700);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);
$app-warn:    mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme);

now it works!

@wbhob
Copy link

wbhob commented Feb 9, 2017 via email

@dehypnosis
Copy link

really? thank you for your help!

@wbhob
Copy link

wbhob commented Feb 9, 2017 via email

@artworkad
Copy link

For me mat-* does not work, but md-* does

@fxck
Copy link
Contributor Author

fxck commented Feb 14, 2017

That's because beta.1 still uses md-*, only the latest *-builds releases have mat-*.

@fxck
Copy link
Contributor Author

fxck commented Feb 14, 2017 •
edited
Loading

Also @wbhob no, it's not "fixed", still if you took the code from https://material.angular.io/guide/theming and put it in _my-theme.scss and then tried importing it in your custom component(to be able to use the colors you just defined, or md-*()/mat-*() functions generally), I would generate the whole angular theme encapsulated for the said component, that's like 30kb of styles inside EACH of your components.

@wbhob
Copy link

wbhob commented Feb 15, 2017

@fxck Yeah, we are all waiting for @angular to cut a new version. Their tests are passing, and they haven't released a new beta in TWO MONTHS. I, personally, am getting pretty furious at the lack of transparency.

@fxck
Copy link
Contributor Author

fxck commented Feb 15, 2017

Trust me, the situation is amazing compared to what it was couple of months ago. Also now you have the material2-builds repo, which helps a ton. #3075 (comment)

@ccheraa
Copy link

ccheraa commented Feb 16, 2017

I updated to beta-2 and md-* is not working anymore, had to use mat-*.

@wbhob
Copy link

wbhob commented Feb 16, 2017

That is correct and by design.

@ammon-lockwood
Copy link

I feel like I'm really missing something here and I can't figure it out. Can someone please help me?
I have a dialog with a form in it with material inputs.

login-dialog.component.html

<form (ngSubmit)="login()" #loginForm="ngForm">
    <div class="col-sm-12">
      <div class="form-group">
        <md-input-container class="full-width">
          <input placeholder="Email" type="email" name="email" id="email"
          mdInput
          md-input
          required
          [(ngModel)]="email">
        </md-input-container>
      </div>
      <div class="form-group">
        <md-input-container class="full-width">
          <input placeholder="Password" type="password" name="password" id="password"
          mdInput
          md-input
          required
          [(ngModel)]="password">
        </md-input-container>
      </div>
    </div>
    <div class="text-center">
      <button type="submit" class="button button-gray">Submit</button>
    </div>
  </form>

style.css:

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

angular-cli.json:

"styles": [
        "styles.css",
        "custom-app-theme.scss"
      ],

custom-app-theme.scss

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

None of the styling is changing on any of the input fields though. What am I missing?

@wbhob
Copy link

wbhob commented Mar 7, 2017

The tilde ~ represents the path and doesn't actually work. You'll have to build in the absolute path (./node_modules/@angular/...). Also, I don't think remote origins are supported, so just include them in index.htnl.

Finally, this is not the place for support requests, please post on stack overflow or elsewhere @sumnercreations

@jelbourn
Copy link
Member

jelbourn commented Apr 9, 2017

Closing this as it's drifted a bit off-topic.

AFAIK the two guides on theming on the docs site should provide decent guidance on custom theming and for theming your own components. Feel free to open a new issue if there are any specific problems.

@jelbourn jelbourn closed this as completed Apr 9, 2017
@fxck
Copy link
Contributor Author

fxck commented Apr 10, 2017 •
edited
Loading

@jelbourn I still think it's misleading, wrong, and unnecessarily increasing people's bundle sizes, the specific problem I initially described still stands

if I follow the directions of https://material.angular.io/guide/theming, that is:

  1. create my theme.scss, with this content
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);
  1. import it in my component's scss file with @import
// or whatever is the path to my theme
@import '../../assets/theme';

I do not need to do literally anything else, just this single line is gonna generate all the general m2 styles (elevation, ripple, cdk stuff)

image

and this is gonna happen for every single component you import your theme in!!

that's why it's important to separate

@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

which is what you can safely import in any component, because it itself doesn't generate anything, from

@include angular-material-theme($candy-app-theme);

which is what you want to include only once in your root component

@wbhob
Copy link

wbhob commented Apr 10, 2017 via email

@fxck
Copy link
Contributor Author

fxck commented Apr 10, 2017 •
edited
Loading

No, that is not true.

I have two empty components generated with ng-cli, FooComponent, BarComponent,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-foo', // bar-foo
  templateUrl: './foo.component.html', // bar.component.html
  styleUrls: ['./foo.component.scss'] // bar.component.scss
})
export class FooComponent implements OnInit { // BarComponent

  constructor() { }

  ngOnInit() {
  }

}

*.component.scss only includes this line @import '../../assets/theme';

theme.scss is c&p from theming guide

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

both are printed in the root component

image

since I've removed all other ng-cli styles (the default app.component.css and styles.css), there are only two <style> tags appended to head, for app-foo and for app-bar

image

this is content of the first one
image

this is content of the second one
image

@wbhob
Copy link

wbhob commented Apr 10, 2017 via email

@fxck
Copy link
Contributor Author

fxck commented Apr 10, 2017 •
edited
Loading

........... that's the whole point, you need to import your theme.scss, if you want to utilise ANY material2 sass helper functions, color palettes, your theme

https://material.angular.io/guide/theming-your-components
image

if you do this, where @import 'src/unicorn-app-theme.scss' is this
image

you are gonna 28kb of unnecessary styles (after minification) included in your component

@fxck
Copy link
Contributor Author

fxck commented Apr 10, 2017

the guide should say that you should define your theme in theme.scss, but instead doing @include angular-material-theme($candy-app-theme); in the same file, your should import this theme.scss in your main/global style and call the angular-material-theme function there, only then you can safely import your theme.scss in any component without it generating duplicated files

@wbhob
Copy link

wbhob commented Apr 10, 2017 via email

@wbhob
Copy link

wbhob commented Apr 10, 2017 via email

@fxck
Copy link
Contributor Author

fxck commented Apr 10, 2017 •
edited
Loading

I don't understand why are you commenting if you don't understand. :)

If you use webpack (or ng-cli), there's no such thing as globally available sass functions and/or variables, you HAVE to @import them in every single component you need them:

webpack-contrib/sass-loader#218
webpack-contrib/sass-loader#211

..and million other issues.

The only thing you can use, are the already generated css classes (ie. elevation), if they are either in your head tag, or in your root component with disabled encapsulation. But that still only allows you to do:

<div class="mat-elevation-z1"></div>

and not:

<div class="foo"></div>
.foo {
  @include mat-elevation(1);
}

@fxck fxck mentioned this issue Apr 10, 2017
Closed
@codercatdev
Copy link

@fxck thank you so much!!! Same functionality
Old
image
New
image

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@artworkad @ammon-lockwood @jelbourn @fxck @codercatdev @dehypnosis @wbhob @ccheraa