CODEWITHSUNDEEP
javascriptcssangularjsmaterial-designangularjs-material
Jim
Jim

Reputation: 4192

How Do I Fully Customize Angular Material Subheader Component?

Hi I'm very confused about how to style angular material components (angular 1.4).

I basically took the source code from the material site here and dropped it in my project:

https://material.angularjs.org/latest/demo/subheader

I wanted a list with sticky headers so this component is perfect. However, I need the colors to be different- very different.

enter image description here

For example, I need the background to be transparent dark gray and the text to be light gray.

If possible, I'd like to change the scroller thumb color too. So, is this even possible? I tried using a custom theme, but it seems to only affect the header color.

Upvotes: 0

Views: 2375

Answers (1)

Alex Mounir
Alex Mounir

Reputation: 1241

If you downloaded the whole pack you will find in the /modules/closure a directory list of all the components. In the subheader folder you can find the subheader-default-theme.css file.

.md-subheader.md-THEME_NAME-theme {
color: '{{ foreground-2-0.23 }}';
background-color: '{{background-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-primary {
 color: '{{primary-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-accent {
 color: '{{accent-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-warn {
 color: '{{warn-color}}'; }

add it to your material_custom.css

set these to the values you prefer and then use the md-THEME_NAME_YOU_CHOOSE on the elements you need.

If you need further styling, inspect the element and add the style in the themes you already set.

Upvotes: 0

Related Questions