Kako dostopam do primary/accent barv v Angular/Material?

2 naročnika

Neki custom komponenti bi rad dal enako ozadje kot ga ima app toolbar za katerega sem določil da je v primary barvah.

Za default lahko to nastavitev dobim takole:

.custom-component {
    background-color: map-get(map-get($theme, background), app-bar);
}

Kako pa dobim to isto nastavitev za primary oziroma accent?

Sem si pred časom tudi jaz razbijal glavo s tem in bil prepričan, da te nastavitve zagotovo kje dobiš, ampak ko pogledaš _toolbar-theme.scss (src/lib/toolbar/_toolbar-theme.scss), ugotoviš, da ne.

Poglej tole:

@mixin _mat-toolbar-color($palette) {
  background: mat-color($palette);
  color: mat-color($palette, default-contrast);
}

in tole:

$primary: map-get($theme, primary);

.mat-toolbar {
  &.mat-primary {
    @include _mat-toolbar-color($primary);
  }
}

V tvojem primeru bi za primary barve potem bilo nekaj v tem stilu:

$primary: map-get($theme, primary);

// dodal sem še color nastavitev, ker
// predvidevam, da boš to tudi potreboval
.custom-component {
  background-color: mat-color($primary);
  color: mat-color($primary, default-contrast));
}

Lahko bi sicer uporabil tudi kar mixin _mat-toolbar-color, ampak underscore pred imenom nekako sugerira, da je to bolj internal mixin in bi ti zadeva lahko tudi crknila ob kakšni spremembi. Odločitev je tvoja. :)