Angular 2 Material Foreground -


i have difficulties changing colour of foreground in angular 2 material. example in toolbar, text black. tried change following styles

@import '~@angular/material/theming';  $primary: mat-palette($mat-cyan, 300); $accent : mat-palette($mat-yellow, 500);; $warn : mat-palette($mat-red, 600);  $theme-foreground: (   base:              gray,   divider:           $white-12-opacity,   dividers:          $white-12-opacity,   disabled:          rgba(200, 200, 200, 0.38),   disabled-button:   rgba(200, 200, 200, 0.38),   disabled-text:     rgba(200, 200, 200, 0.38),   hint-text:         rgba(200, 200, 200, 0.38),   secondary-text:    rgba(200, 200, 200, 0.54),   icon:              rgba(200, 200, 200, 0.54),   icons:             rgba(200, 200 , 200, 0.54),   text:              rgba(200, 200, 200, 0.87),   slider-min:        rgba(200, 200, 200, 0.87),   slider-off:        rgba(200, 200, 200, 0.26),   slider-off-active: rgba(200, 200, 200, 0.38), );  $theme-background: (   status-bar: map_get($mat-grey, 300),   app-bar:    map_get($mat-grey, 100),   background: map_get($mat-grey, 50),   hover:      rgba(200, 200, 200, 0.04), // todo(kara): check style material design ux   card:       white,   dialog:     white,   disabled-button: $black-12-opacity,   raised-button: white,   focused-button: $black-6-opacity,   selected-button: map_get($mat-grey, 300),   selected-disabled-button: map_get($mat-grey, 400),   disabled-button-toggle: map_get($mat-grey, 200),   unselected-chip: map_get($mat-grey, 300), );  $theme: (     primary: $primary,     accent: $accent,     warn: $warn,     is-dark: true,     foreground: $theme-foreground,     background: $theme-background   );  @include mat-core();  @include angular-material-theme($theme);

primary , accent colours changed, frontend did not change. how can fix it?

i tried set toolbar theme, there wasn't difference.


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more