Tekst przycisku motywu za pomocą kształtu kątowego

Question

Chciałbym użyć $mdThemingProvider do uniwersalnego skonfigurowania wszystkich przycisków w mojej witrynie za pomocą niestandardowej palety. Potrafię manipulować kolorem tła przycisków, konfigurując w palecie A200 i A700. Chciałbym również zmienić domyślny kolor tekstu. Wpadłem na pomysł z contrastDefaultColor, contrastLightColors i contrastDarkColors, ale najlepsze, co udało mi się zrobić, to uzyskać czarny lub biały tekst.

Poniższy snippit będzie produkować białe przyciski z ciemnym tekstem:

var lightGrey = $mdThemingProvider.extendPalette('grey', { 
    'A200': '#fefefe', // Element background color (default) 
    'A700': '#fefefe', // Element hover background color (default) 
    'contrastDefaultColor': 'dark', 
    'contrastLightColors': '600 700 800 900' 
}); 
$mdThemingProvider.definePalette('light-grey', lightGrey); 

$mdThemingProvider.theme('default') 
    // Accent palette controls buttons, links, etc 
    .accentPalette('light-grey'); 

Zmiana contrastDefaultColor do „light” powoduje, że tekst stają się białe.

mogę ręcznie osiągnąć efekt chcę nadrzędnymi zasadami wygenerowanego w arkuszu stylów:

.md-button.md-default-theme.md-fab { 
    color: #bdc3c7; 
} 

... ale staram się korzystać z narzędzi dostępnych w bibliotece.

Answer 1

Nie wiem, dlaczego masz do czynienia z tym problemem, ale podając A200 & A700 kolor, który chcesz podać, rozwiąże problem. tak:

var lightGrey = $mdThemingProvider.extendPalette('grey', { 
    'A200': '#bdc3c7', // Element background color (default) 
    'A700': '#bdc3c7', // Element hover background color (default) 
    'contrastDefaultColor': 'dark', 
    'contrastLightColors': ['600', '700', '800', '900'] 
}); 

Uwaga: Spróbuj dać kontrast palety w postaci tablicy.

A jeśli stoją jakiś inny problem zaktualizuj lub można odnieść tę link