1

Is there any way to access theme colors in Sass files. For example, I want to set my text color to the primary color. This is my attempt, which does not work:

.task-duedate {
    color: $md-primary;
}
user276648
  • 6,018
  • 6
  • 60
  • 86
Naresh
  • 23,937
  • 33
  • 132
  • 204

1 Answers1

0

Material Design best practices suggests that one should use white or black as a text(body-content) color which will be done by default using angularJS Material Design Library. For links you can use flat buttons.

nextt1
  • 3,858
  • 2
  • 18
  • 26
  • Can you please provide a reference? My designer would like to draw users attention to a warning, i.e. task is overdue. I feel it's reasonable ask. This is not a link, it's not a button - it's simply an informational/warning message. – Naresh Mar 10 '16 at 20:31
  • https://www.google.com/design/spec/style/color.html check **Text and background** colors section. check this too. https://material.angularjs.org/latest/api/directive/mdHighlightText – nextt1 Mar 10 '16 at 20:36
  • Also please note that the code shown in the question is simply an example. The more generic question is - is it possible to use theme colors in Sass files - whether they are for text or for buttons or something else. Specifically I have only seen examples of using `hue-1`, `hue-2` etc. in markup, but not the raw palette colors like `100`, `200`, `A100` etc. – Naresh Mar 10 '16 at 20:37
  • https://material.angularjs.org/latest/Theming/03_configuring_a_theme You can specify your own theme with as many palette colors you want. – nextt1 Mar 10 '16 at 21:11
  • Thanks, @nextt1. I know that method. While it allows me to create palettes using `100`, `200` etc., it does not allow me to use those symbols directly in markup or in css. I have to use abstractions like `hue1`, `hue2` etc. – Naresh Mar 10 '16 at 21:40
  • You can define any color you want in configuration and can easliy use it. For example `md-primary-hue-1`. Why do you need a seperate css(sass) file for that. – nextt1 Mar 10 '16 at 21:48
  • Only use-case I have right now is the text example in my question. In that case I cannot use `md-xyz` in markup - Angular Material simply doesn't support it. The only way to override the color is via Sass/CSS. I did look up the **Text and background** link that you provided, however it does NOT say that you can't use color on text and there are plenty of Material examples of people doing it (Google Maps, Todoist, ...) – Naresh Mar 10 '16 at 22:36
  • It clearly says that we should use dark text on light background and white text on dark background and use different levels of opacity instead of different color. I don' think i have seen any design with other than black or white text color for main content. we can use color for headers and links but the text mostly represented by white or black color with opacity. try to use subheader if possible https://material.angularjs.org/latest/api/directive/mdSubheader – nextt1 Mar 11 '16 at 04:17
  • http://stackoverflow.com/questions/28487327/how-to-set-text-color-in-angular-material @Naresh – nextt1 Mar 11 '16 at 16:08