Văn bản nút chủ đề bằng Thiết kế Vật liệu Góc

Question

Tôi muốn sử dụng $mdThemingProvider để định cấu hình chung tất cả các nút trên trang web của mình bằng bảng màu tùy chỉnh. Tôi có thể thao tác màu nền của nút bằng cách định cấu hình A200 và A700 trong bảng màu. Tôi cũng muốn thay đổi màu văn bản mặc định. Tôi đã cười khúc khích với contrastDefaultColor, contrastLightColors và contrastDarkColors nhưng điều tốt nhất tôi có thể làm là nhận văn bản màu đen hoặc trắng.

Các snippit sau đây sẽ tạo ra các nút màu trắng với chữ màu tối:

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'); 

Thay đổi contrastDefaultColor để "ánh sáng" làm cho văn bản để chuyển sang màu trắng.

tôi bằng tay có thể đạt được hiệu quả Tôi muốn bằng cách ghi đè quy tắc stylesheet tạo của:

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

... nhưng tôi đang cố gắng sử dụng các công cụ được cung cấp trong thư viện.

Answer 1

Tôi không biết tại sao bạn phải đối mặt với vấn đề này nhưng bằng cách cho A200 & A700 màu bạn muốn cung cấp sẽ giải quyết được sự cố. như thế này:

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'] 
}); 

Note: Cố gắng đưa ra bảng màu tương phản ở dạng mảng.

Và nếu bạn đang gặp phải một số sự cố khác, vui lòng cập nhật hoặc bạn có thể tham chiếu này link